Centage – The Smart and Fluid CSS/LESS Framework

Centage! is five cents in defining a good fluid css framework. Every framework has its shortcomings – as has Centage! too – but it also solves some major issues in existing ones.

Reason for Centage! is purely practical. I started to redesign my own site and wanted to go for a fluid grid, mostly just for the challenge of it. At the same time I had made some tests with Less and although it seemed pretty cool, it was still tricky to develop with command line compiler. When less.js came along, the pieces existed for putting together a next gen fluid framework.

None of the existing fluid frameworks worked as I wanted them to. Fluid 960Grid is an impressive achievement, but what if I want to start my grid from page edge? Or what about nested grids and their gutters? Another wonderful undertaking is Elastic, but it’s dependancy on javascript troubles me.

I have my roots in print design and designing complex grid systems for newspapers. So I wanted the same kind of grid into web as well. Especially nested, percentage width grids are a challenge that simply cannot be addressed with traditional css (because they inherit relative width from parent element).

requirements for a grid system are:

1. It should work acceptably without javascript.
2. It should mimic print grids as accurately as possible.
3. Proportions of columns and gutters should be visually equal at any width.
4. It should add minimum extra markup.
5. No representational markup.
6. Should work on most browsers after IE6. IE6 users can expect trouble anyway.
7. It should be light + simple.