Coffeekraken.io 0.0.1

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.

Container

The container mixin just set a clearfix to avoid you any problem to the display

@include g-container();
.container {
    @include g-container();
    max-width: 960px;
    margin: 0 auto;
}

// universal mixin
@include gridle(container);

Row

The row mixin need to be applied on the elements that will contains your columns items

// default driver :
@include g-row();

// flex driver :
@include g-row( {reverse} ); // true or false

// with context :
@include g-state(mobile) {
    @include g-row();
}

// g-set :
@include g-set((
    row : true
));

// universal mixin
@include gridle(row);
.my-row {
    @include gridle(row);
}

Row align

This mixin is used to align your grid items in your row.

// possible values :
$align : top | middle | bottom || left | center | right;

@include g-row-align ( {align} );

// with state
@include g-state(mobile) {
    @include g-row-align({align});
}

// g-set :
@include g-set ( (
    row-align : {align}
) );

// universal mixin
@include gridle(row-align {align});
.my-row {
    @include g-row();
    @include g-row-align ( center middle );

    // same with universal mixin
    @include gridle( row row-align center middle );
}

Row full

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

@include g-row-full();

// with state
@include g-state(mobile) {
    @include g-row-full();
}

// g-set :
@include g-set((
    row-full : true
));

// universal mixin
@include gridle(row-full);

Grid

These are your actual grid columns.

// $column-number : 1...{context} | adapt | grow;

@include g-grid({column-number});

// with context :
@include g-state(mobile) {
    @include gridle({column-number});
}

// g-set :
@include g-set((
    grid : {columns-number}
));

// universal mixin
@include gridle({columns-number});
.wrapper {
    @include g-container(); // I'm the container
    max-width : 960px;
    margin : 0 auto;
}
#header {
    @include g-grid(12);
}
#content {
    @include g-grid(8); // I made 8 columns width...
    @include g-state(mobile tablet) {
        @include g-grid(12); // ... but 12 columns width on mobile and tablet
    }

    // same using universal mixin
    @include gridle(8 mobile 12 tablet 12);
}
#sidebar {
    @include g-grid(4); // I made 4 columns width...
    @include g-state(mobile) {
        @include g-grid(12); // ... but 12 columns width on "mobile"
    }

    // same using universal mixin
    @include gridle(4 mobile 12);
}
#footer {
    @include g-grid(12);

    // same using universal mixin
    @include gridle(12);
}

Grid adapt / grow

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

@include g-grid-adapt();
// same as @include g-grid(adapt);

@include g-grid-grow();
// same as @include g-grid(grow);

// with state
@include g-state(mobile) {
    @include g-grid-adapt();
}

// g-set :
@include g-set((
    grid-adapt : true
    grid : adapt // same as line abow
));

// universal mixin
@include gridle(grow);
@include gridle(adapt);
.my-grid-element {
    @include g-grid-adapt();
    @include g-grid(adapt); // same as line abow

    // using universal mixin
    @include gridle(adapt);
}

Grid centered

This mixin will center your grid element

@include g-grid-centered();

// with state
@include g-state(mobile) {
    @include g-grid-centered();
}

// g-set :
@include g-set((
    grid-centered : true
));

// universal mixin
@include gridle(grid-centered);

Grid order (flex driver)

This mixin allows you to set where your grid element will be displayed in the row. If you have setup your grid with 12 columns, you will have 12 possibilities to order your element

// possible values
$order : 1...{context} | first | last;

@include g-order( {order} );

// with state
@include g-state(mobile) {
    @include g-order({order});
}

// g-set :
@include g-set((
    order : {order}
));

// universal mixin
@include gridle(order {order});

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

// with state
@include g-state(mobile) {
    @include g-push( {column-number} );
}

// g-set :
@include g-set((
    push : {column-number},
    pull : {column-number}
));

// universal mixin
@include gridle( push {column-number} );
@include gridle( pull {column-number} );
/**
 * This code will visualy swap the 2 columns "content" and "sidebar"
 * The HTML structure is not changed as well
 */
#content {
    @include g-grid(8);
    @include g-push(4); // I will be offset by 4 columns on the right

    // same with universal mixin
    @include gridle(8 push 4);
}
#sidebar {
    @include g-grid(4);
    @include g-pull(8); // I will be effset 8 columns on the left

    // same with universal mixin
    @include gridle(4 pull 8);

}

