Source: dist/css/acc_uc.css, line 181
2.1 Anatomy
Anatomy of a Utility Class
The breakdown of the names for UCs follow a structured patter for easy muscle memory learning.All of the Style Names follow this ordered pattern of construction.
- State - Hover (Optional: always ends with a colon)
- Style Name
- Style Name Modifier (Optional: always starts with a hyphen)
- Divider or Equal To (Optional: if it is a style value pair use the underscore as an equals)
- Value
- Value Modifier (Optional: always starts with a hyphen)
- Breakpoint (Optional: always starts with a colon)
Example 1
Make the background color primary modified by the shading of negative 2 when the cursor has hovered over it.
I have the class h:bg_primary-n2
Long Name
hover:
background-color
_
primary
Modify Negative 2
Utility Class
h:
bg
_
primary
-n2
- 'h' => Interaction State
- 'bg' => Style Name
- `_` => Value Divider think of this as an equal mark
- `primary` => Value
- `n2` => Modifier Values most follow a [n5 , n4, n3, n2, n1, {0 is default} , 1, 2, 3, 4, 5, color names, or shade values]
- `lg`=> Breakpoint Value
Long Name Example 2
Add 1 rem of padding to the top when screen is medium and up
padding
top
Equals
value 4 = 1rem
at the medium breakpoint
Utility Class Example
p
-t
_
4
:md