Gridle{.scss}

Tired of searching for a simple, really customizable and powerful grid system? Look no further.

Get started

In order to get started quicky, create and follow the files structure described bellow.

I have a question about this...

Get Started

In order to get started quicky, create and follow the files structure described bellow. This structure can obviously been changed to follow your particular needs.

_settings.scss

// import gridle
@import "gridle/gridle";

// setting up the grid
$gridle-columns-count : 12;
$gridle-gutter-width : 20px;
// and many more options like...
// $gridle-debug => display debug colors
// $gridle-direction => support for ltr, rtl
// etc...

// make the use of media queries really easy
@include gridle_register_state ( 'mobile' , null , 480px );
@include gridle_register_state ( 'tablet' , 481px , 1024px );

// even with full custom queries :
@include gridle_register_state ( 'land', '(orientation : landscape)' );

grid.scss

// import settings :
@import 'settings';

// generate classes :
@include gridle_generate_classes ( );

// manage container width :
.container {
    max-width : 960px;
    margin : 0 auto;
}

index.html

<!-- If want to use mixins, no need to add classes -->
<div class="container">
    <div class="grid-12" id="header">
        I'm the header, 12 columns width
    </div>
    <div class="grid-8 grid-mobile-12" id="content">
        I'm the content, 8 columns width, but 12 on mobile
    </div>
    <div class="grid-4 grid-mobile-12" id="sidebar">
        I'm the sidebar, 4 columns width, but 12 on mobile
    </div>
</div>

style.css

// import settings :
@import 'settings';

#header {
    @include gridle ( 12 );
}
#content {
    @include gridle ( 8 );
    @include gridle ( 12 , 'mobile' );
}
#sidebar {
    // sidebar will make 4 columns width
    @include gridle ( 4 );
    @include gridle ( 12 , 'mobile' );
    background : yellow ;

    // update sidebar look and feel for mobile and tablet
    @include gridle_state (  mobile tablet  ) {
        background : red;
    }
}

Basic settings

Gridle provides some basic settings to customize your grid system like columns count, gutter width, etc.

I have a question about this...

Basic Settings

Gridle provides some basic settings to customize your grid system like columns count, gutter width, etc.

Columns count int

Defines the number of columns for the grid. This number will be used for the container-{columns-count} class name.

$gridle-columns-count   : 12;

Gutter width px | % | em | ...

Defines the width of the grid's gutters. This value can be either pixels or percent.

$gridle-gutter-width    : 20px;

Name multiplicator int

If specified, this option modifies the grid's classes' names. If set to 5, the classes' names will be "grid-5", "grid-10", "grid-15", etc.

$gridle-name-multiplicator      : 1;

Direction ltr | rtl

Defines the grid's direction. If defined to "rtl", all the grid's elements will be inverted. The direction property is also set on each of the grid's item.

$gridle-direction   : ltr; /* ltr | rtl */

Become responsive

Gridle includes all you need to generate a fully customizable, responsive grid system.

I have a question about this...

Become Responsive

Gridle includes all you need to generate a fully customizable, responsive grid system. The principle is a piece of cake. Gridle provides you with a mixin which creates (or registers) "states". States are Gridle's naming convention that helps you abstract media queries that are sometimes hard work. Here's how to use states:

Register a State

To register a state, Gridle provides a simple and unique mixin:

@include gridle_register_state ( name , {min-width} , {max-width} , {generate-classes} : true);
@include gridle_register_state ( name , query (without @media) , {generate-classes} : true  );
/**
* States with sizes :
*/
@include gridle_register_state( "mobile" , null , 400px ); // null mean no min width
@include gridle_register_state( "tablet" , 401px , 767px );

/**
 * States without classes generation :
 * Useful when you need a state that cover either the mobile
 * and the tablet for example...
 */
@include gridle_register_state( "moblet" , null , 767px , false ); // for use in mixins only (no classes)

/**
* State with media query :
*/
@include gridle_register_state(  "iphone-landscape"  ,  "only screen and (max-device-width: ..."  );

Some special state called retina, print, etc.. are pre-built. See Useful States Classes chapter

Using States

