Gridle{.scss}

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

Get started

Below is the basic usage of gridle and how to use it in your own project.

I have a question about this...

Get Started

Below is the basic usage of gridle and how to use it in your own project. From here you can make adjustments to the setup and states to suit your specific needs.

_settings.scss

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

// setting up the grid
@include gridle_setup( (
    context : 12,
    gutter-width : 20px,
    direction : rtl,
    // etc...
) );

// make the use of media queries really easy
@include gridle_register_state ( mobile , (
    max-width : 480px 
) );
@include gridle_register_state ( tablet , (
    min-width : 481px,
    max-width : 1024px
) ) ;

// even with full custom queries :
@include gridle_register_state ( landscape, (
    query : "(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;
    }
}

Setup

In order for Gridle to work, the gridle_setup() mixin needs to be run. This is where you can pass core configuration variables like the amount of columns (context) and the width of the gutter.

@include gridle_setup( {settings} );
$settings : (
    context : 12,           // number of columns in your grid
    gutter-width : 20px,        // size of the gutters
    direction : ltr,            // direction
    name-multiplicator : 1  // to generate like grid-5, grid-10, etc...
    // and more... (see in advanced settings section)
);
@include gridle_setup($settings);

Make sure that your states do not have the same name as a gridle option like gutter-width...

Add states

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

I have a question about this...

Add States

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 convention that helps you specifically name your responsive breakpoints. Refer to the Gridle state directly within the element's scss rule or by adding auto generated class to the element. 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 , {settings} );
/**
* States are usually initialized with screen sizes :
*/
@include gridle_register_state( mobile , (
    max-width : 400px
) );
@include gridle_register_state( tablet, (
    min-width : 401px,
    max-width : 767px,
    gutter-width : 30px     // change the gutters for this state
) );

/**
 * States can also be generated without creating classes:
 * Useful when you need a state that cover both the mobile
 * and the tablet for example...
 */
@include gridle_register_state( moblet , (
    min-width : 767px,
    classes : false     // the gridle_generate_class will not generate classes for this state
) ); 

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

The state can have all the settings available in gridle. If your state doesn't specify gutter width for example, it will default to what has been set in gridle_setup().

Using States

After you have registered you states, the @include gridle_generate_classes() mixin will generate additional classes to be used in your HTML. Here's an 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 hidden 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)

Register custom classes

You can also add your own custom class to be created for every state:

@include gridle_generate_custom_class( {pattern} )
// the pattern is a list element or sass
@include gridle_generate_custom_class( ( 'center', '-', '%state' ) ) {
    text-align : center;
}

This will generate the following classes if you have registered the states (mobile, tablet, coco)

.center
.center-mobile
.center-tablet
.center-coco

Make sure to use only the -, --, _, __ or the %- (witch is configured using the $gridle-class-separator setting) as class separators.

Mobile first

Gridle is the perfect fit for your mobile first projects.

I have a question about this...

Mobile First

Gridle is the perfect fit for your mobile first projects. Here how you can start :

Setting up the grid

For mobile first, you have to set the different states for your grid like so

@include gridle_register_state( xs, (
    max-width : 768px
) );
@include gridle_register_state( sm , (
    min-width : 768px
) );
@include gridle_register_state( md, (
    min-width : 992px
) );
@include gridle_register_state( lg, (
    min-width : 1200px
) );

You can use the mixin gridle_register_default_mobile_first_states() that will make this part for you. The values are bases on bootstrap settings

Grid items

Then, you have to tell your grid items to take the full with on small state (if you need so). This is only if you don't want to write each time grid-xs-12 in your html (if your number of columns are 12).

[class*="grid-"] {
    @include gridle_state( xs ) {
        width:100%;
    }
}

And your good to go!

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>

Clear Each Class NEW

This mixin will make all the {x}n+1 direct child clear itself automatically.

.clear-each-{x}
.clear-each-{state}-{x}
<div class="container">
    <div class="grid-6 parent clear-each-2">
        <div class="grid-6">
            I have a different height of my neighbour
            <br />
            cause of this line
            <br />
            and this one....
        </div>
        <div class="grid-6">
            I have a different height of my neighbour
        </div>
        <div class="grid-6">
            I have a different height of my neighbour
        </div>
        <div class="grid-6">
            I have a different height of my neighbour
            <br />
            cause of this line
            <br />
            and this one....
        </div>
    </div>
    <div class="grid-6">

    </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>

Vertical Aligned Grid Items BETA

Gridle allows you to align vertically your grid elements based on his neighbours in the same line. This has to be used with caution and you must test if it fit your particular need.

