Coffeekraken.io 0.0.1

Setup

Gridle is a fully customizable grid system. To do that, you have to configure your grid with simple options.

Configure your grid

In order for Gridle to work, the g-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 g-setup( {settings} );
// default settings
$settings : (
    context : 12,             // number of columns in your grid
    column-width : null,     // by default it's percentage based depending on the context but you can specify a column width yourself
    gutter-width : 20px,    // size of the gutters
    gutter-height : 0,         // size of top and bottom gutters
    gutter-top       : 0,         // size of top gutter
    gutter-bottom : 0,         // size of bottom gutter
    gutter-left   : 10px,     // size of left gutter
    gutter-right  : 10px,     // size of right gutter
    direction : ltr,         // direction
    dir-attribute : false,     // if need to generate support for dir="rtl" in order to set part of layout direction
    states-classes : false, // if we need to generate the states classes
    name-multiplicator : 1, // if 5, generate gr-5, gr-10, etc...
    classes-prefix : ''     // the prefix used for all classes
);
@include g-setup($settings);

You need to specify only the settings that you want to override

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

Init your grid

If you use the grid with the g-generate-classes mixin only, this is not for you. When you use gridle with the mixins, you have to init it in order to avoid some potential issues with libsass (sorry it's not me who's in charge of this project...). To do that, it's really simple. You have to call the g-init() mixin AFTER the section where you have all your gridle setup kind of mixins (this includes g-setup, g-register-states, etc...) and BEFORE you call any gridle mixins that generate css output like gridle, g-container, etc...

// your gridle setup section :
@include g-setup(());
@include g-register-state(mobile, ...);
@include g-register-state(tablet, ...);

// init the grid here!
@include g-init();

// then use your grid as normal
.coco {
    @include gridle(4 push 2);
}
// etc...

Choose a driver

Gridle offer you multiple drivers that you can choose. The default one will make your grid work with float, etc... and the flex one will use flexbox to layout your grid. All this power behind same and simple classes.

// default
@import 'node_modules/coffeekraken-gridle/index';

// flex
@import 'node_modules/coffeekraken-gridle/flex';