When you have registered you states, the @include gridle_generate_classes() mixin will generate additional classes to be used in your HTML. Here's a usage example with classes and mixins:

Classes

<div class="container">
    <div class="grid-3 grid-tablet-6 grid-mobile-12">
        3 columns, 6 on tablet, 12 on mobile
    </div>
    <div class="grid-12 hide-mobile">
        12 columns but I'm hided on mobile 
    </div>
</div>

Mixins

/**
* Using mixins :
*/
#content {
    @include gridle( 8 );
    @include gridle( 12 , "mobile" );
}
#sidebar {
    @include gridle( 4 );
    @include gridle_hide( "mobile" );
}

Register state has to be done before generating classes (cf. Generate Classes Mixin)

You can define a maximum of 15 states. This limitation is due to SASS limited capabilities for handling variables names. But anyway... No kidding... 15 is PLENTY.

Useful States Classes

Some useful states are pre defined like "retina", "landscape", etc... You can use them directly in the gridle_state mixin but... in order to generate the corresponding classes (ex : grid-retina-12, hide-print, etc...) when you make the @include gridle_generate_classes();, you have to set witch one you want like so :

/**
* Default value :
* By default, the retina and print state are generated
*/
$gridle-generate-useful-states-classes  :  ( "retina" , "print" );

/**
* All the possible useful states :
*/
$gridle-generate-useful-states-classes  :  ( "retina" , "landscape" , "portrait" , "print" , "tv" );

Classes

When you're happy with your custom grid system, Gridle will provide you with multiple types of classes. Here's the list:

Grid Classes

These are the base classes of the grid system. The root class is the container, which contains all the classes: grid-1, grid-2, grid-3 and so on.

.container
.grid-{columns-count}
.grid-{state}-{columns-count}
<div class="container">
    <div class="grid-8">
        I make 8 columns width
    </div>
    <div class="grid-4">
        I make 4 columns width
    </div>
</div>

Grid Parent Class (nested grids)

This class has to be applied on a grid-x element that will contains a nested grid.

.parent
.parent-{state}
<div class="container">
    <div class="grid-8 parent">
        <div class="grid-4 grid-mobile-12">
            I'm a nested column 
        </div>
        <div class="grid-4 grid-mobile-12">
            I'm a nested column 
        </div>
        <div class="grid-4 grid-mobile-12">
            I'm a nested column 
        </div>
    </div>
    <div class="grid-4">
        I make 4 columns width
    </div>
</div>

Centered Grid Class

This class has to be applied on a grid-x element and will center the column.

.centered
.centered-{state}
<div class="container">
    <div class="grid-8 centered">
        This column will be centered
    </div>
    <div class="grid-8 centered-tablet">
        This column will be centered only on tablet
    </div>
</div>

Push & Pull Classes

The push and pull classes are used to offset the grid's elements or even swap two of them for SEO purposes. The HTML structure will not be altered.

.push-{columns-count}
.push-{state}-{columns-count}
.pull-{columns-count}
.pull-{state}-{columns-count}
<div class="grid-8 push-4">
    I make 8 columns width and offset 4 columns to the right
</div>
<div class="grid-4 pull-9">
    I make 4 columns width and offset 8 columns to the left
</div>

Prefix & Suffix Classes

The prefix and suffix classes are used to create blanks before or after a grid element.

.prefix-{columns-count}
.prefix-{state}-{columns-count}
.suffix-{columns-count}
.suffix-{state}-{columns-count}
<div class="grid-8 suffix-2">
    I make 8 columns width and I have 2 columns of dead space to my right
</div>
<div class="grid-4 prefix-2">
    I make 4 columns width and I have 2 columns of dead space to my left
</div>

Hide, show, ... Classes

These classes are used to hide, show or set to “visibility" to some elements for certain states (cf. States)

.hide
.show
.not-visible
.visible
.hide-{state}
.show-{state}
.not-visible-{state}
.visible-{state}
<div class="grid-8 hide-tablet">
    I'm not display (display:none) on "tablet" state
</div>
<div class="grid-4 not-visible-mobile">
    I'm not visible (visibility:hidden) on "mobile" state
