Mixins for an easy and lightweight grid system requiring no markup. Fixed gutter width and margins are responsive.

This is a LESS LESS mixin (Sass coming soon) which creates rows and columns for your build without adding extra markup to your HTML. You can set the number of columns, the width of the columns, and the width of the gutters between columns. Everything is responsive too.

The idea for this came from Semantic.gs but I needed a much simpler solution that would support fixed width gutters while still being responsive, plus I only build responsive solutions.This is the result.

Simply include this file in your project and import in your LESS. Then you can get started utilizing the mixins.

.row(); must be placed in the parent element's styles. You should also add a clearfix for your child floating columns.

Now just use .column(x) in element styles & media queries to make the element into a column that's floating and has a fluid width.

.column(2); takes up 2 columns on the grid
.column(3); takes up 3 columns on the grid
.push(4); adds 4 columns of space on the right
.push(2); adds 2 columns of space on the left