How It Works

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)