Coffeekraken.io 0.0.1

Classes

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

Container

The container class is not really needed but it's a best practice to wrap all your rows into it so you can define a max-width for your entire grid at once like so

.container
<body>
    <div class="container">
        <div class="row">
            ...
        </div>
    </div>
</div>
// somewhere in your scss
.container {
    max-width: 960px;
    margin: 0 auto;
}

Row

The row class is the one that will wrap all your grid columns.

.row
.row@{state}

// flex driver
.col
.col@{state}
<div class="container">
    <div class="row">
        <div class="gr-6">
            ...
        </div>
        <div class="gr-6">
            ...
        </div>
    </div>
</div>

Row align

Gridle allows you to align your grid elements into a row by setting the alignement class on the row itself like this.

.row-align-left
.row-align-left@{state}
.row-align-center
.row-align-center@{state}
.row-align-middle
.row-align-middle@{state}
.row-align-top
.row-align-top@{state}
.row-align-middle
.row-align-middle@{state}
.row-align-bottom
.row-align-bottom@{state}

// flex driver
.row-align-around
.row-align-around@{state}
.row-align-between
.row-align-between@{state}
<div class="row row-align-middle row-align-center">
    <div class="gr-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="gr-4">
        I will be vertically centered cause I'm the smallest
    </div>
    <div class="gr-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...

Row full

This class allows you to make a particular row take the entire screen width without having to close all your container and row elements

.row-full
.row-full@{state}
<div class="container">
    <div class="row">
        <div class="gr-6">
            ...
        </div>
        <div class="gr-6">
            ...
        </div>
    </div>
    <div class="row row-full">
        <div class="gr-4">
            ...
        </div>
        <div class="gr-4">
            ...
        </div>
        <div class="gr-4">
            ...
        </div>
    </div>
</div>

Row reverse (flex driver)

This class allows you to reverse the order of your grid items. This work for the flex driver

.row-reverse
.row-reverse@{state}
<div class="row row-reverse">
    <div class="gr-4">
        I will be displayed as the last item
    </div>
    <div class="gr-4">
        I will be displayed as the second item
    </div>
    <div class="gr-4">
        I will be displayed as the first item
    </div>
</div>

Grid

These are your actual grid columns.

.gr-{columns-count}
.gr-{columns-count}@{state}
<div class="row">
    <div class="gr-8">
        I make 8 columns width
    </div>
    <div class="gr-4">
        I make 4 columns width
    </div>
</div>

Grid adapt / grow

This class allows you to tell a grid column to adapt his width depending on his content

.gr-adapt
.gr-adapt@{state}
.gr-grow
.gr-grow@{state}
<div class="row nowrap wrap@mobile">
    <div class="gr-adapt gr-12@mobile">
        <img src="..." />
    </div>
    <div class="gr-grow gr-12@mobile">
        I will grow to take all the remaining space
    </div>
</div>

<!-- default driver hack only -->
<div class="row nowrap wrap@mobile">
    <div class="gr-adapt gr-6@mobile">
        <img src="..." />
    </div>
    <div class="gr-5 gr-table gr-6@mobile">
        I have the gr-table class to fix display issue
    </div>
    <div class="gr-grow gr-12@mobile">
        I will grow to take all the remaining space
    </div>
</div>

Note the nowrap class on the row that tell the grid to not allow for content to go on a new line and the wrap@mobile class that allow the content have line break as wanted

Grid centered

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

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

Grid order (flex driver)

These classes will allows you to reorder your grid items. If you have setup your grid with 12 columns, you will have 12 classes like gr-order-1, gr-order-2, ..., gr-order-12.

.order-{columns-count}
.order-{columns-count}@{state}
.order-first
.order-first@{state}
.order-last
.order-last@{state}
<div class="row">
    <div class="gr-6 order-last">
        I will be the last displayed
    </div>
    <div class="gr-3 order-1">
        I will be the first displayed
    </div>
    <div class="gr-3">
        I will be the second displayed
    </div>
</div>

Push & Pull

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-{columns-count}@{state}
.pull-{columns-count}
.pull-{columns-count}@{state}
<div class="row">
    <div class="gr-8 push-4">
        I make 8 columns width and offset 4 columns to the right
    </div>
    <div class="gr-4 pull-9">
        I make 4 columns width and offset 8 columns to the left
    </div>
</div>

Prefix & Suffix

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

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

Wrap / nowrap

This classes are useful to specify on a wrapper that the direct children can or cannot wrap themselves

.wrap
.wrap@{state}
.nowrap
.nowrap@{state}
<div class="row nowrap wrap@mobile">
    <div class="gr-adapt gr-12@mobile">
        ...
    </div>
    <div class="gr-grow gr-12@mobile">
        ...
    </div>
</div>

Clear Each (default driver)

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

.clear-each-{x}
.clear-each-{x}@{state}
<div class="row clear-each-2">
    <div class="gr-6">
        I'm a content
    </div>
    <div class="gr-6">
        I'm a content
    </div>
    <div class="gr-6">
        I'm a content
    </div>
    <div class="gr-6">
        I'm a content
    </div>
</div>

In order to have these classes, you need to register them before like so :

@include g-register-clear-each( {clearEach} , {clearWhat} : both );
// in your _settings.scss file
@include g-register-clear-each(2, both);
@include g-register-clear-each(3, left);

Hide, show, ...

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="row">
    <div class="gr-8 hide@tablet">
        I'm not display (display:none) on "tablet" state
    </div>
    <div class="gr-4 not-visible@mobile">
        I'm not visible (visibility:hidden) on "mobile" state
    </div>
    <div class="gr-12 hide visible@mobile">
        I'm hided by default but displayed on mobile
    </div>
</div>

Float

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

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

Clear

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

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

Gutters

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-left@{state}
.no-gutter-right@{state}
.no-gutter-top@{state}
.no-gutter-bottom@{state}

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

Row debug

The debug-row class allows you to display the columns as an overlay.

.row-debug
.row-debug@{state}
<div class="row row-debug">
    ...
</div>

Direction

Gridle support direction by passing it in the setup mixin. You can also use the dir="rtl|ltr" html attribute to set the direction only for a part of the template.

<div class="row">
    <div class="gr-4"></div>
    <div class="gr-4"></div>
    <div class="gr-4"></div>
</div>
<div class="row" dir="rtl">
    <div class="gr-4"></div>
    <div class="gr-4"></div>
    <div class="gr-4"></div>
</div>

Some of the gridle features like push, pull, prefix, suffix and row-full need that the dir-attribute setting is set to true in the setup mixin in order to work properly. If you don't use one of these features, you can let the setting to false, witch is his default value.

Custom classes

Gridle allows you to generate your own classes available in all the registered states. You can do this like so :

@include g-generate-custom-class( {pattern} , {states} );
// generate a custom class for all the states
@include g-generate-custom-class( ('txt','-','align','-','center','@','%state') ) {
    text-align: center;
    content : "#{g-current-state-name()}";
}

This will generate all these classes for you if your registered states are mobile and tablet :

.txt-align-center
.txt-align-center@mobile
.txt-align-center@tablet