Style Guide
Buttons
Sustainability index
Components
Colors and other css variables
Value
Variable
Utility classes
Class
Examples
Info
flex
flex
This class applies the flex display
text-POSITION
text-center
POSITION can take one of the following values: left, center, right
text-POSITION--desktop
text-left--desktop
POSITION can take one of the following values: left, center, right
padding-y-X [DEPRECATED]
padding-y-10
X can taxe a value from 1 to 10, the first value of paddings is .5rem and the values are increasing by .5rem until the value of x is 5, then by 1 rem until the value of x is 10
padding-y-X--desktop [DEPRECATED]
padding-y-5--desktop
X can taxe a value from 1 to 10, the first value of paddings is 1rem and the values are increasing by 1rem until the value of x is 5, then by 3 rem until the value of x is 10
Spacing
The classes are named using the format
{property}{sides}-{size}
for mobile and up, and {property}{sides}-{breakpoint}-desktop
for desktop only
Where property is one of:
-
m
- for classes that setmargin
-
p
- for classes that setpadding
Where sides is one of:
t
- for classes that set*-top
b
- for classes that set*-bottom
l
- for classes that set*-left
r
- for classes that set*-right
x
- for classes that set both*-left
and*-right
y
- for classes that set both*-top
and*-bottom
Where size is a value from 0
to 8
or auto
for classes that set
margin auto
Examples:
.my-1
.py-3
.mx-auto
.pt-0-desktop
.mb-3-desktop