Legacy Design Agency — Version 2
Structure & Utility
Utility Classes
hide
This element is hidden
show-tablet
show-mobile-landscape
show-mobile-portrait
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen
aspect-ratio-3-4
aspect-ratio-1-1
aspect-ratio-4-3
aspect-ratio-16-9
aspect-ratio-2-1
Structure Classes
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-xxlarge
48px top / 48px bottom
3rem top / 3rem bottom
padding-section-xhuge
80px top / 80px bottom
5rem top / 5rem bottom
padding-section-giant
128px top / 128px bottom
8rem top / 8rem bottom
padding-section-mega
160px top / 160px bottom
10rem top / 10rem bottom
button-group
Grid Classes
grid-column-02
grid-column-03
grid-column-04
grid-column-05
grid-column-06
Grid Spacing Classes
grid-1-rem
grid-2-rem
grid-3-rem
grid-4-rem
grid-5-rem
grid-6-rem
Max widths
max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Paddings
Direction Classes
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Size Classes
padding-0
padding-no-bottom
padding-no-top
padding-tiny
2px
0.125rem
padding-xxsmall
4px
0.25rem
padding-xsmall
8px
0.5rem
padding-small
16px
1rem
padding-medium
20px
1.25rem
padding-large
24px
1.5rem
padding-xlarge
32px
2rem
padding-xxlarge
48px
3rem
padding-huge
64px
4rem
padding-xhuge
80px
5rem
padding-xxhuge
96px
6rem
padding-giant
112px
7rem
padding-xgiant
128px
8rem
padding-xxgiant
144px
9rem
padding-mega
160px
10rem
padding-xmega
176px
11rem
padding-xxmega
192px
12rem
Margins
Utility spacing system - padding classes. [margin-direction] + [margin-size].
Direction Classes
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size Classes
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3