Bones Theme and LESS

Bones Theme and LESS

I already posted here about how excited I am to work on a responsive design, with a ‘mobile first’ approach, on an upcoming project. And what will make it really exciting is using the Bones starter theme from Themble to jumpstart this process. I have used an older version of this theme on several projects, but that was a standard, non responsive version. The current iteration is fully responsive, HTML5 coded, and utilizes either (your choice) the LESS or SASS CSS preprocessor.

For those of you who don’t know, these CSS preprocessors work as a sort of souped up, dynamic version of CSS that utilize variables, calculations and nested syntax which greatly enhance the flexibility and ease of CSS development. These files are then complied and output as regular ‘vanilla’ CSS for your project. You can read an in-depth primer over on Smashing

There are few different ways you can handle this workflow, a few different options whether you are working on Mac or PC, and whether you choose LESS or SASS. The two languages are very similar, although I chose LESS as my starting point because the syntax is basically a superset of regular CSS and seems easier for me to jump into.

Also, there are a few easy ways of working with LESS and importing the files. First, I was pleased to discover that .less files open and edit like regular CSS files in my code editor. In fact, you can simply rename your .css files with the .less extension and voila, you are off and running. For compiling, one way to go is to use the less.js script, which you import into your HTML document after the .less file – and it compiles in the browser for you. From sources I have read, this is not the preferred way to compile, because it can sometimes be sluggish in the browser – I DO recommend this for just checking out how it works and playing with it locally.

There is also a PHP script which can compile the files, but I like using a compiling tool such as the (on Mac). Its free and it couldn’t be simpler to use. All you do is drag the folder containing your LESS and CSS files into the app window, and whenever you save your .less files, it automatically updates the .css files for you.

One of the points I like about the Bones starter theme, is that the .less files are broken out and organized by media query breakpoints. This is just an organizational preference, but what I find attractive about it is that is helps me focus on each ‘width zone’ individually, starting with the simplest which is for iPhones and mobile phone sizes, and then working up from there very logically and distinctly.

This will be one of the first web design projects that the creative director I am partnered with will be working on that is responsive, mobile oriented and that changes according to device sizes. As I get into this project, I will repost with challenges or points of consideration I find along the way, or areas that other designers and front-end developers may find helpful in troubleshooting either the Bones theme, the .less language, or the responsive design process in general.

Submit a Comment

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>