Foundations

Grid system

sketch:Readyscss:Readyfigma:Ready

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';
@include import-font-families();
.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';
@include import-font-families();
...
@import 'layouts/_l.flexy';
@import 'src/_l.flexy-extend'; // insert it right after
@import 'layouts/_l.other-layout';
...