Getting Started
Cheatsheet
This is a list of all built-in functions, mixins and modules.
Modules #
Alert
alert-{variant} alert alert-info alert-success alert-error
Alignment
a-{variant} a-left a-center a-right a-left-sm a-center-sm a-right-sm
Background
bg-{color} gr-{color} bg-light bg-dark bg-primary bg-aluminum bg-silver bg-platinum
Badge
badge-{variant} badge-{scale} badge badge-info badge-positive badge-important badge-dark badge-light badge-large badge-huge badge-mega
Border
b-{color} b-{scale} b-{side} b-dark-7 b-dark-10 b-light-25 b-primary b-{color}-sm b-2 b-4 b-{scale}-sm b-top b-bottom b-left b-right b-{side}-sm b-off b-off-sm
Brand
brand
Breadcrumb
breadcrumb-{scale} breadcrumb-{variant} breadcrumb breadcrumb-bullet breadcrumb-path
Button
button-{variant} button-{scale) button button-primary button-light button-small button-large
Caption
caption-{color} caption-{variant} caption-{scale) caption caption-info caption-positive caption-important caption-dark caption-light caption-semibold caption-strong caption-caps caption-small
Card
card
Caret
caret-{variant} caret / caret-down caret-up caret-left caret-right
Centered
centered centered-sm uncentered uncentered-sm
Close
close-{variant} close
Container
container-{scale} container-{column} container (base) container-small container-medium container-large container-content container-full container-1 ... container-12 always: max-width: none on small screens
Edges
edges-{scale} edges (base) edges-off edges-sm edges-{scale}-sm edges-off-sm
Display
hidden hidden-sm hidden-md hidden-lg hidden-print visible visible-sm visible-md visible-lg visible-print visually-hidden
Embed
embed-responsive
Flex
flex flex-nowrap flex-auto flex-off flex-shrink-off flex-top flex-middle flex-bottom flex-baseline flex-start flex-end flex-center flex-between flex-around flex-column flex-overflow flex-layout flex-content flex-sidebar-{scale} flex-row-sm flex-column-sm flex-off-sm flex-wrap-sm flex-top-sm flex-middle-sm flex-baseline-sm flex-bottom-sm flex-start-sm flex-end-sm flex-center-sm flex-between-sm flex-around-sm
Form
form form-item from-buttons form-checkboxes label.checkbox hint hint-req hint-error hint-success
Grid
grid grid-auto grid-gapless grid-gutterless grid-{columns} grid-{columns}-sm grid-{columns}-md gap-{spacing} gap-{spacing}-sm gap-{spacing}-md gutter-{spacing} gutter-{spacing}-sm gutter-{spacing}-md column column-{size} column-offset-{size} offset always off on small screens
Heading
heading-{scale} heading-{color} heading-{variant} heading-giga heading-mega heading-huge heading-large heading-medium heading-small heading-micro heading-eyebrow heading-moderated heading-muted heading-primary heading-light heading-light-moderated heading-thin heading-normal heading-semibold heading-heavy
Icon
icon-{variant} icon-{size} icon-{color} icon-text icon-12 icon-14 icon-16 icon-20 icon-24 icon-32 icon-48 icon-64 icon-{size}-sm icon-dark icon-light icon-primary icon-box-{size} icon-box-{size}-sm
Image
image-{variant} image-overlay-{color} image-{scale} image-cover image-overlay image-overlay-light image-overlay-dark image-16 image-24 image-32 image-48 image-64 image-128
Input
input-{state} input-{color} input-{scale} input-error input-light input-large input-addon input-addon-large input-addon-item inner-addon inner-addon-large inner-addon-item inner-addon-clickable inner-addon-right inner-addon-both
Label
label-{variant} label-{scale} label label-info label-positive label-important label-dark label-light label-caps label-large
Line
line-{variant} line
Link
link-{color} link-{variant} link-primary link-dark link-muted link-moderated link-light link-light-moderated link-semibold link-strong link-italic link-block link-ghost link-stretched link-underline link-underline-off
List
list-{variant} list list-stacked list-bordered list-numbered list-numbered-right list-inline list-unstyled list-checkmark list-dashed
Menu
menu-{scale} menu-{color} menu-{variant} menu menu-small menu-medium menu-muted menu-primary menu-light menu-pills menu-stacked menu-numbered menu-numbered-right menu-semibold menu-strong menu-caps menu-underline menu-underline-off
Nav
nav-{scale} nav-{color} nav-{variant} nav nav-small nav-muted nav-primary nav-light nav-centered nav-right nav-full nav-pills nav-tabs nav-semibold nav-strong nav-underline nav-underline-off nav-overflow-sm nav-menu-sm nav-uncentered-sm
Navbar
navbar
Offset
o-{side}-{spacing} o-left-{spacing} o-right-{spacing} o-top-{spacing} o-bottom-{spacing} o-{side}-{spacing}-sm o-off o-off-sm o-left-off-sm o-right-off-sm o-top-off-sm o-bottom-off-sm
Pagination
pagination-{scale} pagination
Position
position-relative position-over
Rounded
r-{scale} r-{side}-{scale} r-{variant} r-small r-base r-large r-huge r-{scale}-sm r-top-{scale} r-bottom-{scale} r-left-{scale} r-right-{scale} r-{side}-{scale}-sm r-off r-circle r-off-sm r-circle-sm
Row
row row-{spacing}
Shadow
sh-{scale} sh-{color}-{scale} sh-{variant} sh-100 (neutral) sh-150 sh-200 sh-250 sh-300 sh-350 sh-{scale}-sm sh-off sh-off-sm
Sizing
w-{scale} w-{variant} w-20 w-25 w-30 w-33 w-40 w-50 w-60 w-67 w-70 w-75 w-80 w-100 w-off w-off-sm
Spacing
p-{size} px-{size} py-{size} pt-{size} pb-{size} pl-{size} pr-{size} p{side}-off p{side}-{size}-sm p{side}-off-sm mx-{size} my-{size} mt-{size} mb-{size} ml-{size} mr-{size} m{side}-off mt-n{size} (negative) mb-n{size} ml-n{size} mr-n{size} mt-auto mb-auto ml-auto mr-auto m{side}-{size}-sm m{side}-n{size}-sm m{side}-auto-sm m{side}-off-sm
Stack
stack stack-{spacing} stack-{border} stack-dark-7 stack-dark-10 stack-light-25 stack-primary
Table
table-bordered table-striped table-scrollable
Text
text-{scale} text-{color} text-gr-{color} text-{variant} text-giga text-huge text-large text-medium text-small text-tiny text-micro text-dark text-moderated text-muted text-success text-error text-light text-light-moderated text-light-muted text-primary text-thin text-semibold text-strong text-italic text-mono text-caps text-nowrap
Functions #
type-size
font-size: type-size(text, regular); font-size: type-size(text, regular, sm);
type-line
line-height: type-line(text, regular); line-height: type-line(text, regular, sm);
type-line-alt
line-height: type-line-alt(text, regular); line-height: type-line-alt(text, regular, sm);
type-space
margin-bottom: type-space(tag-to-tag);
palette
$color: palette(black); $color: palette(neutral, darker);
palette-dark
$color: palette-dark(black); $color: palette-dark(neutral, darker);
color
color: color(dark); color: color(text, default); color: color(link, dark, hover);
level
z-index: level(content);
radius
border-radius: radius(base);
shadow
box-shadow: shadow(default, 100);
scale
$icon-scale: scale(icon); border-width: scale(border, 4);
variant
$alert: variant(alert, default); $line-color: variant(line, default, color);
Mixins #
Background
background($color) background($color-map) background-gradient($color-map, $deg) background-gradient($color-map, radial) background-image($file1, $file2, $width, $height)
Breakpoint
for-lg { ... } for-md { ... } for-sm { ... } not-sm { ... } breakpoint($min: 768px) { ... } breakpoint(768px, 1024px) { ... } breakpoint($max: 1024px) { ... }
Generators
generate-type(modulename); generate-type(modulename, '.modulename-item'); generate-variants('.modulename', modulename); generate-variants('.modulename', modulename, nested); // nested (boolean true)
Outset
outset-both(40px) outset-left(40px) outset-right(40px) outset-none
Text
dropcap($size, $line, $lines)
Utility
transition transition(all .2s ease-in-out); transition(opacity 1s ease-in, width .2s ease-in); centered uncentered stretched