Live from FOWD: Front-end development strategies

Written by Andy Fowler on November 16, 2010


We decided from the very beginning that Nutshell would use the HTML5 doctype, and we borrowed a lot of great techniques from the HTML5 Boilerplate project, with the Modernizer library to help us along. We quickly realized that the HTML5 inner shiv patch was necessary to get older browsers to work with HTML5 elements added to the page by JavaScript. We also found the data attribute (now supported natively in jQuery) to be really useful for passing metadata to JavaScript.


LESS proved to be an extremely valuable tool for us. While it was originally created in Ruby, we used LessPHP for the web application, and Less.js for our marketing site. Less offers many great extensions to vanilla CSS, including variables, mixins, and operations. This is what the LESS syntax looks like:

Here are some of the especially useful mixins that we put together:

Jekyll and Git

For our marketing site, we decided to use Jekyll rather than a full-blown content management system. It works terrifically for our environment where coders are maintaining the site. We push to our Git repository, which compiles the site in Jekyll and Less.js, then uploads it to our web servers. Take a look at the Less.js - Jekyll plugin we wrote, that compiles our Less for us.

Andy Fowler


Andy is CTO and co-founder at Nutshell. He’s been working with the web since the 28k modem. You can look for his bike hanging inside of our Ann Arbor offices, or find him walking his beagle, Barclay, near Michigan Stadium.