Coffeekraken.io 0.0.1

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 g-register-state ( name , {settings} );
/**
* States are usually initialized with screen sizes :
*/
@include g-register-state(mobile, (
    max-width : 400px
));
@include g-register-state(tablet, (
    min-width : 401px,
    max-width : 767px,
    gutter-width : 30px     // change the gutters for this state

    // available options
    // - min-width
    // - max-width
    // - query
    // - gutter-width
    // - gutter-height
    // - gutter-top
    // - gutter-right
    // - gutter-bottom
    // - gutter-left
    // - classes : if need to generate classes
));

/**
 * 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 g-register-state(moblet, (
    min-width : 767px,
    classes : false
));

/**
* State with can also include media queries:
*/
@include g-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 g-setup().

Using States

After you have registered you states, the @include g-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="gr-3 gr-6@tablet gr-12@mobile">
        3 columns, 6 on tablet, 12 on mobile
    </div>
    <div class="gr-12 hide@mobile">
        12 columns but I'm hidden on mobile
    </div>
</div>

Mixins

/**
* Using mixins :
*/
#content {
    @include g-grid(8);
    @include g-state(mobile) {
        @include g-grid(12);
    }

    // or by using g-set mixin :
    @include g-set((
        grid : 8,
        mobile : (
            grid : 12,
            hide : true
        )
    ));

    // universal mixin
    @include gridle(8 mobile 12 hide);
}
#sidebar {
    @include g-grid(4);
    @include g-state(mobile) {
        @include g-hide();
    }

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

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 g-generate-custom-class( {pattern} )
// the pattern is a list element or sass
@include g-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 @ as class separators.