Layout
Override displays, floats and more.
Displays
m<side>--<value>
| Class | Property & Value |
|---|---|
d--none | display: none |
d--block | display: block |
d--inline-block | display: inline-block |
d--inline | display: inline |
d--table | dislay: table |
d--table-row | display: table-row |
d--table-cell | display: table-cell |
d--flex | display: flex |
d--inline-flex | display: inline-flex |
Floats
fl--<value>
| Class | Property & Value |
|---|---|
f--none | float: none |
f--l | float: left |
f--r | float: right |
Overflow
of<side>--<value>
| Class | Property & Value |
|---|---|
of--auto | overflow: auto |
of--hidden | overflow: hidden |
of--visible | overflow: visible |
of--scroll | overflow: scroll |
ofx--auto | overflow-x: auto |
ofy--auto | overflow-y: auto |
ofx--scroll | overflow-x: scroll |
ofy--scroll | overflow-y: scroll |
Position
m<side>--<value>
| Class | Property & Value |
|---|---|
pos--static | position: static |
pos--fixed | position: fixed |
pos--absolute | position: absolute |
pos--relative | position: relative |
pos--sticky | position: stickytop: 1rem |
Visibility
<property>--<value>
| Class | Property & Value |
|---|---|
visible | visibility: visible |
invisible | visibility: hidden |
hidden | display: none |
Z-Index
z--<value>
| Class | Property & Value |
|---|---|
z--0 | z-index: 0 |
z--10 | z-index: 10 |
z--20 | z-index: 20 |
z--30 | z-index: 30 |
z--40 | z-index: 40 |
z--50 | z-index: 50 |
z--auto | z-index: auto |