Really, this should be filed under ‘probably too good to be true’ … but let’s hear it out.

So, here’s the problem: there are a ton of great grid based CSS frameworks for designers to work with – frameworks which provide a baseline for dividing up the page into a usable grid via a series of <div>’s with class names that, whilst not being very helpful, are at least descriptive.

For instance, if you used the popular 960.gs you’d have a ton of div’s that look like this:

<div class=”grid_3″>
<div class=”grid_6″> … and so on …

… the complaint here is you’re mixing presentational information with what would otherwise be semantic mark up.  Additionally, the frameworks are not fluid – they all appear to be fixed width, and they’re not responsive – they don’t adapt to small screen sizes (with the notable exception of Less Framework 4) or changes in device orientation

So … long story short … using LESS (confusingly, nothing to do with the Less Framework … grrr …), the dynamic stylesheet language – which enables you to use variables and mixins within your CSS – someone far smarter than me has built the Semantic Grid System.  From the website:

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?

You can read about the whole thing on Smashing Magazine or cut out the middle man and go straight to the source.

Nice work.