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.

1. State - Hover (Optional: always ends with a colon)
2. Style Name
3. Style Name Modifier (Optional: always starts with a hyphen)
4. Divider or Equal To (Optional: if it is a style value pair use the underscore as an equals)
5. Value
6. Value Modifier (Optional: always starts with a hyphen)
7. Breakpoint (Optional: always starts with a colon)

List of the short hand for style names

The breakdown of the names for UCs follow a structured patter for easy muscle memory learning.

CSS Style	Short Name	has modifier	Uses Stepped Value
background-color	.bg		as a modifier
border-color	.br		as a modifier
border-radius	.br
border-width	.br
color	.c		as a modifier
clear	.clear
display	.
flex	.flex
float	.float
font-size	.font
font-family	.font
font-weight	.font
font-style	.font
height	.h
justify-content	.justify
margin	.m
overflow	.overflow
padding	.p
position	.
top	.t
right	.r
bottom	.b
left	.l
line-height	.lh
width	.w
max-width	.max-w

List of CSS Style Name Modifiers

The breakdown of the names for UCs follow a structured patter for easy muscle memory learning.

Style	Short Name	Example
top	-t	margin-top
bottom	-b	margin-bottom
left	-l	margin-left
right	-r	margin-right
top-right	-tr	border-top-right-radius
top-left	-tl	border-top-left-radius
bottom-right	-br	border-bottom-right-radius
bottom-left	-bl	border-bottom-left-radius

List of the positive to negative stepped values

Values

Value Postfix	Font Size	Margin, top, left, right, bottom	Padding	Line Height	border-width	Color Modifier
n5	ms(-5)	-2 * X†	N/A	N/A	N/A	mix(color, black, 90%)
n4	ms(-4)	-1 * X†	N/A	N/A	N/A	mix(color, black, 70%)
n3	ms(-3)	-.5 * X†	N/A	N/A	N/A	mix(color, black, 50%)
n2	ms(-2)	-.25 * X†	N/A	N/A	N/A	mix(color, black, 30%)
n1	ms(-1)	-.1 * X†	N/A	N/A	N/A	mix(color, black, 10%)
0	ms(0)	0	0	0	0	color @ 100%
1	ms(1)	.1 * X†	.1 * X†	1	1px	mix(color, white, 10%)
2	ms(2)	.25 * X†	.25 * X†	1.45	3px	mix(color, white, 30%)
3	ms(3)	.5 * X†	5 * X†	1.65	5px	mix(color, white, 50%)
4	ms(4)	1 * X†	1 * X†	1.75	.5rem	mix(color, white, 70%)
5	ms(5)	2 * X†	2 * X†	2	1rem	mix(color, white, 90%)

^† x = global spacing 1 rem

Pseudo DOM states

states	Short Name	CSS	Currently Used
hover	h:	:hover	Yes
active	a:	:active	Partial
visited	v:	:visited	Not Used

Alternate Values

Border Radius

Value Postfix	Border Radius Values
square	0
radius	5px or Global Radius
round	25px
circle	100%

Border Style

Value Postfix	Border Style Values
none	none
dashed	dashed
solid	solid

Display

Value Postfix	Display
none	none
block	block
inline	inline
inline-block	inline-block
flex	flex

Overflow

Value Postfix	Overflow
auto	auto
clip	clip
scroll	scroll
hidden	hidden
ellipsis	ellipsis
visible	visible
unset	unset

max-width

Value Postfix	dimension	Use case
5	5 rem
10	10rem
15	15rem
20	20rem	Small Phone Size
25	25rem
30	30rem	Short Readable Zone
35	35rem	Short Readable Zone
40	40rem	Short Readable Zone
45	45rem	Readable Zone
50	50rem	Readable Zone
55	55rem	Readable Zone
60	60rem	Readable Zone
65	65rem	Readable Zone
70	70rem	Readable Zone
75	75rem
80	80rem
85	85rem	Max Desktop Range
90	90rem	Max Desktop Range
95	95rem	Max Desktop Range

break point	Short Name	css	dimension	Currently Used
all sizes	''	min-width: 0em	0px	default
small	':sm'	min-width: 30em	480px	No
medium	':md'	min-width: 40em	640px	Yes
large	':lg'	min-width: 40em	1024px	Yes

Reserved Names

Reserved Words and Modifier Descriptors

These words should be used to describe states and generic elements of the UI and should be used instead of some variation or alternate name.

Component Name Modifier

Components styling is most are

• ** -container ** or UI Name with no modifier (Use instead of holder when items are UI based)
• ** -group ** or UI Name with no modifier (Use instead of list, holder, collection when items or repeatable Content)
• ** -item ** or UI Name with no modifier (generic child of container or group)
• ** -separator ** (a visual treatment or break between items within a container or group )

States

• show
• hide
• is-active
• is-complete
• is-disabled
• is-current
• is-selected
• focus
• success
• hover
• warning
• alert (Depreciate the use of ‘error’ for the native descriptor from foundation)
• primary
• secondary
• reverse

Colors

• State Colors
  • -success, -green
  • -warning, -orange
  • -alert, -red
  • -primary, -productColor
  • -secondary
  • -highlight
• Black
• White
• Black and White have transparencies
  • -10 alpha,
  • -20 alpha,
  • -30 alpha,
  • -40 alpha,
  • -50 alpha,
  • -60 alpha,
  • -70 alpha,
  • -80 alpha,
  • -90 alpha