Grid
Breakpoints:
| Breakpoint |
Screen size |
Class example |
| Extra small and all screen sizes |
0px and above |
fx-f__box--12 |
| Small |
576px and above |
fx-f__box--sm-12 |
| Medium |
768px and above |
fx-f__box--md-12 |
| Large |
992px and above |
fx-f__box--lg-12 |
| Extra large |
1200px and above |
fx-f__box--xl-12 |
Grid with equal height columns
.fx-f__box .fx-f__box--3 - 3/12 = 25%
.fx-f__box .fx-f__box--6 - 6/12 = 50%
.fx-f__box .fx-f__box--3 - 3/12 = 25%
No gap between columns (no gutters) - .fx-f--gap-none
.fx-f__box .fx-f__box--3
* * * * * * * * * * * * * * * * * * * * *
.fx-f__box .fx-f__box--6
* * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * * * * * * * * * * * *
.fx-f__box .fx-f__box--3
* * * * * * * * * * * * * * * * * * * * *
Grid with nested rows and columns
Nested column
Nested column
Column with a lot of content.
Column with a lot of content.
Nested column
Nested column with a lot of content.
Grid - responsive
.fx-f__box .fx-f__box--2 .fx-f__box--md-4 fx-f__box--lg-4
.fx-f__box .fx-f__box--2 .fx-f__box--md-3 fx-f__box--lg-4
.fx-f__box .fx-f__box--8 .fx-f__box--md-5 fx-f__box--lg-4
Grid vertical alignment. Pure CSS, no JavaScript used.
A lot of text
A lot of text
A lot of text
A lot of text
A lot of text
A lot of text
.fx-f__box-sm-align-top - align to top
.fx-f__box-sm-align-middle - align to middle
.fx-f__box-sm-align-bottom - align to bottom
1 line of text