Coffeekraken.io 0.0.1

Functions

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

g-states-count

Return the number of states registered

g-states-count();
$count : g-states-count();

g-current-state

Return the current state map depending in witch g-state you are

g-current-state();
$state : g-current-state(); // will return the default state

@include g-state(mobile) {
    $state : g-current-state(); // will return the mobile state
}

g-current-state-name

Return the current state name depending in witch g-state you are

g-current-state-name();
$name : g-current-state-name(); // will return default

.my-cool-element {
    @include g-state(mobile tablet) {
        $name : g-current-state-name(); // will return once mobile and once tablet
        content : #{$name};
    }
}

g-column-width

Return the width in percentage of one/more column(s)

g-column-width();
g-column-width( {columns} );
g-column-width( {columns} , {state} );
$width-of-1-column : g-column-width();
$width-of-3-columns : g-column-width(3);
$width-of-1-column-in-mobile : g-column-width(1, mobile);

g-get-state

Return the state map

g-get-state();
g-get-state( {state} );
$defaultState : g-get-state();
$mobileState : g-get-state(mobile);

#mobileState {
    content: inspect(g-get-state(mobile));
}

g-has-state

Return if a state with the passed name exist

g-has-state( {state} );
@if g-has-state(mobile) {
    // do something...
}

g-get-state-var

Return a state var value. If no state is provided, will return the var of the current state

g-get-state-var( {varName} );
g-get-state-var( {varName} , {state} );
$default-state-context : g-get-state-var(context);
$mobile-state-gutter-width : g-get-state-var(gutter-width, mobile);

.my-cool-item {
    @include g-state(mobile) {
        content : #{g-get-state-var(name)}; // will output mobile
    }
}

Here's a list of all the variables you can get :

- name
- min-width
- max-width
- query
- classes // true or false if the classes need to be generated for this state
- context
- gutter-width
- gutter-height
- gutter-top
- gutter-right
- gutter-bottom
- gutter-left
- direction
- name-multiplicator
- states-classes // true or false if need to generate the states-classes

g-states-names

Return a list of all the states names registered

g-states-names();
$statesNames : g-states-names();
@each $name in $statesNames {
    // do something here...
}

g-driver

Return the current driver used like default or flex...

g-driver();
$driver : g-driver();
@if $driver == flex {
    // do something...
}

g-is-driver

Return true of false depending if the specified driver is the current one

g-is-driver( {drivers} );
@if g-is-driver(flex coco) {
    // do something when the used driver is flex or coco
}

g-get-media-query

Return the media query of the specified state or the current one

g-get-media-query();
g-get-media-query( {state} );
.my-cool-element {
    content : #{g-get-media-query()};

    @include g-state(mobile) {
        content : #{g-get-media-query()};
    }
}