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-{color}-sm b-{scale} b-{scale}-sm b-{side} b-{side}-sm b-dark-low b-dark-medium b-light-low b-primary b-2 b-4 b-top b-bottom b-left b-right b-off b-off-sm

Brand

brand

Breadcrumb

breadcrumb-{variant} breadcrumb breadcrumb-bullet breadcrumb-path

Button

button-{variant} button-{scale) button button-primary button-dark button-light button-light-outline button-round 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-{variant} container-small (400px) container-content (800px) container-medium (960px) container (base, 1112px) container-large (1200px) container-full (100%) container-1 ... container-12 container-crop container always: max-width: none on small screens

Edges

edges-{scale} edges-{scale}-sm edges (base, 5rem) edges-off edges-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 (base, 300px) 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

Grid

grid grid-auto grid-gapless grid-gutterless grid-{columns} grid-{columns}-sm grid-{columns}-md grid-1 ... grid-12 gap-{spacing} gap-{spacing}-sm gap-{spacing}-md gutter-{spacing} gutter-{spacing}-sm gutter-{spacing}-md column column-{size} column-1 ... column-12 column-offset-{size} column-offset-1 ... column-offset-12 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

Hint

hint hint-req hint-error hint-success

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 icon-box-12 ... icon-box-64

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-{variant} input-{scale} input-error input-light input-round input-small input-large input-addon input-addon-large input-addon-item

Label

label-{variant} label-{scale} label label-info label-positive label-important label-dark label-light 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-inline list-unstyled list-checkmark list-dashed list list-stacked list-bordered list-numbered list-numbered-right

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-underline menu-underline-off

Nav

nav-{scale} nav-{color} nav-{variant} nav nav-small nav-muted nav-primary nav-light nav-pills nav-points nav-switcher nav-tabs nav-centered nav-right nav-full 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-{side}-{spacing}-sm o-left-{spacing} o-right-{spacing} o-top-{spacing} o-bottom-{spacing} 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-{scale}-sm r-{side}-{scale} r-{side}-{scale}-sm r-{variant} r-small r-base r-large r-huge r-top-{scale} r-bottom-{scale} r-left-{scale} r-right-{scale} r-off r-circle r-off-sm r-circle-sm

Row

row row-{spacing}

Shadow

sh-{scale} sh-{scale}-sm sh-{color}-{scale} sh-{variant} sh-100 (neutral) sh-150 sh-200 sh-250 sh-300 sh-350 sh-off sh-off-sm

Sizing

w-{scale} w-{variant} h-{scale} h-{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 (width auto) w-off-sm h-{size} (spacing scale) h-{size}-sm h-full (100%) vh-full (viewport) h-off (height auto) h-off-sm

Spacing

p-{size} px-{size} py-{size} pt-{size} pb-{size} pl-{size} pr-{size} p{side}-{size}-sm p{side}-off p{side}-off-sm mx-{size} my-{size} mt-{size} mb-{size} ml-{size} mr-{size} m{side}-{size}-sm m{side}-off m{side}-off-sm mt-n{size} (negative) mb-n{size} ml-n{size} mr-n{size} m{side}-n{size}-sm mt-auto mb-auto ml-auto mr-auto m{side}-auto-sm

Stack

stack stack-{spacing} stack-{border} stack-dark-low stack-dark-medium stack-light-low stack-primary

Table

table-bordered table-striped table-scrollable

Text

text-{scale} text-{color} text-{variant} grt-{color} (gradient) 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);

palette

$color: palette(black); $color: palette(neutral, darker);

color

color: color(dark); color: color(text, default); color: color(link, dark, hover);

scale

$icon-scale: scale(icon); border-width: scale(border, 4);

Mixins #

Background

background-image($file1, $file2, $width, $height)

Breakpoint

for-lg { ... } for-md { ... } for-sm { ... } not-sm { ... } breakpoint($min: 768px) { ... } breakpoint(768px, 1024px) { ... } breakpoint($max: 1024px) { ... }

Outset

outset-both(40px) outset-left(40px) outset-right(40px) outset-none

Text

dropcap($size, $line, $lines) dropcap(21px, 1.5, 3)

Utility

transition transition(all .2s ease-in-out); transition(opacity 1s ease-in, width .2s ease-in); centered uncentered stretched