</div>
<div class="grid-12 hide visible-mobile">
    I'm hided by default but displayed on mobile
</div>

Float Classes

These classes are used to make float some elements for certain states (cf. States)

.float-left
.float-right
.float-{state}-left
.float-{state}-right
<div class="grid-8 float-right float-mobile-left">
    I'm a div that float right normally, but left on mobile
</div>

Clear Classes

These classes are used to clear float on some elements for certain states (cf. States)

.clear
.clear-left
.clear-right
.clear-{state}
.clear-{state}-left
.clear-{state}-right
<div class="grid-8 clear-right clear-mobile-left">
    I'm a div that clear right normally, but left on mobile
</div>

Gutters Classes

These classes are used to delete the gutters on certain columns for certain states (cf. States)

.no-gutter
.no-gutter-left
.no-gutter-right
.no-gutter-top
.no-gutter-bottom
.no-gutter-{state}
.no-gutter-{state}-left
.no-gutter-{state}-right
.no-gutter-{state}-top
.no-gutter-{state}-bottom

.gutter
.gutter-left
.gutter-right
.gutter-top
.gutter-bottom
.gutter-{state}
.gutter-{state}-left
.gutter-{state}-right
.gutter-{state}-top
.gutter-{state}-bottom
<div class="grid-8 no-gutter-mobile">
    No gutters on mobile
</div>

Secret : The word "margin" instead of "gutter" work too...

Mixins

Gridle offer a bunch of usefull SASS mixins to apply grid specific CSS to your custom html tags. All the classes described in the Classes section can be replaced by mixins of this section.

Grid

These are the base mixins of the grid system. The root mixin is the @include gridle_container(); one and has to be applied on the element that contains all the @include gridle(1);, @include gridle(2);, @include gridle(3);, etc... mixins.

@include gridle_container (); 
@include gridle ( {column-number} , {state} );

with context :

@include gridle ( {column-number} , {context} ); 
@include gridle ( {column-number} , {context} , {state} );
.wrapper {
    @include gridle_container ( ); // I'm the container
    max-width : 960px;
    margin : 0 auto;
}
#header {
    @include gridle ( 12 );
}
#content {
    @include gridle ( 8 ); // I made 12 columns width...
    @include gridle ( 12 , mobile tablet ); // ... but 12 columns width on mobile and tablet
}
#sidebar {
    @include gridle ( 4 ); // I made 4 columns width...
    @include gridle ( 12 , "mobile" ); // ... but 12 columns width on "mobile"
}
#footer {
    @include gridle ( 12 );
}

Grid Parent (nested grids)

This mixin has to be applied on a grid-x element that will contains a nested grid.

@include gridle_parent ( ); 
@include gridle_parent ( {state} );
#content {
    @include gridle ( 8 );
    @include gridle ( 12 , "mobile" );
    @include gridle_parent ( ); // I'm the parent of a nested grid system

    .column {
        @include gridle ( 4 );
        @include gridle ( 12 , 'mobile' );
    }
}

Centered Grid

This mixin has to be applied on a grid-x element and will center the column.

@include gridle_centered ( ); 
@include gridle_centered ( {state} );
#content {
    @include gridle ( 8 );
    @include gridle ( 12 , "mobile" );
    @include gridle_centered ( ); // this will make the column centered for all sizes
}

Push & Pull

The push and pull mixins are used to offset the grid elements or event swap 2 of them for SEO purpose. The html structure will not be touched as well

@include gridle_push ( {column-number} , {state} ); 
@include gridle_pull ( {column-number} , {state} );

with context :

@include gridle_push ( {column-number} , {context} , {state} ); 
@include gridle_pull ( {column-number} , {context} , {state} );
/**
 * This code will visualy swap the 2 columns "content" and "sidebar"
 * The HTML structure is not changed as well
 */
#header {
    @include gridle ( 12 );
}
#content {
    @include gridle ( 8 );
    @include gridle_push ( 4 ); // I will be offset by 4 columns on the right
}
#sidebar {
    @include gridle ( 4 );
    @include gridle_pull ( 8 ); // I will be effset 8 columns on the left

}
#footer {
    @include gridle ( 12 );
}

