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

Gridle, in order to work, need to be set up by using the gridle_setup mixin. In this mixin, you can pass different configurations variables like the context, the gutter-width, etc...

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

Your states does not have the same name as a gridle option like gutter-width...

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 , {settings} );
/**
* States with 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 without classes generation :
 * Useful when you need a state that cover either 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 media query :
*/
@include gridle_register_state( iphone-landscape , (
    query : "only screen and (max-device-width: ..."
) );

The state can have all the settings available in gridle. If not set, a settings will take the default one defined in your gridle_setup.

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)

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

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} );
#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} );
#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( {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} );
/**
 * 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} );
/**
 * 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 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.

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 :
*/
@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 ( );

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.

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

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

Stay in touch

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

Fork me on GitHub