.vertical-align-top
.vertical-align-top-{state}
.vertical-align-middle
.vertical-align-middle-{state}
.vertical-align-bottom
.vertical-align-bottom-{state}
<div class="parent vertical-align-middle">
    <div class="grid-4">
        I'm the tallest element in the line
        <br />
        cause of this line
        <br />
        and this one...
        <br />
        and this one...
    </div>
    <div class="grid-4">
        I will be vertically centered cause I'm the smallest
    </div>
    <div class="grid-6">
        I will be also vertically centered cause I'm not so tall...
        <br />
        Even with this line...
    </div>
</div>

These classes apply a font-size of 0 on the parent itself and a font-size of 1rem on the direct childs. This is to avoid the display:inline-block space thing... You have to set your font on the html tag for this to work fine...

When using this, the direction parameter will not have any effect anymore... These classes have to be applied on a parent/container element that has direct grid- childs

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
.show-inline
.not-visible
.visible
.hide-{state}
.show-{state}
.show-inline-{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} );

gridle_set :

@include gridle_set((
    grid : {columns-number}
), {state} );

@include gridle_set((
    container : true
), {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} );

gridle_set :

@include gridle_set((
    parent : true
), {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' );
    }
}

Clear each NEW

This mixin will make all the {x}n+1 direct child clear itself automatically.

@include gridle_clear_each ( {each} , {what} );
@include gridle_clear_each ( {each} , {what} , {state} );

gridle_set :

@include gridle_set((
    clear_each : ( {each} , {what} )
), {state} );
#myContentThatHasWeirdHeightChilds {
    @include gridle_parent( );
    @include gridle_clear_each( 2, left );
}

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} );

gridle_set :

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

Vertical Aligned Grid Items BETA

Gridle allows you to align vertically your grid elements based on his neighbours in the same line. This has to be used with caution and you must test if it fit your particular need.

@include gridle_vertical_align( );
@include gridle_vertical_align( {align} );
@include gridle_vertical_align( {align} , {state} );

gridle_set :

@include gridle_set((
    vertical_align : {align}
), {state} );
#myContainerThatHaveGridItemsAsDirectChild {
    @include gridle_vertical_align( );
}

This mixin apply a font-size of 0 on the parent itself and a font-size of 1rem on the direct childs. This is to avoid the display:inline-block space thing... You have to set your font on the html tag for this to work fine...

When using this, the direction parameter will not have any effect anymore... This mixin have to be applied on a parent/container element that has direct grid- childs

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} );

gridle_set :

@include gridle_set((
    push : {column-number},
    pull : {column-number}
), {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} );

gridle_set :

@include gridle_set((
    prefix : {column-number},
    suffix : {column-number}
), {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_show_inline ( {state} ); 
@include gridle_not_visible ( {state} ); 
@include gridle_visible ( {state} );

gridle_set :

@include gridle_set((
    hide : true | false,
    show : true | false,
    show_inline : true | false,
    not_visible : true | false,
    visible : true | false
), {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 width gridle_state :
     * !!! 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
    }

    /**
     * Even make a custom query
     * When passing a custom map state object, it will be extended with the default
     * settings that you have in your gridle_setup
     * !!! query and (max-width, min-width) cannot be used together...
     */
    @include gridle_state ( (
        query : 'only print'
        // or maybe a max-width : 900px
    ) ) {
        background : red;
    }

}
#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.

Set multiple mixins at once NEW

Sometime you want to apply more than one mixin on your item. This can be a pain to write multiple times @include gridle_... You have now this mixin to help you with this.

@include gridle_set( {settings} , {state} );
#myCoolSidebar {

    /**
     * Default usage :
     */
    // set the default values
    @include gridle_set( (
        grid : 4,
        push : 8
    ) );

    // erase values for tablet
    @include gridle_set( (
        grid : 12,
        push : 0
    ), tablet );
    // you can also pass ( tablet, mobile ) as {state} param to apply to multiple states at once

    // hide on mobile :
    @include gridle_hide( mobile );

    /**
     * ------------------ OR --------------------
     */

    /**
     * Or pass your states directly in one gridle_set call :
     * !!! do not set any state as second parameter with this solution
     * Be careful to not have any states that match a reserved gridle setting name like push, pull, etc...
     */
    @include gridle_set( (
        grid : 4,
        push : 8,
        tablet : (
            grid : 12,
            push : 0
        )
    ) );
}

Generate Classes

This mixin is used to generate all the needed classes for your grid system. This mixin is quite modular and allows you to generate all the classes, or if you need, only the classes of a particular state, or only the push and pull classes, etc...

@include gridle_generate_classes ( ); 
@include gridle_generate_classes ( {stateName} );
@include gridle_generate_classes ( {stateName} , {what} );
@include gridle_generate_classes ( {stateName} , {what} , {scope} );
/**
* Setting up your grid :
*/
@include gridle_setup( (
    context : 12,
    gutter-width : 20px
) );

/**
* Register your states if needed :
*/
@include gridle_register_state ( mobile , (
    max-width : 500px
) );

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

/**
 * Generate only the classes of the state mobile
 */
@include gridle_generate_classes( mobile );

/**
 * Generate only the push and pull classes of the default state
 * Note that the what parameter is a list
 */
@include gridle_generate_classes( default, ( push, pull ) );

/**
 * Generate the push, pull, grid and visible classes for all states in a specific order
 */
@include gridle_generate_classes( null, ( visible, pull, grid, push ) );

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.

The "what" parameter define also the order in witdh the classes will be generated

The what parameter

The parameter {what} can be very useful. It allows you to specify witch classes you want to generate. Here's a list of available values that you can use :

// packages :
default         : all the default classes listed bellow
helpers     : all the helpers classes listed bellow

// default :
grid        : all the grid- classes
push        : all the push- classes
pull        : all the pull-classes
prefix      : all the prefix- classes
suffix      : all the suffix- classes

// helpers :
float       : all the float- classes
clear       : all the clear- classes
gutter      : all the gutter- classes
no_gutter   : all the no-gutter- classes
margin  : alias for gutter
no_margin   : alias for no_gutter
centered    : all the centered- classes
parent      : all the parent- classes
vertical_align  : all the vertical-align- classes
hide        : all the hide- classes
show        : all the show- classes (+ show-inline-)
not_visible     : all the not-visible- classes
visible         : all the visible- classes
clear_each  : all the clear-each- classes

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} );

