gridtacular

Gridtacular

A Sass based responsive CSS grid system. Built with flexibility and scalability in mind.

Table of Contents

Installation
Usage
Examples
Why Multiple Grids
Debugging
Reference

Installation

If you have ruby istalled its simple:

$ gem install gridtacular

And make sure to include Gridtacular in your Sass stylesheet:

@import "gridtacular";

Or you can save gridtacular.scss into your Sass workflow. Whatever floats your boat.

Usage

$grid-args takes two sub maps as arguments to configure the grid;'config' and 'grids'. Config settings are global and used across all grids. Grids is where each grid is defined.

$grid_args:(
    config: (
        setting-name: setting-value
    ),
    grids: (
        breakpoint-name: (
            setting-name: setting-value
        )
    )
);

@include grid_generate($grid_args);

Examples

Example 1 - a simple 6 column grid

the following example will output a simple 6 column grid:

$grid_args:(
    config: (
        columnclass: 'span--',
        pushclass: 'push--'
    ),
    grids: (
        mysimplegrid: (
            columns: 6,
            gutter: 10px
        )
    )
);

@include grid_generate($grid_args);

Example 2 - Different grids at different breakpoints

Generate a grid and classes for multiple grids at different breakpoints. As you can see there is a lot of flexibility in terms of naming things. We recommend using BEM syntax (which we use throughout the examples e.g. .span--1-12--small ).

$grid_args:(
    config: (
        columnclass: 'span--',
        pushclass: 'push--'
    ),
    grids: (
        small: (
            columns: 6,
            suffix: null,
            breakpoint: null,
            gutter: 10px
        ),
        medium: (
            columns: 12,
            suffix: '--m',
            breakpoint: 800px null,
            gutter: 20px
        ),
        large: (
            columns: 12,
            suffix: '--l',
            breakpoint: 1200px null,
            gutter: 30px
        )
    )
);

@include grid_generate($grid_args);

Why multiple grids?

You may be thinking, why multiple grids? why isnt one enough? Well consider the following scenario:

You are building a responsive image grid. You want the grid to be 6 thumbnails across at the largest breakpoint, 4 thumbnails across at the medium breakpoint and you want each image to fill a full row at the smallest breakpoint.

Here is how to simply achieve that: (assuming that you are using example 2 above).

<div class="grid">
    <div class="span--1-1  span--1-4--m  span--1-6--l">
        <img src="funnycat.jpg">
    </div>
    <div class="span--1-1  span--1-4--m  span--1-6--l">
        <img src="funnycat.jpg">
    </div>
    <div class="span--1-1  span--1-4--m  span--1-6--l">
        <img src="funnycat.jpg">
    </div>
    <div class="span--1-1  span--1-4--m  span--1-6--l">
        <img src="funnycat.jpg">
    </div>
    <div class="span--1-1  span--1-4--m  span--1-6--l">
        <img src="funnycat.jpg">
    </div>
    <div class="span--1-1  span--1-4--m  span--1-6--l">
        <img src="funnycat.jpg">
    </div> 
</div>

Debugging

Sometimes it's useful when developing a responsive site to be able to see at a glance which breakpoint you are viewing.

We added some functionality to Gridtacular to do just that. Include debug: true in your config arguments to activate the debug console:

$grid_args:(
    config: (
        debug: true
    )
);

You can customise the background colours so that its different at each breakpoint, making it really simple to see each transition from one breakpoint to another.

small: (
    columns:         12,
    suffix:          null,
    breakpoint:      null,
    gutter:          10px,
    debug: (
        background:  #13a2f7,
        name:        'Small'
    )
)

Reference

Config Settings

Setting	Type	Default	Description
columnclass	string	span--	grid item class prefix e.g. span-- (dont include '.' beforehand)
pushclass	String	push--	push item class prefix e.g. push--
debug	boolean	false	Enable visual debugging

Grid Settings

Setting	Type	Default	Description
columns	integer	12	Number of columns in the grid
suffix	string	n/a	Suffix that references the current breakpoint e.g. '--small'
breakpoint	list	null	The css min and max widths of the breakpoint (accepts any css unit) e.g. '0, 800px'
gutter	string	20px	Gutter width. Accepts any css unit
debug	map	n/a	Map of configurable debug values

Debug settings

If you have enabled debugging you can supply additional map parameters within debug per grid to setup background colours and add the breakpoint name.

Setting	Type	Default	Description
background	string	span--	grid item class prefix e.g. span-- (dont include '.' beforehand)
name	string	n/a	push item class prefix e.g. push--