Coffeekraken.io 0.0.1

Get Started

Below is the basic usage of gridle and how to use it in your own project. From here you can make adjustments to the setup and states to suit your specific needs.

Installation

To install gridle in your project, use NPM like so:

$ npm install coffeekraken-gridle

Files structure

This is the file structure that we use in our project. Feel free to adapt this depending on your needs...

_settings.scss

This file contains all your grid setup instructions.

// import gridle
@import "node_modules/coffeekraken-gridle/index";

// setting up the grid
@include g-setup( (
    context : 12,
    gutter-width : 20px,
    direction : rtl,
    // etc...
) );

// make the use of media queries really easy
@include g-register-state ( mobile , (
    max-width : 480px
) );
@include g-register-state ( tablet , (
    min-width : 481px,
    max-width : 1024px
) ) ;

// even with full custom queries :
@include g-register-state ( landscape, (
    query : "(orientation : landscape)"
) );

grid.scss

This file will be your actual grid classes. You need to import the settings and use the g-generate-classes mixin in order to get your classes.

// import settings :
@import 'settings';

// generate classes :
@include g-generate-classes();

// manage container width :
.container {
    max-width : 960px;
    margin : 0 auto;
}

index.html

Here's how you use your grid classes in your html.

<!-- If want to use mixins, no need to add classes -->
<div class="container">
    <div class="gr-12" id="header">
        I'm the header, 12 columns width
    </div>
    <div class="gr-8 gr-12@mobile" id="content">
        I'm the content, 8 columns width, but 12 on mobile
    </div>
    <div class="gr-4 gr-12@mobile" id="sidebar">
        I'm the sidebar, 4 columns width, but 12 on mobile
    </div>
</div>

style.css

In your style.scss file, you need also to include the settings, then you can use all the gridle mixins inside your code like so:

// import settings :
@import 'settings';

#header {
    @include g-grid(12);
}
#content {
    @include g-grid(8);
    @include g-state(mobile) {
        @include g-grid(12);
    }
}
#sidebar {
    // sidebar will make 4 columns width
    @include g-grid(4);
    background : yellow;

    // update sidebar look and feel for mobile and tablet
    @include g-state(mobile tablet) {
        background : red;
    }
}