posted 2 years ago

Sublime Text Setup - quickly setup Sublime Text

This enables people to get started with Sublime Text 2 much more quickly by providing settings, info & 'bootstrap' files.

posted 2 years ago

The Choreographic Grid - a CSS grid for content interdigitation

After having read Trent Walton's article on Content Choreography & working on a number of responsive sites, I felt that the current group of CSS grids was lacking in this department - so I created my own.

It is definitely a work in progress & there are still features I would like to add but I thought I should get a sense check from you guys to see if its worth pursuing.

As well as the usual grid, centred columns, source ordering & offsetting, I have added two features: Shunting & Splitting.

Shunts (demo link) are, typically, small columns on the end of a row that 'shunt' down to their own row when the viewport dimensions are reduced. The other columns in that row can then be resized to fill the leftover space from the shunted column.

Splits (demo link) are columns that sit beside each other on wider viewports but when the viewport dimensions are reduced, they stack on top of each other. This might seem like 'normal' responsive grid behaviour but the rest of the grid is still enforced (for want of a better word).

Both these things allow the layout to adapt in a more natural way, that traditionally has not been available to us.

By the way, Splits can be shunted too.

I should caveat this by saying that there is lots more work to be done, I have repeated some code in different media-queries which I don't want to do - I have big plans for this grid. I'm also not using CSS that only works in Chrome Canary, you can use this today if you wanted to.

One feature that I would like to implement is to automatically name each media-query. I want to use javascript to find all the breakpoints & then store them in an array, then add a class to the body tag so I can change layout depending on how wide the viewport is. I like the idea of naming media-queries so I will explore the possibilities in the coming weeks.

If anyone has any thoughts, ideas or suggestions I would really appreciate it. Please fork it on Github too

Demo site -

All features on one page -

posted 3 years ago

A responsive toolkit - a call to arms

Building a responsive site is hard sometimes, particularly when you want to have a carousel on your page but the plugin you normally use does not have the ability to resize or recalculate when you resize your browser.

I would like to gather a collection of scripts/plugins/techniques to use when building a responsive site – things like carousels & image sliders – so that when I need a plugin for a particular purpose, I know which one has been user tested &, most importantly, vouched for.

Examples of the type of things I’m referring to could be: full-screen/full-width/fluid-width media (images, video), carousels, image sliders, image galleries, text resize/reflow, tabs, grid systems… you get the idea. These scripts should also have lean markup & good fallbacks should the not have javascript turned on.

There's more info on my blog post, so please check it out.

Please comment here or on the blog post itself with your suggestions.


posted 3 years ago

Customise Sublime Text 2

Over the past few weeks I have been trying out the beta of Sublime Text 2, a cross-platform text editor for Windows, Linux & OS X. I am not going to give an in-depth review of the app, many people have done that before me, but suffice it to say, I love it & think you should check it out too.

This post outlines the essential plugins, settings & extras that will make Sublime Text 2 your new favourite IDE.

posted 3 years ago

Cloze test creator

Simple webapp to create Cloze tests

posted 3 years ago

Boost HTML & CSS Boilerplate framework

I’m afraid I have added to the abundance of other HTML & CSS boilerplates or frameworks, I created BOOST a framework that takes the best techniques & snippets of what I find useful & puts them together in a neat little package.

Among other things, BOOST uses the ‘mobile-first’ methodology coined by Luke Wroblewski (find out more, please read the excellent post ‘Mobile First’ at…). It uses the reset from the HTML5 Boilerplate, a bunch of stuff from Inuit.css.

Checkout BOOST on Github:…

posted 3 years ago

How to launch Mac apps n minutes after login/boot

Having masses of apps opening at launch slow my Mac down to a crawl so I found a free & fairly simple way to launch a bunch of apps a few mins after...