Foundations
Grid system
scss:Readyfigma:Ready
Flexy is a grid system and a general purpose layout tool based on Flex. It can be used to build page level layout as well as component level one. It is why it is not called "grid" but "flexy".
Get started
Import
@import 'settings-tools/all-settings';
@import 'layouts/_l.container'; // you generally want the container as well@import 'layouts/_l.flexy';
How it works
The example below creates four equal-width columns at small, medium, large, and extra large breakpoints using our predefined grid classes.
Viewport: px
<div class="ml-container"> <div class="ml-flexy"> <div class="example ml-flexy__col"> Col 1 </div> <div class="example ml-flexy__col"> Col 2 </div> <div class="example ml-flexy__col"> Col 3 </div> <div class="example ml-flexy__col"> Col 4 </div> </div></div>
Container rules
ml-container defines the overall grid context at the top level and applies the proper margin and our default max-width. You can also remove this max width, by using the grid modifier class ml--container--fluid. See the default container.
Columns
ml-flexy__col defines individual columns inside the grid. With Flexbox columns widths are set in percentages relative to their parent element so columns without a specific width will automatically be equal. For example, four instances of ml-flexy__col will give you four equal width columns — each 25% of the parent from the small breakpoint on up.
Gutters
In most cases, you will need gutters.
When used with gutters, .ml-flexy uses the negative margin pattern: each column as a padding measuring half a gutter width, and the containing .ml-flexy as a negative margin equal to half a gutter width on both sides as well.
<div class="ml-flexy ml-flexy--gutter"> <div class="ml-flexy__col"> col 1 </div>
<div class="ml-flexy__col"> col 2 </div></div>
Tokens
| Token name | Description | Value |
|---|---|---|
size.gutter.screen.s | The gutter width for smallest devices and up | 1mu 16px |
size.gutter.screen.m | The gutter width for screen m and up | 2mu 32px |
Reminder: mu = MagicUnit. Ex: 3.5mu = MagicUnit \* 3.5
Columns options
Widths
You can apply specific columns width using .ml-flexy__col modifiers:
| Modifier | Width |
|---|---|
.ml-flexy__col--1of12 | 8.3333% |
.ml-flexy__col--1of6 | 16.6666% |
.ml-flexy__col--1of4 | 25% |
.ml-flexy__col--1of3 | 33.3333% |
.ml-flexy__col--1of2 | 50% |
.ml-flexy__col--2of3 | 66.6666% |
.ml-flexy__col--3of4 | 75% |
.ml-flexy__col--5of6 | 83.3333% |
.ml-flexy__col--11of12 | 91.66666% |
.ml-flexy__col--initial | width of the column content |
.ml-flexy__col--fill | fill the available width |
.ml-flexy__col--full | 100% |
Responsive modifiers
Apply widths to breakpoints using the @from-XX suffix to the widths modifiers.
The available breakpoints modifiers are:
| Modifier | Breakpoint | Corresponding device |
|---|---|---|
ml-flexy__col--[size] (no modifier) | From 0px and up | Mobile / All |
ml-flexy__col--[size]@from-m | m: From 680px and up | Fablet / Small tablet and up |
ml-flexy__col--[size]@from-l | l: From 1024px and up | Landscape tablets, laptops |
ml-flexy__col--[size]@from-xl | xl: From 1280px and up | Laptops (depending on settings) |
ml-flexy__col--[size]@from-xxl | xxl: From 1920px and up | Desktop |
Viewport: px
<div class="example"> <div class="ml-container example__container"> <div class="ml-flexy ml-flexy--gutter"> <div class="ml-flexy__col ml-flexy__col--1of12 example__col"> <div class="example__item"> 1of12 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of12 example__col"> <div class="example__item"> 1of12 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of12 example__col"> <div class="example__item"> 1of12 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of12 example__col"> <div class="example__item"> 1of12 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of12 example__col"> <div class="example__item"> 1of12 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of12 example__col"> <div class="example__item"> 1of12 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of12 example__col"> <div class="example__item"> 1of12 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of12 example__col"> <div class="example__item"> 1of12 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of12 example__col"> <div class="example__item"> 1of12 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of12 example__col"> <div class="example__item"> 1of12 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of12 example__col"> <div class="example__item"> 1of12 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of12 example__col"> <div class="example__item"> 1of12 </div> </div>
<div class="ml-flexy__col ml-flexy__col--1of6 example__col"> <div class="example__item"> 1of6 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of6 example__col"> <div class="example__item"> 1of6 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of6 example__col"> <div class="example__item"> 1of6 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of6 example__col"> <div class="example__item"> 1of6 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of6 example__col"> <div class="example__item"> 1of6 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of6 example__col"> <div class="example__item"> 1of6 </div> </div>
<div class="ml-flexy__col ml-flexy__col--1of6 example__col"> <div class="example__item"> 1of6 </div> </div> <div class="ml-flexy__col ml-flexy__col--5of6 example__col"> <div class="example__item"> 5of6 </div> </div>
<div class="ml-flexy__col ml-flexy__col--1of4 example__col"> <div class="example__item"> 1of4 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of4 example__col"> <div class="example__item"> 1of4 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of4 example__col"> <div class="example__item"> 1of4 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of4 example__col"> <div class="example__item"> 1of4 </div> </div>
<div class="ml-flexy__col ml-flexy__col--1of4 example__col"> <div class="example__item"> 1of4 </div> </div> <div class="ml-flexy__col ml-flexy__col--3of4 example__col"> <div class="example__item"> 3of4 </div> </div>
<div class="ml-flexy__col ml-flexy__col--1of3 example__col"> <div class="example__item"> 1of3 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of3 example__col"> <div class="example__item"> 1of3 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of3 example__col"> <div class="example__item"> 1of3 </div> </div>
<div class="ml-flexy__col ml-flexy__col--1of3 example__col"> <div class="example__item"> 1of3 </div> </div> <div class="ml-flexy__col ml-flexy__col--2of3 example__col"> <div class="example__item"> 2of3 </div> </div>
<div class="ml-flexy__col ml-flexy__col--1of2 example__col"> <div class="example__item"> 1of2 </div> </div> <div class="ml-flexy__col ml-flexy__col--1of2 example__col"> <div class="example__item"> 1of2 </div> </div>
<div class="ml-flexy__col ml-flexy__col--full example__col"> <div class="example__item"> full </div> </div>
<div class="ml-flexy__col ml-flexy__col--initial example__col"> <div class="example__item"> initial </div> </div>
<div class="ml-flexy__col ml-flexy__col--fill example__col"> <div class="example__item"> fill </div> </div> </div> </div></div>
Alignment
You can align columns in a ml-flexy using the ml-flexy--items-[xxx] modifiers.
Available modifiers are:
| Modifier | Value | Behavior |
|---|---|---|
| default (no modifiers) | align-items: flex-start | Top alignment |
ml-flexy--items-end | align-items: flex-end | Bottom alignment |
ml-flexy--items-center | align-items: center | Vertically centered |
ml-flexy--items-start | align-items: flex-start | Top alignment |
ml-flexy--items-stretch | align-items: stretch | All columns use the same height |
Viewport: px
<div class="example"> <span class="title">default :</span> <div class="ml-container example__container"> <div class="ml-flexy ml-flexy--gutter"> <div class="ml-flexy__col example__col"> <div class="example__item"> <br /> <br /> A <br /> <br /> <br /> </div> </div> <div class="ml-flexy__col example__col"> <div class="example__item"> B </div> </div> <div class="ml-flexy__col example__col"> <div class="example__item"> <br /> C <br /> <br /> </div> </div> </div> </div> <span class="title">ml-flexy--items-end : </span> <div class="ml-container example__container"> <div class="ml-flexy ml-flexy--items-end ml-flexy--gutter"> <div class="ml-flexy__col example__col"> <div class="example__item"> <br /> <br /> A <br /> <br /> <br /> </div> </div> <div class="ml-flexy__col example__col"> <div class="example__item"> B </div> </div> <div class="ml-flexy__col example__col"> <div class="example__item"> <br /> C <br /> <br /> </div> </div> </div> </div> <span class="title">ml-flexy--items-center : </span> <div class="ml-container example__container"> <div class="ml-flexy ml-flexy--items-center ml-flexy--gutter"> <div class="ml-flexy__col example__col"> <div class="example__item"> <br /> <br /> A <br /> <br /> <br /> </div> </div> <div class="ml-flexy__col example__col"> <div class="example__item"> B </div> </div> <div class="ml-flexy__col example__col"> <div class="example__item"> <br /> C <br /> <br /> </div> </div> </div> </div> <span class="title">ml-flexy--items-stretch : </span> <div class="ml-container example__container"> <div class="ml-flexy ml-flexy--items-stretch ml-flexy--gutter"> <div class="ml-flexy__col example__col"> <div class="example__item"> <br /> <br /> A <br /> <br /> <br /> </div> </div> <div class="ml-flexy__col example__col"> <div class="example__item"> B </div> </div> <div class="ml-flexy__col example__col"> <div class="example__item"> <br /> C <br /> <br /> </div> </div> </div> </div></div>
Pushing a column to the left
You can push a column using the ml-flexy__col--push-[XofY] modifiers.
...<div class=" ml-flexy__col ml-flexy__col--1of3 ml-flexy__col--push-1of3"> <!-- column content --></div>...
All columns widths (numerical) are available as push values from 1of12, 1of6, 1of4 ... to 11of12.
Viewport: px
<div class="example"> <p>to create empty spaces between columns</p> <div class="ml-container example__container"> <div class="ml-flexy ml-flexy--gutter"> <div class=" ml-flexy__col ml-flexy__col--1of6 example__col" > <div class="example__item"> 1 of 6 </div> </div> <div class=" ml-flexy__col ml-flexy__col--push-1of12 ml-flexy__col--fill example__col" > <div class="example__item"> fill / push 1 of 12 </div> </div> </div> </div> <p>for centering</p> <div class="ml-container example__container"> <div class="ml-flexy ml-flexy--gutter"> <div class=" ml-flexy__col ml-flexy__col--2of3 ml-flexy__col--push-1of6 example__col" > <div class="example__item"> 2 of 3 / push 1 of 6 </div> </div> </div> </div></div>
Responsive push modifiers
Apply widths to breakpoints using the @from-XX suffix to the width modifiers.
The available breakpoints modifiers are:
| Modifier | Breakpoint | Corresponding device |
|---|---|---|
ml-flexy__col--push-[size] (no modifier) | From 0px and up | Mobile / All |
ml-flexy__col--push-[size]@from-m | m: From 680px and up | Fablet / Small tablet and up |
ml-flexy__col--push-[size]@from-l | l: From 1024px and up | Landscape tablets, laptops |
ml-flexy__col--push-[size]@from-xl | xl: From 1280px and up | Laptops (depending on settings) |
ml-flexy__col--push-[size]@from-xxl | xxl: From 1920px and up | Desktop |
Reset pushed modifiers
For a specific a breakpoint you can reset the pushed column using mc-flexy__col--push--reset@from-XX.
...<div class=" ml-flexy__col ml-flexy__col--1of12 ml-flexy__col--push-1of12@from-l ml-flexy__col--push-reset@from-xl"> <!-- column content --></div>...
Nesting flexy grids
You can either nest flexy grids by creating a new .ml-flexy grid inside a column, or by directly applying a .ml-flexy class on a .ml-flexy__column element.
Viewport: px
<div class="example"> <div class="ml-container example__container"> <main class="ml-flexy ml-flexy--gutter"> <aside class="ml-flexy__col ml-flexy__col--1of3"> <div class="example__item"> parent flexy - col 1of3 </div> </aside> <article class="ml-flexy__col ml-flexy ml-flexy--gutter"> <!-- netsed grid --> <header class="ml-flexy__col ml-flexy__col--full"> <div class="example__item"> nested flexy - col full </div> </header> <section class="ml-flexy__col ml-flexy__col--1of2"> <div class="example__item"> nested flexy - col 1of2 </div> </section> <section class="ml-flexy__col ml-flexy__col--1of2"> <div class="example__item"> nested flexy - col 1of2 </div> </section> <footer class="ml-flexy__col ml-flexy__col--full"> <div class="example__item"> nested flexy - col full </div> </footer> </article> </main> </div></div>
Columns order
Use the ml-flexy__col--last and ml-flexy__col--first modifier to reorder columns.
Viewport: px
<div class="example"> <div class="ml-container example__container"> <div class="ml-flexy ml-flexy--gutter"> <div class="ml-flexy__col ml-flexy__col--1of3 ml-flexy__col--last"> <div class="example__item mu-mb-100 mu-mt-100"> A - order last </div> </div> <div class="ml-flexy__col ml-flexy__col--1of3"> <div class="example__item mu-mb-100 mu-mt-100"> B </div> </div> <div class="ml-flexy__col ml-flexy__col--1of3 ml-flexy__col--first"> <div class="example__item mu-mb-100 mu-mt-100"> C - order first </div> </div> </div> </div></div>
Use flexy to center vertically and horizontally
Use the ml-flexy--space-around and the ml-flexy--items-center modifier on a ml-flexy element to center vertically and horizontally elements.
Viewport: px
<div class="ml-flexy ml-flexy--space-around ml-flexy--items-center example"> <div class="example__item"> Hello<br /> i'm centered </div></div>