Example
Combo Classes
Class
Function
Description
.xsm
.sm
.md
.lg
Changes container width
Use when you would like a container with a different width.
Responsive Overrides
General
.@m xlg
.@m lg
.@m md
.@m sm
.@m xsm
@media xlg (1280+)
@media lg (desktop)
@media md (tablet)
@media sm (phone horizontal)
@media xsm (phone portrait)
Use these class tags at the start of your responsive overrides. For example if you wanted to hide a div on tablet if would look like this: .@m md hide
Class
Function
Description
@M LG bleed
@M md bleed
@M sm bleed
@M xsm bleed
Removes horizontal padding on each side of container
Use this combo class when you would like the container to bleed to the page edges at different screen sizes.
@M LG grow--X
@M LG shrink--X
Overrides and changes container width
Use this combo class when you would like the container to change widths at different screen sizes.
Example
Combos & Overrides
Name
Styles
Use Case
.xsm
.sm
.md
.lg
Changes sections vertical padding amount
Use when you would like equal height on top and bottom of a page section.
.border--top
.border--bottom
Adds a 1px border
Use this class to easily add a border to a section area.
.collaspe top
.collaspe bot
Reduces padding
Use this modifier if you'd like to remove padding from either the top of bottom of a section.
.Overflow n
Sets overflow hidden
Use to hide absolute elements overflowing outside a section area.
.@m xsm shrink
.@m xsm grow
.@m xsm maintain
Make size adjustments at different breakpoints
Use this modifier if you'd like adjust padding at a particular breakpoint. For example @M XSM (At portrait phone size) Grow (Make padding larger than default).
.@m lg
.@m md
.@m sm
.@m xsm
Make adjustments are different breakpoints
Use this modifier if you'd like to make a change at a particular breakpoint. LG = Desktop, MD = Tablet, SM = Phone horizontal, XSM = Phone Vertical.