Properties
Available breakpoint modifiers; md, lg, xl and xxl
These modifiers work mobile first; for example, if you want display: block; on large and above, you would add --lg to make .block--lg
| Class | Example |
|---|---|
.block
|
A
B
C
|
.flex
|
A
B
C
|
.grid
|
A
B
C
|
.table
|
A
B
C
|
.table-cell
|
A
B
C
|
.inline
|
A
B
C
|
.inline-block
|
A
B
C
|
.no-display
|
Hides element - particularly useful with breakpoint modifiers |
.no-display-i
|
Overrides preset display class and hides element |
Alignments
| Class | Example |
|---|---|
.align--baseline
|
baseline |
.align--bottom
|
bottom |
.align--middle
|
middle |
.align--top
|
top |