I’ve been thinking a lot lately about how I build websites – the process and the code base I use for each projects – both of which have recently undergone the sort of evolutionary leap more commonly found in X-men movies.
It started with a need to familiarise myself with HTML5 at the beginning of the year (yes, this is a 12 month evolution!) – brought on by the usual need / desire to stay current and focused. From Jeremy Keith’s excellent book ‘HTML5 For Web Designers‘ (also available for free here) to the wonderful online resource ‘Dive into HTML5‘ I kind of felt comfortable enough to begin using it as my default doctype for new projects – and converted some of the more straightforward client sites.
So, ticked that box. For previous doctypes, I’d built up a collection of Coda snippets which helped me start new websites – it was fine, a bit of Eric Meyer reset here, a little bit of media queries there … no bother. However, along came HTML5 Boilerplate which promised to be a bit of a game changer … a complete ‘rock solid default template for HTML5’.
It was too much – but then, hah! – I found HTML5 Reset. That’s more like it – “A simple set of templates for any project”. This was basically an extension of the snippets I was already using … stylesheets with built in media queries, a directory structure that kept things nice and simple, some CSS resetting, and a neat inclusion of jQuery libraries, Modernizr.js and other little tweaks to keep your project nice and consistent across browsers. Fab.
So – there I was, HTML5 ready. Ah – then, Mr. Marcotte stepped up with another game changer – his gem of a book on Responsive Web Design arrived and lo: more new process goodness to incorporate. But it’s all good – this is why we’re here: to learn cool new things to do, great new ways to do things. And so forth. But yes – a process that hadn’t changed much in about 3 years was getting a radical overhaul.
Turned out then, that the final piece in the puzzle was using the LESS app for my CSS development.
Less is a CSS pre-processor … but what that really means is that it makes developing in CSS that much easier. By extending CSS to include variables, Mix-ins, nested rules, etc. it allows CSS to behave much more like a programming language than a mark up language. You can specify variables for colour, border-radius, background gradients … so that just by including the variables in your .less file, they get automatically expanded and generated in the CSS file. It’s cool – and it saves so much time. (I think of it as being like jQuery though … learn the CSS first, and then start using this tool. Again, you need to know why the tool makes sense.)
So, there you have it … a brief summary of an evolving work practice. As I get more into projects using these tools I’m sure it will evolve (I’m looking at you, Code Kit) but I doubt I’ll see such massive shifts again in the next couple of years.