@include gridle_set((
    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} );

@include gridle_set((
    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} );

@include gridle_set((
    gutter : {sides},
    margin : {sides},
    no_gutter : {sides},
    no_margin : {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%**

Functions

Gridle offer a bunch of usefull SASS functions that you can use.

gridle_get_states_count

Return the number of states registered

gridle_get_states_count();
$count : gridle_get_states_count();

gridle_get_column_width

Return the width in percentage of one/more column(s)

gridle_get_column_width();
gridle_get_column_width( {columns} );
gridle_get_column_width( {columns} , {state} );
$width-of-1-column : gridle_get_column_width();
$width-of-3-columns : gridle_get_column_width( 3 );
$width-of-1-column-in-mobile : gridle_get_column_width( 1, mobile );

gridle_get_state

Return the state map

gridle_get_state();
gridle_get_state( {state} );
$defaultState : gridle_get_state();
$mobileState : gridle_get_state( mobile );

#mobileState {
    content: inspect(gridle_get_state( mobile ));
}

gridle_has_state

Return if a state with the passed name exist

gridle_has_state( {state} );
@if gridle_has_state( mobile ) {
    // do something...
}

gridle_get_state_var

Return a state var value

gridle_get_state_var( {varName} );
gridle_get_state_var( {varName} , {state} );
$default-state-context : gridle_get_state_var( context );
$mobile-state-gutter-width : gridle_get_state_var( gutter-width , mobile );

gridle_set_state_var

Set a state var

gridle_set_state_var( {varName} , {newValue} );
gridle_get_state_var( {varName} , {newValue}, {state} );
$new-default-state : gridle_set_state_var( context , 14 );
$new-mobile-state : gridle_set_state_var( gutter-width , 5px, mobile );

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.

@include gridle_setup( (
    context : 12,
    // etc...
    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...

@include gridle_setup( (
    context : 12,
    // etc...
    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.

@include gridle_setup( (
    context : 12,
    // etc...
    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

Register a custom column NEW

Gridle will generate for you all the columns you need, depending on the $gridle-columns-count setting. That's fine. But sometime, you need some special columns... For example, a column of 33.333%, or 66.6667%, etc... This setting is made for you.

@include gridle_register_column( name , column-count , context );
/**
 * Here we register a column with the ratio 1/3
 * where the "1" is the column-count, and the "3" is the context
 * in witch the column width will be calculated
 */
@include gridle_register_column( '1on3' , 1, 3 );

// another fancy example :
@include gridle_register_column( 'myFancyColumn' , 12, 33 ); // 36.36%

Register an automatic clear-each class NEW

Is some situation, you will need to clear some grid items each x item. This can be painful to make. This mixin solve this problem for you. It allows you to register classes that will be generated with all the others classes like so :

@include gridle_register_clear_each( {clearEach} , {clearWhat} : both );
// make this before the class generation :
@include gridle_register_clear_each( 2 , left );
@include gridle_register_clear_each( 4 ); // clear both each 4 item
<div class="parent clear-each-2">
    <div class="grid-6">
        I'm a content that does not have the same height as my neighbours
        <br />
        And I'm the line responsible for this...
    </div>
    <div class="grid-6">
        I'm a content that does not have the same height as my neighbours
    </div>
    <div class="grid-6"> <!-- I will be cleared automaticaly -->
        I'm a content that does not have the same height as my neighbours
    </div>
    <div class="grid-6">
        I'm a content that does not have the same height as my neighbours
        <br />
        And I'm the line responsible for this...
    </div>
</div>

Class Generation

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

@include gridle_setup( (
    context : 12,
    // etc...
    generate-push-classes   : true,
    generate-pull-classes       : true,
    generate-prefix-classes     : true,
    generate-suffix-classes     : true,
    generate-helpers-classes    : true
) );

/* helpers classes are the hide-on-{state}, not-visible-on-{state},
clear, float classes etc... */

HTML States Classes

This option allow you to generate all the classes scoped in a html.{state} class. This allows you to view your grid by applying the name of your state as class on the html tag without needing the media queries. This is more a debug option that a real production one...

@include gridle_setup( (
    context : 12,
    // etx...
    html-states-classes : true // activate the behavior
) );

Then :

<html class="mobile">
    <!-- this will activate the mobile state -->

Generate JSON settings (for gridle.js)

This options allow you to enable / disable the generation of JSON settings in the css. This JSON is needed if you want to use gridle.js

$gridle-generate-json-settings : false; // default is true

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>

Class Patterns NEW

These options are quite advanced stuffs but can be usefull if you want to customize the generated class names exactly as you want. Each pattern define how the classname will be generated. These are the tokens that you can use in the patterns :

%-      : Represent a separator (that can be customized with the $gridle-class-separator setting) :
%state      : Represent the state name (mobile, coco, etc...)
%count      : Represent the column index (1, 2, 10, etc...)      

Here's a list of all the available patterns :

$gridle-container-name-pattern          : ('container');

$gridle-grid-name-pattern               : ('grid','%-','%state','%-','%count');
$gridle-push-name-pattern               : ('push','%-','%state','%-','%count');
$gridle-pull-name-pattern               : ('pull','%-','%state','%-','%count');
$gridle-prefix-name-pattern                 : ('prefix','%-','%state','%-','%count');
$gridle-suffix-name-pattern                 : ('suffix','%-','%state','%-','%count');

$gridle-parent-name-pattern                 : ('parent','%-','%state');
$gridle-centered-name-pattern           : ('centered','%-','%state');

$gridle-parent-vertical-align-middle-name-pattern       : ('parent','%-','vertical','%-','align','%-','%state','%-','middle');
$gridle-parent-vertical-align-top-name-pattern      : ('parent','%-','vertical','%-','align','%-','%state','%-','top');
$gridle-parent-vertical-align-bottom-name-pattern       : ('parent','%-','vertical','%-','align','%-','%state','%-','bottom');

$gridle-hide-name-pattern               : ('hide','%-','%state');
$gridle-show-name-pattern               : ('show','%-','%state');
$gridle-show-inline-name-pattern            : ('show','%-','inline','%-','%state') !default;
$gridle-not-visible-name-pattern            : ('not','%-','visible','%-','%state');
$gridle-visible-name-pattern                : ('visible','%-','%state');

$gridle-float-left-name-pattern             : ('float','%-','%state','%-','left');
$gridle-float-right-name-pattern            : ('float','%-','%state','%-','right');

$gridle-clear-name-pattern              : ('clear','%-','%state');
$gridle-clear-left-name-pattern             : ('clear','%-','%state','%-','left');
$gridle-clear-right-name-pattern            : ('clear','%-','%state','%-','right');
$gridle-clear-each-pattern              : ('clear','%-','each','%-','%state','%-','%count');

$gridle-no-gutters-name-pattern             : ('no','%-','gutters','%-','%state');
$gridle-no-gutter-left-name-pattern             : ('no','%-','gutter','%-','%state','%-','left');
$gridle-no-gutter-right-name-pattern        : ('no','%-','gutter','%-','%state','%-','right');
$gridle-no-gutter-top-name-pattern          : ('no','%-','gutter','%-','%state','%-','top');
$gridle-no-gutter-bottom-name-pattern       : ('no','%-','gutter','%-','%state','%-','bottom');

$gridle-no-margins-name-pattern             : ('no','%-','margins','%-','%state');
$gridle-no-margin-left-name-pattern         : ('no','%-','margin','%-','%state','%-','left');
$gridle-no-margin-right-name-pattern        : ('no','%-','margin','%-','%state','%-','right');
$gridle-no-margin-top-name-pattern      : ('no','%-','margin','%-','%state','%-','top');
$gridle-no-margin-bottom-name-pattern       : ('no','%-','margin','%-','%state','%-','bottom');

$gridle-gutters-name-pattern            : ('gutters','%-','%state');
$gridle-gutter-left-name-pattern            : ('gutters','%-','%state','%-','left');
$gridle-gutter-right-name-pattern           : ('gutter','%-','%state','%-','right');
$gridle-gutter-top-name-pattern             : ('gutter','%-','%state','%-','top');
$gridle-gutter-bottom-name-pattern      : ('gutter','%-','%state','%-','bottom');

$gridle-margins-name-pattern            : ('margins','%-','%state');
$gridle-margin-left-name-pattern            : ('margin','%-','%state','%-','left');
$gridle-margin-right-name-pattern           : ('margin','%-','%state','%-','right');
$gridle-margin-top-name-pattern             : ('margin','%-','%state','%-','top');
$gridle-margin-bottom-name-pattern      : ('margin','%-','%state','%-','bottom');

Gridle js

Gridle js is a little file that allows you to be notified when your page change of states, witch state is active, witch not, and witch states have changed.

I have a question about this...

Gridle JS (1.0)

Gridle js is a little file that allows you to be notified when your page change of states, witch state is active, witch not, and witch states have changed. All of this with a simple syntax.

Installation

Gridle.js is part of the package that you get from github or bower. To install it, simply reference the gridle.js in your html file like so :

<head>
    <!-- ... -->
    <script src=".../gridle.js"></script>
    <!-- ... -->
</head>

Setup

This part is optional but is you want to configure the plugin, you will need to do this

Gridle.init ( {settings} );

These are the options available

Gridle.init({

    // make gridle output some console.log
    debug : true,

    // callback when the states changes
    onUpdate : function(updatedStates, activeStates, inactiveStates) {
        // do something here...
    },

    // optional : if specified, will fetch only this css file, otherwise, will fetch all the css in document until find states
    cssPath : 'css/grid.css'    // default : null

});

API

Gridle.js provide a simple and clean API.

on

This method allows you to subscribe to an event emited by Gridle.js

Gridle.on('update', function(updatedStates, activeStates, inactiveStates) {
    // do something here
});

isReady

This method allows you to check if gridle is ready. This mean that it has finded the states in your css.

if ( Gridle.isReady() ) {
    // do something here...
}

isActive

This method allows you to check if a state is active

if ( Gridle.isActive('mobile') ) {
    console.log('mobile state is active');
}

getRegistredStates

This method allows you to get all the registered states

var states = Gridle.getRegisteredStates();

getUpdatedStates

This method allows you to get all updated states. Be careful, this will be available only when the states change, then, when the screen is resized and the states are the same, this will be empty...

var states = Gridle.getUpdatedStates();

getUpdatedStatesNames

Same as getUpdatedStates, but return an array of names only

var states = Gridle.getUpdatedStatesNames();

getActiveStates

Allows you to get the active states

var states = Gridle.getActiveStates();

getActiveStatesNames

Same as getActiveStates, but return an array of names only

var states = Gridle.getActiveStatesNames();

getInactiveStates

Allows you to get the unactive states

var states = Gridle.getInactiveStates();

getInactiveStatesNames

Same as getUnactiveStates, but return an array of names only

var states = Gridle.getInactiveStatesNames();

Events

Gridle js trigger some events to be notified of states change, etc... Here's a list

ready

This event notify that gridle has find the states in css and is ready to check changes

update

This event is the main one. It notifies you that some states have changed.

Subscribe to an event

The events in gridle.js are emitted through multiple channel. jQuery events are supported and you can also use the simple built-in event function to subscribe to an event. Here's how :

Built-in

Gridle.on('update', function(updatedStates, activeStates, inactiveStates) {
    // do something here... 
});

jQuery

By using jQuery, you can either subscribe directly on the Gridle object, or through the "body" DOM node

// directly on Gridle :
jQuery(Gridle).bind('update', function(updatedStates, activeStates, inactiveStates) {
    // do something here... 
});

// through the body node :
jQuery('body').trigger('gridle.update', function(updatedStates, activeStates, inactiveStates) {
    // do something here... 
});

Be careful, when listen for event through the body tag, the event name will be prefixed by "gridle.". For example, update will become "gridle.update"

Stay in touch

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

Fork me on GitHub