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