Back home

Less Framework

An early adaptive CSS grid system

I called Less Framework “a CSS grid system for designing adaptive websites”. It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub.

Guidelines over code

Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. This is how I still work today and definitely a method I advocate. Predefined layout code makes too many assumptions, getting in the way whenever I try to do anything different.

/*    Default Layout: 992px.
      Gutters: 24px.
      Outer margins: 48px.
      Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

Reception

Less Framework was popular in the early days of responsive design. (It actually launched around the same time as LESS. That was quite a naming conflict.) With articles written on sites like Mashable and Sitepoint. It ended up helping design various sites and even being used as part of other frameworks, like 320 and Up.

Eventually, I moved on from fixed-width grid systems and worked on a fully fluid-width one, in the form of Golden Grid System. Later, I revisited the fixed-width grid concept in the form of Frameless.

Less Framework’s popularity was helped by the following contributions and the lovely people behind them (dead links crossed off):

Published on