Coffeekraken.io 0.0.1

Default driver API

This are all the API mixins that are exposed by gridle for the flex driver.

Mixins

g-row

Set the element as a row

Name Type Description Status Default
$reverse { Boolean } Revert the columns order if true optional false

Example

    .my-cool-row {
    @include g-row();
}

Author : Olivier Bossel olivier.bossel@gmail.com

g-col

Set the element as a col

Name Type Description Status Default
$reverse { Boolean } Revert the columns order if true optional false

Example

    .my-cool-col {
    @include g-col();
}

Author : Olivier Bossel olivier.bossel@gmail.com

g-nowrap

Apply a nowrap on the element

Example

    .my-cool-element {
    @include g-nowrap();
}

Author : Olivier Bossel olivier.bossel@gmail.com

g-wrap

Reset the nowrap on the element

Example

    .my-cool-element {
    @include g-wrap();
}

Author : Olivier Bossel olivier.bossel@gmail.com

g-grid

Apply a column width on the element

Name Type Description Status Default
$columns { Integer , String } The column count to apply or a registered column name required
$context { Integer } The context on which to calculate the column width. If null, take the context setted with g-setup optional null

Example

    .my-cool-column {
    @include g-grid(2);
}

Author : Olivier Bossel olivier.bossel@gmail.com

g-row-full

Set the width of the row element to full viewport width

Example

    .my-cool-row {
 @include g-row();
    @include g-row-full();
}

Author : Olivier Bossel olivier.bossel@gmail.com

g-grid-adapt

Set the width of the grid element to adapt to his content

Example

    .my-cool-column {
 @include g-grid-adapt();
 // or
 @include g-grid(adapt);
}

Author : Olivier Bossel olivier.bossel@gmail.com

g-grid-grow

Set the width of the grid element to grow depending on the place it has at disposal

Example

    .my-cool-column {
 @include g-grid-grow();
 // or
 @include g-grid(grow);
}

Author : Olivier Bossel olivier.bossel@gmail.com

g-order

Set the position that the column has to take inside the row to rearange the order

Example

    .my-cool-column {
 @include g-grid(2);
 @include g-order(1);
}

Author : Olivier Bossel olivier.bossel@gmail.com

g-row-align

Set the alignement of the columns inside the row using these alignement properties:

  • top : Align vertical top
  • middle : Align vertical middle
  • bottom : Align vertical bottom
  • left : Align horizontal left
  • center : Align horizontal center
  • right : Align horizontal right

Example

    .my-cool-row {
 @include g-row-align(middle center);
 @include g-row-align(right);
 @include g-row-align(middle);
 // etc...
}

Author : Olivier Bossel olivier.bossel@gmail.com