Are you looking for a lightweight responsive layout framework with minimal bells and whistles? And you don’t want use Bootstrap? Well maybe Base is for you. Base utilizes the LESS dynamic stylesheet language less to make websites targeting all screen sizes easy peasy. With mixin support, it doesn’t take long to get your site looking great on tablets, phones and the desktop. You don’t really have to be that familiar with LESS to get started. But the rundown is that LESS allows you to use variables, mixins (embedding all the properties of a class into another class just by including the class name as one of its properties like a function taking an argument.), nested rules, functions and operations.


The Base grid works on a system of declare once, compile many times.

Base comes standard with a main site LESS file – base.less and 3 responsive files: desktop.less, tablet.less and mobile.less. Each of these files has LESS variables that change how _layout.less is imported for that screen size.

When Base compiles you end up with 4 CSS files compiling the same grid structure but at different sizes. It is creating responsive versions of your site intelligently, based on the layout you set out.

When a column is too big for the grid at that size, it is set to 100% of the grid. Voila! The mobile stacking we all love.

Where does the power come from?

The .column() mixin. When compiling .column() checks if the column being created is too wide for the page. If so, it will set that particular element at 100% of the grid width. If not it will continue to render it out as a fraction of the width, taking into consideration gutters, offsets and padding.

It’s custom

By generating the grid on the fly, Base supports a tonne of cool features you wouldn’t expect like:

Partial columns and offsets – just use decimals in the column mixin.
Theoretically unlimited compiled responsive sizes (although don’t go crazy with it)
Multiple columns on mobile (set the grid to 6 columns and watch 3 column items sit in 2 columns on mobile)