A set of helper that easily help you to create better flex element. It was designed to be as easy to use as bootstrap.
Row is the main element of the flex with horizontal axis.
Meanwhile you will need stack to get the vertical axis.
You can also use reverse to get the reverse effect of flex.
Space is the gap between each flex item, you can use these class to have each of the flex spacing effect.
<div class="row space-around"></div>
<div class="row space-between"></div>
<div class="row space-start"></div>
<div class="row space-end"></div>
<div class="row space-center"></div>
Giving the proper containing element for the content.
The default width for container is 80% of its wrapper, if you want to have different width, you can use a width class such as :
<div class="container width-50"></div>
<div class="container width-60"></div>
<div class="container width-70"></div>
<div class="container width-80"></div>
<div class="container width-90"></div>
<div class="container width-100"></div>
The flex item that you will use will be based on 12 grid system with calculation based on screen size. There are four media breakpoint exist.
Offset is how you could shift the position of the flex item, higher value means the item will be shifted farther. The value will be based on 12 grid system
Hidden
Hidden can be used to hide a section in certain screen. Example: Code below will let you hide the section when users open your application in small devices.
If you needed, padding and flex-item could be arranged to have padding and gutter. Use padded class to make the item have padding, and use gutter class to make the item have gutter. The value inserted will be the value of padding in pixel. Meanwhile if you use gutter, the value will be divided by 2 and implemented as padding and margin of that particular item.