Grid system

Customisation and mixins

There are eight available mixins that you can work with to help you create layouts :

set-flexy: Adds flex properties to a container (similar to .ml-flexy).
set-flexy-width: Adds a width properties to a flex child (similar to .ml-flexy__col--XofX).
set-flexy-gutter and set-flexy-col-gutter: Adds gutters to the a flex container and his child.
set-flexy-col-push: Adds a margin left to a flex child (similar to .ml-flexy__col--push-XofX).
make-flexy-col: Creates a new column width of type .ml-flexy__col--XofX.
make-flexy-custom-col: Creates custom columns (with any properties you want .ml-flexy__col--XXX).
make-flexy-col-push: Creates a new column push of type .ml-flexy__col--push-XofX.

The set-flexy-xxx mixins

Use the set-flexy-xxx to mimic the behavior of a grid without applying classes on the dom.

Example: Create a blog post layout with an image and a text. From tablet screens, put the text in front of the image.


@import 'settings-tools/all-settings';
.post-item {
  $gutter: $mu200;
  /* set flex */
  @include set-flexy(); /* add the gutter to the parent */
  @include set-flexy-gutter($gutter);
  &__image,
  &__body {
    /* add the gutter to the childs */
    @include set-flexy-col-gutter($gutter);
  }
  &__image {
    @include set-flexy-width(1, 1); // 100%
    @include set-from-screen(m) {
      // will output a 1of4 equivalent = 25% width
      @include set-flexy-width(1, 4);
    }
  }
  &__body {
    @include set-flexy-width(1, 1); // 100%
    @include set-from-screen(m) {
      // will output a 1of4 equivalent = 25% width
      @include set-flexy-width(3, 4);
    }
  }
}

set-flexy-xxx mixins parameters

set-flexy: No argument required
set-flexy-width: $portion: required - integer, $of: required - integer
set-flexy-gutter and set-flexy-col-gutter: $gutter : required - a rem value of the total gutter width
set-flexy-col-push: $portion: required - integer, $of: required - integer

The make-flexy-xxx mixins

Use the make-flexy-xxx to create aditional columns and options to the grid system.

Make-flexy-xxx mixins parameters

make-flexy-col: Creates a new column width of type .ml-flexy__col--XofX
make-flexy-custom-col: Creates custom columns (with any properties you want .ml-flexy__col--XXX)
make-flexy-col-push: Creates a new column push of type .ml-flexy__col--push-XofX

Example: adding columns to the flexy grid

Please consider that you need to keep the import order clean and that you should add your grid extension right after the import of flexy.

We advise you to create a new scss file that contains your extensions:

src/_l.flexy-extend.scss


/*
create a column of 12.5% width
named ml-flexy__col--1of8
with responsive modifiers for all major screen sizes
*/
@include make-flexy-col(1, 8, $major-screens);
/*
create a custom column of 320px width
named ml-flexy__col--ads
with no responsive modifiers
*/
@include make-flexy-custom-col('ads') {
  flex: 0 0 320px;
  max-width: 320px;
}
/*
create a push value of 12.5%
named ml-flexy__col--push-1of8
with responsive modifiers for all major screen sizes
*/
@include make-flexy-col-push(1, 8, $major-screens);

then import it in your main bundle

src/main-bundle.scss


@import 'settings-tools/all-settings';
// ...
@import 'layouts/l.flexy';
@import 'src/_l.flexy-extend'; // insert it right after
@import 'layouts/l.other-layout';