LESS: Generating grids and columns + LESS.app

måndag 15 februar 2010 - Filed under CSS + Web design

After more mocking around with LESS, I’m starting to see the possibilities that this framework presents. Defining constants (I do prefer the term constants over variables) in the beginning gives you an immense flexibility down the road. I’ve been experimenting with this little system that, based on a set of constants, defines the underlying grid for a very customisable layout. Have a look at the quick demo, or see the details below.

View the LESS (could be tidier..)

Defining values for your grid

@grid-margin: 20px;
@grid-size: 60px + @grid-margin;
@grid-stops: 12;

Depending on the kind of layout you are producing, and the size of it, these values will vary a lot. This is for a 12 column grid, at a total of 940 pixels.

A 12 column grid, as you’d know, is desirable because it can be divided into two, three, four and six columns.

Defining the width of your #page using the values

#page { width: @grid-size * @grid-stops - @grid-margin; }

…will output a width of 940px, because ((60+20) * 12) – 20 = 940 px

This will multiply your desired grid size (including margins) by the amount of stops, and subtract the last margin (because you don’t want a right margin at the right hand edge of your page.) Starting to see where this is going?

Defining columns

Using the same constants, you can easily define different column sizes.

.column-half {
width: @grid-size * @grid-stops / 2 - @grid-margin;
margin-right: @grid-margin;
}

.column-thirds {
width: @grid-size * @grid-stops / 3 - @grid-margin;
margin-right: @grid-margin;
}

.column-fourths {
width: @grid-size * @grid-stops / 4 - @grid-margin;
margin-right: @grid-margin;
}

.last {
margin-right: 0;
}

The .last class is necessary to remove the right margin from the last column, like you would do with any column based layout.

Again, have a look at this quick demo, where the @grid-size is 60px, and this one, where I changed the @grid-size is 50px.

Push/pull

You might be familiar with the push/pull classes from Blueprint, which use fixed pixel width values. You can easily do the same thing with LESS, using your variables.

.pull-1 { margin-left: - @grid-size; }
.pull-2 { margin-left: - (@grid-size * 2); }
.pull-3 { margin-left: - (@grid-size * 3); }
..etc

You could even use the CSS3 attribute selectors to select all the pull classes and add floats, instead of the endless string of classes that we’ve been doing so far.

div[class^="pull"] { float: left; position:relative; }

Working with LESS.app

I’m working with LESS in Espresso, running the LESS app on auto-compile in the background. Surprisingly, LESS.app is ignored over at LESScss.org (is it mentioned at all?) It is a great little tool that will scan any folder for .less files, add them to a graphical interface, and auto-compile them whenever you make a change. LESS.app was created by Bryan D K Jones, and even if you prefer using the command line («Command line junkies never get laid»), do check the website.

It is working perfectly, except for one thing: for some reason, Espresso doesn’t update the CSS when LESS compiles. Opening the file in CSSEdit or TextWrangler confirms that it is compiled, so it’s not an issue with LESS.app, but Espresso doesn’t seem to pick up on it. This isn’t really huge problem, but it does break the built-in preview in Espresso, and it makes it tedious to check what the CSS output looks like.

Either way, working LESS is a treat, the CSS output looks good, it is all valid, and the learning curve is slim to none if you’re already familiar with CSS.

 ::  Share or discuss  ::  2010-02-15  ::  Asgeir