Less (CSS) Grid Example

One of the main reasons for using a language like Less is to move away from using ‘span10’ or ‘col10’ when using a grid based html layout for your webpage.

After all…

<div class=“row”>
  <div class=“span10”>Main Content</div>
  <div class=“span4”>Side Content</div>
</div>

Doesn’t seem right… But…

<div class=“content”>
  <div class=“main”>Main Content</div>
  <div class=“side”>Side Content</div>
</div>

Seems a little better…

The problem is, how do we apply .span10 to .main and achieve the same effect?

Less Mixins can certainly help. Suddenly, we can do the following…

.main {
  .span10;
}

And Less will compile the properties that make up .span10 into our .main css. However, be careful, because some frameworks (such as Bootstrap) use class name based selectors to add further styles (namely inline).

Demo: http://archive.wookets.com/examples/html5/lessgrid/

Source: https://github.com/wookets/lessgrid

Btw, if you’re on OSX and want to easily compile Less, check out Codekit.

All of this being said, be careful. Things break really easily if you don’t know what you’re doing, which in that case it might be better to stick with span# in your html… You know, for stableness.

Resources:

- Twitters Bootstrap Framework - http://twitter.github.com/bootstrap/

- Less - http://lesscss.org/

- Codekit - http://incident57.com/codekit/index.php

Published by and tagged Code using 193 words.