Lately I’ve been playing around with Less.js, as part of that I’ve tried to find a decent way to make a set of elements that can be reused easily across my team at work as well as my personal projects.

After a little bit of an initial investigation there where 2 ways that I thought we could go to create a set of less files to create a collection of standardised styles:

1. Develop a set of mixins for the various standard parts of the style and then just call them in the elements where you want them
2. A set of less files for common style features on a page that are imported as they are needed/wanted

After a bit of of a play around with them both I came to the conclusion that using a set of imports for each style feature was the easiest to both maintain (change the file and just recompile your master) and easiest for other people to use. It promotes a nice clean code base and the style has a structure similar to the html you are trying to skin.

With that in mind my next step was to take this concept and turn it into a reality. Luckily we have an amazing creative department at work who have produced a set of internal guidelines for internal sites, from there each of the different parts of the common style are easy enough to breakdown to .less files. After a little while I’d managed to throw together the basics of the new .less style the results look a little like the below:

Main.less – A .less file into which all the other components are imported into and acts as the base for the style
GlobalNav.less – Contains the common global navigation
Masthead.less – Contains the style for the masthead, the user must set @mastheadBackground
Nav.less – Contains the menuing for the site – user must set @navAreaBackground and @navAreaHeight
Mixins.less – My common set of mixins, mostly containing font styles and a mixin to make lists horizontal.
Grid.less – The most awesome example of how awesome less.js is, instead of using a million divs to get a grid you can how just declare .960grid([numberOfColumns]) and the less works out the correct sizes for the div your in. So awesome!

A very simple example of this looks like:

@import "mixins.less";
@import "Grid.less";
@import "elements.less";

//We need to include the PIE.HTC file
@PIELocation: url(/Scripts/PIE.htc);

// Lets use sans-serif fonts
.sans-serif();

// SiteWidth
@siteWidth:960px;

// Global Navigation
@import "GlobalNav.less";

//Masthead
@import "Masthead.less";
@mastheadHeight:110px;
@mastheadBackground: #001133;

//Nav area
@import "Nav.less";
@navAreaBackground:#222;
@navAreaHeight:40px;

//Main content of the page
.mainContainer{

    // Container for everything - grid960
    .container();

    // A bit of top padding
    padding:15px 0;

    // This is only for demo purposes
    background:#d00;

    // The left side
    .left{

        // 8 columns wide and a demo background colour
        .grid960(8);
        background:#0d0;
    }
    .right{
    // 4 columns wide and a demo background colour
        .grid960(4);
        background:#00d;
        color:#fff;
    }

    // Make sure we clear everything
    .clearFix();
}

// Footer for the entire page
@import "Footer.less";

The other cool thing we’ve done with less.js is to include CSS3 PIE as a single variable, so we declare its position relative to the site root and position: relative. This gives us IE6, 7 and 8 compatibility with nearly stylesheet we author.

The other huge advantage of taking an approach using the less framework is that now when we fix a style defect in a project we can add it back into the less.js codebase and everyone can benefit from that meaning that hopefully going forward we can not only cut down on the amount of defects that make it into production we should also be able to cut down on the amount that are already in there.

This is just a taste of the power I’ve seen in less.js and I like it!!