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_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?
Keep up to date: sign up to our infrequent newsletter …