The Grid

What’s this all about?

The Grid is a semantic grid framework built on top of Sass. Simply include it in your project and that’s it!

Why another grid framework?

Because every other framework is bloated. The Grid is simple, intuitive, extendable and lightweight. It was built to promote clean and semantic markup, with the option to use your own custom classes - you can even use data attributes.

Is it responsive?

Yes. You can specify your breakpoints with the included elegant breakpoint mixin.

.element {
	@include breakpoint($small) {
		@include columns(2);
	}
}

How do I get started?

Install _grid.scss and _breakpoint.scss files and simply reference them in your project. Get them on Github, or clone it git@github.com:kiriaze/s-grid.git. If you’re using Juice, its already included in there.

Settings

Classes are by default, .container, .row, .columns.

$gutter: 			3% !default;
$docWidth: 			100% !default;

// this sets your class names
$container-class:	"container" !default; // optional
$row-class:			"row" !default;
$column-class:		"columns" !default;
$max-columns:		12 !default;

// Grid check
$gridDebug:			false !default; // If true, styles grid/columns for easy visibily while testing

Syntax

1. Class Syntax

.columns-{percentage, double digit} for mixed columns
	.columns-70, .columns-30 = totaling to 100

.columns-{single digit number} for equal coloumns
	.columns-1
	.columns-2, .columns-2
	.columns-4, .columns-4, .columns-4, .columns-4

1. Gutter Classes

.no-gutter {
	@include set-gutter(0);
}
.reset-gutter {
	@include set-gutter($gutter);
}