Site update using Zurb Foundation 4

Zurb Foundation 4
Look at the cute little guy, complete with hipster glasses!

So last Wednesday I returned from Australia after two years of work and travelling; it’s gone so quick! I guess time flies when you are having fun and building websites! In that time one reoccurring word I’ve come across is “responsive”. When I left the UK responsive design and responsive development was an emerging methodology; but that’s all changed and now everybody wants a responsive website!

The responsive dust has now settled, and, as always happens in development two prominent responsive frameworks have emerged. Bootstrap, originally developed by two developers at Twitter and Foundation by Zurb. Now I’ve had previous experience with Bootstrap (which uses LESS) but only passing experience with Foundation (which uses Sass). I’ve been meaning to make the website responsive for quite a while, so I may as well kill two birds with one stone; learn something new and responsivise (is that a word?) the website, so Foundation looks to be the obvious choice.

Foundation has just reached version 4 and I must say you can really tell. It’s a very mature framework with an excellent set of documentation. As a bonus if you need to get up to speed quickly and have a spare bit of cash lying around they even offer training sessions once a month where you get to ask the original developers questions. What a fantastic way to learn a new framework!

There are a whole set of pre-built JavaScript add-ons available for developers to use, all responsive by nature and easily customisable if needed. Each is independent of each other so you only need to include the ones you need. From a CSS point of view the framework is built upon Sass (Syntactically Awesome Stylesheets) and it offers a whole heap of cool functionality like variables, mixins and nested rules. Using a command line tool these .scss files compile down to regular CSS. Awesome!

I’ve updated the site today with the basic functionality I need but I have a few issues I still need to resolve:

  • Responsive images using the interchange.js add-on. The add-on works really well but it’s figuring out how best to generate the different images automatically using WordPress that is the issue.
  • Adding a “medium” grid layout to target tablet size devices. Version 4.2 has an experimental version that works, but has a few quirks.
  • Working with Sass is fantastic but I’m sure there are a few optimisation that I can make to my workflow when using it Sublime Text 2. SublimeOnSaveBuild looks like a handy plug-in but unfortunately it doesn’t seem to be working for me at the moment.

There we have it, converting a standard website to a responsive layout is quick and easy with Zurb Foundation. I’m looking forward to learning lots more about this excellent framework in the future. I may even have to sign up to their online training too!