Prefix & Suffix

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

@include g-prefix( {column-number} );
@include g-suffix( {column-number} );

// with state
@include g-state(mobile) {
    @include g-prefix( {column-number} );
}

// g-set :
@include g-set((
    prefix : {column-number},
    suffix : {column-number}
), {state} );

// universal mixin
@include gridle( prefix {column-number} );
@include gridle( suffix {column-number} );
/**
 * This code will generate an "checkerboard" style grid
 */
#box1 {
    @include g-grid(3);
    @include g-prefix(3); // 3 columns of dead space to the right

    // same with universal mixin
    @include gridle(3 prefix 3);
}
#box2 {
    @include gridle(3 prefix 3);
}
#box3 {
    @include gridle(3 suffix 3);
}
#box4 {
    @include gridle(3 suffix 3);
}

Wrap / nowrap

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

@include g-wrap();
@include g-nowrap();

// with context
@include g-state(mobile) {
    @include g-wrap();
}

// g-set :
@include g-set((
    wrap : true | false, // if false, will apply nowrap
    nowrap : true | false // if false, will apply wrap
));

// universal mixin
@include gridle(wrap);
@include gridle(nowrap);
.my-row {
    @include g-row();
    @include g-nowrap();
}

Clear each (default driver)

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

@include g-clear-each ( {each} , {what} );

// with state
@include g-state(mobile) {
    @include g-clear-each( {each} , {what} );
}

// g-set :
@include g-set((
    clear_each : ( {each} , {what} )
), {state} );

// universal mixin
@include gridle(clear-each {each} {what});
#myContentThatHasWeirdHeightChilds {
    @include g-clear-each(2, left);

    // same using universal mixin
    @include gridle(clear-each 2 left);
}

Hide, show, etc...

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

@include g-hide();
@include g-show();
@include g-show-inlinee();
@include g-not-visible();
@include g-invisible();
@include g-visible();

// with state
@include g-state(mobile) {
    @include g-hide();
    // etc...
}

// g-set :
@include g-set((
    hide : true | false,
    show : true | false,
    show_inline : true | false,
    not_visible : true | false,
    visible : true | false
), {state} );

// universal mixin
@include gridle(hide);
@include gridle(show);
@include gridle(show-inline);
@include gridle(not-visible);
@include gridle(invisible);
@include gridle(visible);
#sidebar {
    @include gridle(4);
    @include g-state(mobile) {
        @include g-hide(); // Not enough space on mobile so we hide it
    }

    // same using universal mixin
    @include gridle(4 mobile hide);
}

Float

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

@include g-float( {left | right | both} );

// with state
@include g-state(mobile) {
    @include g-float( {left | right | both} );
}

// g-set :
@include g-set((
    float : {left | right | both}
), {state} );

// universal mixin
@include gridle( float {left | right | both} );
#sidebar {
    @include g-float(right); // float right normally...
    @include g-state(mobile) {
        @include g-float(left); // ... but left on mobile
    }

    // same using universal mixin
    @include gridle(float right mobile float left);
}

Clear

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

@include g-clear( {left | right | both} );

// with state
@include g-state(mobile) {
    @include g-clear( {left | right | both} );
}

// g-set :
@include g-set((
    clear : {left | right | both}
), {state} );

// universal mixin
@include gridle( clear {left | right | both} );
#sidebar {
    @include g-clear(right); // clear right normally...
    @include g-state(mobile) {
        @include g-clear(left); // ... but left on mobile
    }

    // same using universal mixin
    @include gridle(clear right mobile clear left);
}

Gutters

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

@include g-gutter( {sides | sizes} );
@include g-no-gutter( {sides | sizes} );

// with state :
@include g-state(mobile) {
    @include g-gutter( {sides} );
    // etc...
}

// g-set :
@include g-set((
    gutter : {sides},
    no-gutter : {sides}
) );

// universal mixin
@include gridle( gutter );
@include gridle( gutter {sides} );
@include gridle( no-gutter );
@include gridle( no-gutter {sides} );
#sidebar {
    @include g-gutter(); // add padding to left and right

    /**
     * You can specify a list of side as first param :
     * top left right bottom    are supported
     */
    @include g-gutter(top left); // add gutter to top and left only

    // same using universal mixin
    @include gridle(gutter top left);
}
#content {
    @include g-no-gutter(); // remove padding to left and right

    @include g-no-gutter(top left); // remove gutter to top and left only
}
#sizes-specific {
    // 5px top and bottom, 10px left and right
    @include g-gutter(10px 20px);

    // 5px top, 10px right, 15px bottom, 20px left
    @include g-gutter(5px 10px 15px 20px);

    // same using universal mixin
    @include gridle(gutter 5px 10px 15px 20px);
}

