javiani / liquidgrid

Flexible & Easy Grid System

Liquid Grid

Flexible and Simple Grid System.

Liquid Grid adjust itself accordandly to the container dimensions.

• Easy.
• Semantic & Expressive.
• Inspired in Jeet.gs

Usage

A grid with 3 collumns and 20px gutters:

In sass:

ul {
	@include grid( 3, 20px );
	li {
		background-color: #ededed;
		margin-bottom: 15px;
		padding: 0 15px;
	}
}

In stylus:

ul
	grid( 3, 20px );
	li
		background-color: #ededed;
		margin-bottom: 15px;
		padding: 0 15px;
	

Output ( container with 800px )

A collumn with different size:

In Sass:

ul {
	@include grid( 3, 20px );
	li {
		background-color: #ededed;
		margin-bottom: 15px;
		padding: 0 15px;
		&.double {
			@include col( 2/3 );
		}
	}
}

In Stylus:

ul
	grid( 3, 20px );
	li
		background-color: #ededed;
		margin-bottom: 15px;
		padding: 0 15px;
		&.double
			col( 2/3 );

Output ( container with 600px )

API

Sass: @include grid( n collumns, gutter width(px) )

Stylus: grid( n collumns, gutter width(px) )

Sass: @include col( collumns / n collumns, [ gutter width(px) ] )

Stylus: col( collumns / n collumns, [ gutter width(px) ] )

If gutter is not passed in .col(), it will inherit from .grid() gutter's value ( default = 0 ).

Version 0.1.1

• Should work on IE9+