Prefix & Suffix

The prefix and suffix classes are used to create dead spaces before or after a grid element.

@include gridle_prefix ( {column-number} , {state} ); 
@include gridle_suffix ( {column-number} , {state} );

with context :

@include gridle_prefix ( {column-number} , {context} , {state} ); 
@include gridle_suffix ( {column-number} , {context} , {state} ); 
/**
 * This code will generate an "checkerboard" style grid
 */
#box1 {
    @include gridle ( 3 );
    @include gridle_prefix ( 3 ); // 3 columns of dead space to the right
}
#box2 {
    @include gridle ( 3 );
    @include gridle_prefix ( 3 ); // 3 columns of dead space to the right
}
#box3 {
    @include gridle ( 3 );
    @include gridle_suffix ( 3 ); // 3 columns of dead space to the left
}
#box4 {
    @include gridle ( 3 );
    @include gridle_suffix ( 3 ); // 3 columns of dead space to the left
}

Hide, show, etc...

These mixins are used to hide, show or set visibility to some elements for certain states (cf. States)

@include gridle_hide ( {state} ); 
@include gridle_show ( {state} ); 
@include gridle_not_visible ( {state} ); 
@include gridle_visible ( {state} );
#header {
    @include gridle ( 12 );
}
#content {
    @include gridle ( 8 );
}
#sidebar {
    @include gridle ( 4 );
    @include gridle_hide ( "mobile" ); // Not enough space on mobile so we hide it
}
#footer {
    @include gridle ( 12 );
}

State (VERY USEFULL)

This mixin is really, really, really... I mean REALLY useful. It allows you to write some specific CSS on an element for certain states (cf. States). You can also specify min-width and/or max-width as parameters.

@include gridle_state ( {state} ) { 
         {custom-css} 
} 
@include gridle_state ( {min-width} , {max-width} ) { 
         {custom-css} 
}
#header {
    @include gridle ( 12 );
}
#content {
    @include gridle ( 8 );
}
#sidebar {
    @include gridle ( 4 );

    /* We change the background to yellow and we    
     * add a pink border to the sidebar only on tablet...
     * ... JUST BECAUSE I CAN!
     */
    @include gridle_state( "tablet" ) {
        background : yellow;
        border : 1px solid pink;
    }

    /**
     * You can specify multiple states directly :
     * !!! multiple states names are the 1st parameter, so NO comma between them...
     * The states can be within quotes or not...
     */
    @include gridle_state( mobile "tablet" ) {
        // ... your custom css here
    }

}
#footer {
    @include gridle ( 12 );
}

Do not include all the others grid mixins into the gridle_state one. This is because SASS does not handle nested media queries correctly – instead, always use the {state} parameter of the gridle(), gridle_push(), etc... mixins and everything will work just as expected.

Generate Classes

This mixin is used to generate all the needed classes for your grid system. It has to be called only once. The {scope-name} optional parameter can be used if you have multiple grids in the same page.

@include gridle_generate_classes ( ); 
@include gridle_generate_classes ( {scope-name} );
/**
* Setting up your grid :
*/
$gridle-columns-count    : 12;
$gridle-gutter-width     : 20px;

/**
* Register your states if needed :
*/
@include gridle_register_state ( "mobile" , 0 , 500px );

/**
* Generate all the classes :
*/
@include gridle_generate_classes ( );

If you generate classes for a large grid with multiple states and a lot of columns, I encourage you to make a separated SASS file that contains the grid system only. This will prevent all the classes to be calculated each time you save your working file.

Float

This mixin is used to make element float left, right or both, like a normal float does, but with state capabilities.

@include gridle_float( {left | right | both}, {state} );
#sidebar {
    @include gridle_float ( right ); // float right normally...
    @include gridle_float ( left, 'mobile' ); // ... but left on mobile
}

Clear

This mixin work exactly like the float one, but to clear floats... Pretty simple no?

@include gridle_clear( {left | right | both}, {state} );
#sidebar {
    @include gridle_clear( right ); // clear right normally...
    @include gridle_clear( left, 'mobile' ); // ... but left on mobile
}

