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’.

But however wonderful it looks, it was just too much ‘stuff’ for me … download a copy and you have everything – and I mean *everything* – you could ever want to build an HTML5 website.  But, driver beware.  If you don’t understand everything, don’t use everything.  If you don’t fully understand what makes up the component parts of a system like this, don’t use it – you’re just kidding yourself.  Like using jQuery without understanding Javascript.  You don’t do that, right?  Right.

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.)

I’ve been using Less.App in conjunction with the Semantic Grid System which allows me to set up flexible, responsive layouts in double-quick time.  It’s all a god send.

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.

Phew!