less.js, lessframework & CSS grids ala Blueprint or 960.gs

Question

Ok, so Less.js has come along, and it seems that my dreams of creating a CSS framework (especially a 'grid' system), with an 'abstracted' CSS language might be about to come true.

That is, 960 and Blueprint are great and all... but it so irked me to put style information in HTML markup, such as:

class="article grid_4 pull_2"

or whatever the syntax was :)

So, now it seems that we can do it this way:

.article {
  .grid_container();
  .grid_four();
  .pull_two();
  .last();  
}

Weeeeeee!

So, I'm about to get stuck into developing this for myself -- but I'm sure there are some brainiacs out there that have already done it -- so before I get into any heavy lifting...?

Any leads?

Kindly

Daryl.

Answer 1

This is the CSS framework you're looking for - http://semantic.gs/

The Semantic Grid System - Page layout for tomorrow. Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any ugly .grid_x classes in your markup. Oh, and did we mention it's responsive? Brought to you by LESS.js and the creator of 1KB Grid.

Answer 2

I checked out less , it was a push between that and the new sass (scss) syntax, but what made me choose sass is that it has a way to turn css into scss code.

The round trip was something I definitely wanted. Once that happened, then Compass presented itself. I was going to try using something to code everything in python, but it makes perfect sense to me to preprocess the css, especially since I'd like to use HTML5, and if the spec changes, then I can tweak the generation.

Answer 3

BTW folks, I've started that framework I was talking about.

http://github.com/DarylAntony/lesser

I'm having fun with it.