BOLT DESIGN SYSTEM

Mixins and functions:

$family: heading, body
@include bolt-font-family($family);

$size: xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
@include bolt-font-size($size);

$weight: regular, semibold, bold
@include bolt-font-weight($weight);

$breakpoint: xxsmall, xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
@include bolt-mq($breakpoint);

$size: xsmall, small, medium, large, xlarge
direction: top, right, bottom, left
@include bolt-margin($size);
@include bolt-margin-{direction}($size);
@include bolt-padding($size);
@include bolt-padding-{direction}($size);

Special spacing:

@include bolt-padding($size, squished);
@include bolt-padding($size, stretched);

$color: indigo, teal, yellow, black, white
$shade: xlight, light, medium, dark, xdark

color: bolt-color($color, $shade);

Utility classes

spacing: margin, padding
direction: top, right, bottom, left
size: xsmall, small, medium, large, xlarge

.u-bolt-{spacing}-{size}

.u-bolt-{spacing}-{direction}-{size}

.u-bolt-visuallyhidden

alignment: right, left, center
.u-bolt-text-align-{alignment}

.u-bolt-flex-grow

.u-bolt-flex-shrink

.u-bolt-flex-basis-auto

column: 1 ~ 12
breakpoint: xxsmall, xsmall, small, medium, large, xlarge, xxlarge, xxxlarge

.u-bolt-width-{column}/12 

.u-bolt-width-{column}/12@{breakpoint}