Gutters

These mixins are available to manage gutter on grid elements. In gridle, the gutters are actually paddings.

@include gridle_gutter( {sides}, {state} ); 
@include gridle_no_gutter( {sides}, {state} );
#sidebar {
    @include gridle_gutter(); // add padding to left and right of $gridle-gutter-width value

    /**
     * You can specify a list of side as first param :
     * top left right bottom    are supported
     */
    @include gridle_gutter ( top left ); // add gutter to top and left only
}
#content {
    @include gridle_no_gutter(); // remove padding to left and right

    @include gridle_no_gutter ( top left ); // remove gutter to top and left only
}

Secret : The mixins "gridle_margin" and "gridle_no_margin" work too...

What is the context ?

The context is the number of columns in your grid used to calculate the widths. By default, if not specified in the mixins that support the context, it will be equal as the $gridle-columns-count configuration.

For example, if your configuration is set to $gridle-columns-count : 12; and that you do @include gridle( 6 );, this will set your width to *100% / 12 6 = 50%**

If you set the context like so @include gridle( 6 , 10 );, even if your configuration is $gridle-columns-count : 12; , the width will be set to *100% / 10 6 = 60%**

Internet explorer

Internet Explorer.

I have a question about this...

Internet Explorer

Internet Explorer... Holy crap! Troubles ahead you say? Don't worry – Gridle is fully compatible with it... as long as you go the extra length with this the old chap.

IE7 support

This option control the generation of expression in css to allow IE7 to render width correctly. If you don't need IE7 support, you can desactivate this option. This will generate a little bit less css for your grid.

$gridle-ie7-support     : true; // by default is false

RespondJS

In order to make the media queries works on IE7-8, you have to integrate RespondJS, witch is a nice little plug&play library written by Scott Jehl

<link href="css/style.css" type="text/css" rel="stylesheet" />
...
<!--[if (gte IE 6)&(lte IE 9)]>
<script src="js/vendor/respond.js"></script>
<![endif]-->

Debug

Gridle includes a useful system for debugging your grid.

I have a question about this...

Debug

Gridle includes a useful system for debugging your grid. This adds in some visual information (like classes names, colors, etc.) when activated.

Debug mode

This option activates the debug mode. You need then to add the class gridle-debug in your html to activate the debug on the element and all his children. This mecanisme allows you to display debug more precisely...

$gridle-debug   : true;
<div class="container gridle-debug">
    ... all grid elements that you put here will have debug
</div>
<div class="container">
    ... no debug here
</div>

Show Class Names

This option displays or hides the class names of the activated state.

$gridle-debug-show-class-names  : true;

Debug selector

This options allows you to change the gridle-debug selector. Update that only is you know what you do...

$gridle-debug-selector  : ".gridle-debug &, &.gridle-debug";

Advanced settings

Here's some advanced options to customize a little more your grid.

I have a question about this...

Advanced Settings

Here's some advanced options to customize a little more your grid

HTML States Classes

This option can be very useful in certain cases. It allows the various configured states to be activated by classes within the document’s html tag. For example, if a state called "mobile" is configured, you can activate this state by adding the "mobile" class within the html.

$gridle-html-states-classes     : true;

Class Generation

These options allow you to generate specific classes in order to make your grid more flexible.

$gridle-generate-push-classes   : true;
$gridle-generate-pull-classes       : true;
$gridle-generate-prefix-classes     : true;
$gridle-generate-suffix-classes     : true;
$gridle-generate-helpers-classes    : true;
/* helpers classes are the hide-on-{state}, not-visible-on-{state},
clear, float classes etc... */

Class Prefix

This option allow you to specify a prefix that will be added at all the gridle generate classes. The only class not affected by that is the gridle-debug one...

$gridle-class-prefix : "hello-"; // by default, this setting is set to ""
<div class="hello-container">
    <div class="hello-grid-2 hello-push-5 hello-hide-mobile">
        ... All the classes will be affected ...
    </div>
</div>

Stay in touch

Don't miss anything new about gridle, updates, etc... You will not be spammed don't worry

Fork me on GitHub