Nutshell CRMIn a Nutshell

A blog on business software, design and engineering.

Live from FOWD: Front-end development strategies Written by Andy Fowler on November 16, 2010

HTML5

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 CSS

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.

About Andy Fowler

@andyfowler

Andy is a software developer and founding partner at Nutshell. He’s been working with the web since the 28k modem. Look for his bike in front of our Ann Arbor offices.