mixins-usage.md

EZPZ Flexbox grid Documentation

Documentation > Mixins usage

Mixins

The grid autogenerates the classes it needs to be functional. This can be turned off if you want to generate your own classes and be more flexible or it can be used next to eachother.

Mandatory

Turn the autogenerated css off to reduce the grid footprint. Optional.

$ezpz-auto-generate: false;

The grid requires some default styles to properly function. It needs a container which will include the cells. The main and section element can be replaced with any element or class you want.

main {
    @include create-grid();

    > section {
        @include create-grid-cell();
    }
}

Grid mixins

mixin	options
@include grid-layout({option});	'horizontal' (default) or 'vertical'
@include grid-align({option});	'stretch' (default), 'start', 'center' or 'end'
@include grid-wrap({option});	'nowrap' (default), 'wrap' or 'reverse'

Cell mixins

mixin	options
@include create-cell({fraction});	A fraction: for example 1/4
@include cell-order({option});	'start', 'end' or a number
@include cell-offset({fraction});	A fraction: for example 1/4
@include cell-align({option});	'stretch' (default), 'start', 'center' or 'end'
@include gutter-collapsed();	No gutter

Demo

For a more in-depth explanation with examples please visit the demo.