Universal mixin

All these mixins described above are great but this force you to write a lot of @include... to do complexe things. The universal mixin is here to help you with that. It allow to write in 1 line all you want from gridle in your element.

@include gridle( {properties-list} );

// syntax
@include gridle( {property} {value} {value} {property} {value} {state} {property} {value} {state} {property} {value}...);
.my-cool-element {
    // make a grid 12 that push from 5 and will be hided on mobile
    @include gridle(12 push 5 mobile hide);

    // make something more complexe
    @include gridle(4 push 3 suffix 4
        mobile 12 suffix 0 push 0
        tablet hide);
}

Gridle state

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 g-state( {state} ) {
    {custom-css}
}
@include g-state( {min-width} , {max-width} ) {
    {custom-css}
}
#header {
    @include g-grid(12);
}
#content {
    @include g-grid(8);
}
#sidebar {
    @include g-grid(4);

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

    /**
     * You can specify multiple states directly width g-state :
     * !!! multiple states names are the 1st parameter, so NO comma between them...
     * The states can be within quotes or not...
     */
    @include g-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 g-setup
     * !!! query and (max-width, min-width) cannot be used together...
     */
    @include g-state((
        query : 'only print'
        // or maybe a max-width : 900px
    )) {
        background : red;
    }

}
#footer {
    @include g-grid(12);
}

Gridle element queries

Gridle has a support for element queries (Thanks to Marc J Schmidt for his wonderfull work on the "polyfill"). To make your element responsive to his own width, use this mixin as described bellow

@include g-eq( {width} );
.component {
    background: yellow;

    @include g-eq(+600px) {
        // when the component is 600px and greater
        background: pink;
    }
    @include g-eq(-300px) {
        // when the component is 300px and lower
        background: green;
    }
    @include g-eq(-100px) {
        // when the component is 100px and lower
        background: black;

        .my-nested-element {
            display: none;
        }
    }
}

The browsers did not support them natively. To use element queries, you need to integrate the gridle-eq.js file.

Gridle set

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 g-set( {settings} , {state} );
#myCoolSidebar {

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

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

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

    /**
     * Or pass your states directly in one g-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 g-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 g-generate-classes();
@include g-generate-classes( {states} );
@include g-generate-classes( {states} , {package} );
@include g-generate-classes( {states} , {package} , {scope} );
/**
* Setting up your grid :
*/
@include g-setup((
    context : 12,
    gutter-width : 20px
));

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

/**
* Generate all the classes :
*/
@include g-generate-classes();

/**
 * Generate only the classes of the state mobile
 */
@include g-generate-classes(mobile);

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

/**
 * Generate all the classes without the visible and hide package
 */
@include g-generate-classes(all, -visible -hide);

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 package parameter

The parameter {package} 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
debug         : all the debug classes listed bellow

// default :
container     : the container classes
row         : the row classes
row-align     : all the row-align-... classes
col         : the col classes
row-full     : the row-full classes
nowrap         : the nowrap classes
wrap         : the wrap classes
grid         : all the gr- classes
grid-table     : the grid-table classes
grid-grow     : the grid-grow classes
grid-adapt     : the grid-adapt classes
grid-centered : the grid-centered 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
hide         : all the hide- classes
show         : all the show- classes
show-inline : all the show-inline- classes
not-visible : all the not-visible- classes
visible     : all the visible- classes
clear-each     : all the clear-each- classes
order         : all the order classes

// debug
row-debug     : the row-debug classes

Selector

If needed, you can apply some css to specifiy gridle selectors. This can be useful if you cannot target some grid elements by using something like [class*="gr-"]...

@include g-selector( {packages} , {states} ) {
    // your custom css here...
}
@include g-selector(grid grid-grow grid-adapt) {
    content : "I will target all the grid, grid-grow and grid-adapt elements of all states";
}

@include g-selector(grid, mobile) {
    content : "I will target all the grid elements of the mobile state"
}

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%