Hello World

Cras quis ultrices tellus, a dapibus arcu. Duis sed tellus eros. Etiam dignissim sapien non felis facilisis, id scelerisque tellus auctor. Sed efficitur feugiat quam in lobortis. Nunc ligula arcu.

Close the drawer

Hello World

Cras quis ultrices tellus, a dapibus arcu. Duis sed tellus eros. Etiam dignissim sapien non felis facilisis, id scelerisque tellus auctor. Sed efficitur feugiat quam in lobortis. Nunc ligula arcu.

Close the drawer

Gridle

One grid system to rule them all (.scss)

Kraken

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.

Setting things up

// 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)"
) );

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

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

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 [email protected]" id="content">
        I'm the content, 8 columns width, but 12 on mobile
    </div>
    <div class="gr-4 [email protected]" id="sidebar">
        I'm the sidebar, 4 columns width, but 12 on mobile
    </div>
</div>

States (media queries)

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

@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
));

Using States

<div class="container">
    <div class="gr-3 [email protected] [email protected]">
        3 columns, 6 on tablet, 12 on mobile
    </div>
    <div class="gr-12 [email protected]">
        12 columns but I'm hidden on mobile
    </div>
</div>

Mobile first

Gridle is the perfect fit for your mobile first projects. Here how you can start

For mobile first, you have to set the different states for your grid like so

@include g-register-state(mobile, (
    min-width : 320px
));
@include g-register-state(tablet, (
    min-width : 640px
));
@include g-register-state(desktop, (
    min-width : 992px
));
@include g-register-state(large, (
    min-width : 1200px
));

You can use the mixin g-register-mobile-first-states() that will make this part for you.

Classes

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

  • .container
  • .row
  • .row-align-{side}
  • .row-full
  • .row-reverse (flex driver)
  • .gr-{columns}
  • .gr-adapt
  • .gr-grow
  • .gr-centered
  • .order-{column} (flex driver)
  • .order-first (flex driver)
  • .order-last (flex driver)
  • .push-{columns}
  • .pull-{columns}
  • .prefix-{columns}
  • .suffix-{columns}
  • .wrap
  • .nowrap
  • .clear-each-{count} (default driver)
  • .hide
  • .show
  • .show-inline
  • .not-visible
  • .visible
  • .float-left
  • .float-right
  • .mo .mo--center .mo--end .mo__content (media object)
  • .clear
  • .clear-left
  • .clear-right
  • .no-gutter
  • .no-gutter-left
  • .no-gutter-right
  • .no-gutter-top
  • .no-gutter-bottom
  • .gutter
  • .gutter-left
  • .gutter-right
  • .gutter-top
  • .gutter-bottom

Functions

Gridle offer a bunch of usefull SASS functions that you can use.

  • g-states-count: Return the number of states registered
  • g-current-state: Return the current state map depending in witch g-state you are
  • g-current-state-name: Return the current state name depending in witch g-state you are
  • g-column-width: Return the width in percentage of one/more column(s)
  • g-get-state: Return the state map
  • g-has-state: Return if a state with the passed name exist
  • g-get-state-var: Return a state var value. If no state is provided, will return the var of the current state
  • g-states-names: Return a list of all the states names registered
  • g-driver: Return the current driver used like default or flex...
  • g-is-driver: Return true of false depending if the specified driver is the current one
  • g-get-media-query: Return the media query of the specified state or the current one
© Coffeekraken 2017
All our tools are published under MIT license