Margin & Padding
Class |
Description |
.children-p-[breakpoint:text]-[unit:number: 1 through 10] |
Applies [unit] amount of padding to all child elements when
passing breakpoint |
.children-m-[breakpoint:text]-[unit:number: 1 through 10] |
Applies [unit] amount of margin to all child elements when
passing breakpoint |
.children-p-x-[breakpoint:text]-[unit:number: 1 through 10] |
Applies [unit] amount of horizontal padding to all child
elements when passing breakpoint |
.children-m-x-[breakpoint:text]-[unit:number: 1 through 10] |
Applies [unit] amount of horizontal margin to all child
elements when passing breakpoint |
.children-p-y-[breakpoint:text]-[unit:number: 1 through 10] |
Applies [unit] amount of vertical padding to all child elements
when passing breakpoint |
.children-m-y-[breakpoint:text]-[unit:number: 1 through 10] |
Applies [unit] amount of vertical margin to all child elements
when passing breakpoint |
.p-[breakpoint:text]-[unit:number: 1 through 10] |
Applies [unit] amount of padding to element when passing
breakpoint |
.m-[breakpoint:text]-[unit:number: 1 through 10] |
Applies [unit] amount of margin to element when passing
breakpoint |
.p-x-[breakpoint:text]-[unit:number: 1 through 10] |
Applies [unit] amount of horizontal padding to element when
passing breakpoint |
.m-x-[breakpoint:text]-[unit:number: 1 through 10] |
Applies [unit] amount of horizontal margin to element when
passing breakpoint |
.p-y-[breakpoint:text]-[unit:number: 1 through 10] |
Applies [unit] amount of vertical padding to element when
passing breakpoint |
.m-y-[breakpoint:text]-[unit:number: 1 through 10] |
Applies [unit] amount of vertical margin to element when
passing breakpoint |
.p-[breakpoint:text]-[side:letter: t|b|l|r]-[unit:number: 1 through
10] |
Applies [unit] amount of padding to specified side (top,
bottom, left, right) of an element when passing breakpoint |
.m-[breakpoint:text]-[side:letter: t|b|l|r]-[unit:number: 1 through
10] |
Applies [unit] amount of margin to specified side (top, bottom,
left, right) of an element when passing breakpoint |
Layout & Visibility
Class |
Description |
.max-width-center-[breakpoint:text] |
Limits max width of an element to a size of a breakpoint and
centers it with auto margin on left and right |
.[breakpoint:text]-hide |
Hides element after passing breakpoint |
.[breakpoint:text]-show |
Shows element after passing breakpoint |
.fixed-[breakpoint:text] |
Applies fixed position after passing breakpoint |
.grid-[breakpoint:text]-col-span-[span:number = 1 through 10] |
Applies column [span] to all child elements after passing
breakpoint |
.col-[breakpoint:text]-span-[span:number = 1 through 10] |
Applies column [span] to an element after passing breakpoint
|
nav.nav-[breakpoint:text] |
Shows inline navigation after passing breakpoint. Nested lists
turn into dropdowns. |
btn.btn-[breakpoint:text]-[size:text = xs | sm | md | lg | xl | xxl]
|
Applies button size after passing breakpoint |
.fixed-[breakpoint:text]
|
Sets elements postion to fixed after passing breakpoint |
.hide-[breakpoint:text]
|
Sets elements display to block after passing breakpoint |
.show-[breakpoint:text]
|
Sets elements display to none after passing breakpoint |
Typography
Class |
Description |
.typescale-[breakpoint:text]-[scale-name:text] |
Applies [scale-name] after passing breakpoint. See Type scales |
.text-[breakpoint:text]-[alignment:text = left|right|center|justify]
|
Applies text [alignment] after passing breakpoint |
Colors & Gradients
Class |
Description |
.[color:text]-[breakpoint:text] |
Applies [color] background after passing breakpoint. See colors |
.text-[color:text]-[breakpoint:text] |
Applies [color] to text after passing breakpoint. See colors |
.gradient-[breakpoint:text]-[color1:text]-[color2:text] |
Applies [color1:text]-[color2:text] gradient background after
passing breakpoint. See gradients |
Shadows
Class |
Description |
.children-[breakpoint:name]-shadow-[level:number = 1 through 10] |
adds box-shadow on all child elements of element after passing
breakpoint. |
.shadow-[breakpoint:name]-[level:number = 1 through 10] |
adds box-shadow on block elemen after passing breakpoint |