Awesome

Quantum CSS

“Everything should be made as simple as possible, but no simpler.” – Albert Einstein 1

Preface

Quantum CSS is an atomic CSS library written in SCSS.

You won’t need to write any CSS rules and media queries while using Quantum CSS. Creating highly responsive UIs becomes pleasure while extension pattern provides means of controlled customization. You can create molecules with avaialble atoms using @extend.

Here is a sample button component with rounded corners, hover and focus transition animations (which are disabled on small screens to provide better experience on touch devices):

<button class="btn btn-fb" type="button">
  <!-- Content -->
</button>

.btn {
  @extend .px15, .h40; // Size
  @extend .bds-s, .bdw1, .bdr5; // Border style solid, border width 1px and rounded corners
  @extend .trp-c, .trd200ms; // Color transitions

  &-fb  { @extend .bgc-fb, .c-w, .bdc-tt, .SM_bgc-dfb-hf } // Facebook
  &-tw  { @extend .bgc-tw, .c-w, .bdc-tt, .SM_bgc-dtw-hf } // Twitter
}

Benefits of using @extend approach:

Highly standardized styles. Limited amount of building blocks allows you to have more order in your design.
Stylesheet compilation time errors. Build fails if unknown atoms are used.
Easy to remember class names. Atoms naming convention was heavily inspired by Emmet, and most of the time abbreviations are first letters of words that property or value names consist of.

Naming Conventions

Value Aliases
Color Values
Unit-less Properties

Breakpoints
Pseudo-classes and Pseudo-elements
Grid System

Containers
Rows
Columns
Column Ordering

Atom Index

Name Pattern
Background
background-color
background-attachment
background-clip
background-image
background-origin
background-repeat
background-size

background-position
background-position-x
background-position-y

fill
Border
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color

border-width
border-top-width
border-right-width
border-bottom-width
border-left-width

border-style
border-top-style
border-right-style
border-bottom-style
border-left-style

border-radius
border-top-right-radius
border-top-left-radius
border-bottom-right-radius
border-bottom-left-radius
Images
object-fit
Transforms
transform
Flexible Box Layout
flex-direction
flex-wrap
flex-grow
flex-shrink
flex-basis
justify-content
align-items
align-content
align-self
order
Positioning
float
clear
position
top
right
bottom
left
z-index
Fonts
font-size
line-height
font-family
font-weight
font-style
font-variant
font-size-adjust
font-stretch
-webkit-font-smoothing
-moz-osx-font-smoothing
Transitions
transition-property
transition-duration
transition-timing-function
Text
letter-spacing
overflow-wrap
text-align
text-align-last
text-indent
text-decoration
text-transform
white-space
word-break
word-wrap
Lists and Counters
list-style
list-style-position
list-style-type
Colors
color
opacity
Box Model
box-sizing
height
width
margin
padding
overflow
overflow-x
overflow-y
-webkit-overflow-scrolling
visibility
Page
page-break-before
page-break-inside
page-break-after
User Interface
cursor
resize
text-overflow
user-select
Table
border-collapse
caption-side
empty-cells
table-layout
vertical-align
Miscellaneous
display

License

Naming Conventions

In Quantum CSS every class name consists of four parts in given order:

Optional breakpoint name: SM, MD etc.
Property abbreviation: <a href="#border-color"><code>bdtc</code></a>, <a href="#border-color"><code>ws</code></a> etc.
Value abbreviation: w, 100p, 360d etc.
Optional pseudo-class or pseudo-element modifier: hf, h etc.

You can configure separators between each parts of class name with following variables:

$breakpoint-sep define separator between breakpoint name and property abbreviation.
$literal-sep and $ordinal-sep define separators that are inserted between property name and literal value abbreviation or ordinal one respectively.
$pseudo-sep defines separator between pseudo modifier from value abbreviation.

Value Aliases

Aliases for commonly used values:

p → %
e → em
x → ex
r → rem
d → deg
t → turn

These aliases are used instead of full units:

<a href="#width"><code>w100p</code></a> → width: 100%
<a href="#height"><code>SM_mah42</code></a> → @media (min-width: 576px) { max-height: 42px }

Color Values

Names for colors are used fo increase readability. By default, Tango palette is used for every color-related atom. You can specify your own palette overriding variables in _variables.scss.

Greyscale	Value

White w | #fff
Grey 15% g1 | #eeeeec
Grey 30% g2 | #d3d7cf
Grey 45% g3 | #babdb6
Grey 60% g4 | #888a85
Grey 75% g5 | #555753
Grey 90% g6 | #2e3436
Black b | #000

Color	Light `l`	Medium	Dark `d`

Yellow y | #fce94f | #edd400 | #c4a000
Orange o | #fcaf3e | #f57900 | #ce5c00
Chocolate c | #e9b96e | #c17d11 | #8f5902
Green g | #8ae234 | #73d216 | #4e9a06
Navy n | #729fcf | #3465a4 | #204a87
Purple p | #ad7f8a | #75507b | #5c3566
Red r | #ef2929 | #cc0000 | #a40000

CSS-literal colors:

cc → currentColor
t → transparent
i → inherit

Generated atom examples:

<a href="#background-color"><code>SM_bgc-dg</code></a> → background-color: #4e9a06 Dark green
<a href="#border-color"><code>bdrc-w</code></a> → border-right-color: white
<a href="#color"><code>LG_c-b</code></a> → color: black

Unit-less Properties

Some CSS properties are defined as unit-less, e.g. no unit suffix will be outputted:

<a href="#line-height"><code>lh1</code></a> → line-height: 1
<a href="#font-weight"><code>fw400</code></a> → font-weight: 400
<a href="#opacity"><code>op37</code></a> → opacity: 0.37

Breakpoints

One of the most powerful features of Quantum is breakpoint-based media queries.

<a name="pseudos"></a>Pseudo-classes and Pseudo-elements

You can configure set of pseudo-classes and pseudo-elements for which atoms are generated via $pseudos. To emit disjunction of pseudos use comma-separated list.

$pseudos: (hf: (hover, focus));

.c-w-hf:hover,
.c-w-hf:focus {
  color: white;
}

Space-separated list defines selector conjunction:

$pseudos: (eh: empty hover);

.c-w-eh:empty:hover {
  color: white;
}

Combine those different list types for precise class targeting:

$pseudos: (foo: (active hover, active focus));

.c-w-foo:active:hover,
.c-w-foo:active:focus {
  color: white;
}

Grid System

<a name="grid-containers"></a>Containers <code>g</code>

As well as in Bootstrap Containers are the most basic layout element and are required when using grid system. Use <code>g-f</code> to create a fixed-width centered responsive layout of columns.

While containers can be nested, most layouts do not require a nested container.

<div class="g g-f">
  <!-- Fixed-width grid conteiner -->
</div>

Widths of fixed-width container are stored in $grid-widths.

<a name="grid-rows"></a>Rows <code>gr</code>

Rows are horizontal groups of columns that ensure your columns are lined up properly.

<div class="g g-f">
  <div class="gr">
    <!-- Place columns here -->
  </div>
</div>

<a name="grid-columns"></a>Columns <code>gc</code>

Content should be placed within columns, and only columns may be immediate children of rows.

Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So if you want three equal-width columns, you’d use <code>SM_gc4</code>. You can change number of columns in grid altering $grid-col-count.

Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.

Columns have horizontal padding to create the gutters between individual columns. Gutters can be configured per every breakpoint via $grid-gutters.

<div class="g g-f">
  <div class="gr">
    <div class="gc12 SM_gc6">
      <!-- Place content here -->
    </div>
  </div>
</div>

Column Ordering

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls.

Move columns to the right using <code>[<a href="#breakpoints">breakpoint</a>_]go(0…12/1)</code> classes. These classes increase the left margin of a column by specified number of columns. For example, MD_go4 moved MD_gc4 over four columns.

Change the order of columns by relatively shifting them to the left with <code>[<a href="#breakpoints">breakpoint</a>_]gsl(0…12/1)</code> or to the right with <code>[<a href="#breakpoints">breakpoint</a>_]gsr(0…12/1)</code> classes.

<div class="g g-f">
  <div class="gr">
    <div class="gc12 SM_gc6 SM_go3">
      <!-- Place content here -->
    </div>
  </div>
</div>

Atom Index

Values for each atom are listed in the order they are listed in generated CSS.

Name Pattern

(1…10/2) Range of possible values from 1 to 10 with step 2.
[breakpoint_] and [-pseudo] Optional breakpoint and pseudo-element or pseudo-class.
{key} and {value} Placeholders for map key and map value.

Example [breakpoint_]fw(100…900/100) expands to fw100, fw200 … SM_fw100, SM_fw200 … LG_fw900.

Background

`background-color`

<code>[<a href="#breakpoints">breakpoint</a>_]bgc{key}[-<a href="#pseudos">pseudo</a>]</code> → background-color: {value}

Specify mapping in <code><a href="scss/_variables.scss">$background-colors</a>: (key: value)</code>.

`background-attachment`

<code>bga-f</code> → fixed
<code>bga-s</code> → scroll

`background-clip`

<code>bgcp-bb</code> → border-box
<code>bgcp-pb</code> → padding-box
<code>bgcp-cb</code> → content-box
<code>bgcp-i</code> → inherit

`background-image`

<code>bgi-n</code> → none
<code>bgi-i</code> → inherit

`background-origin`

<code>bgo-bb</code> → border-box
<code>bgo-pb</code> → padding-box
<code>bgo-cb</code> → content-box

`background-repeat`

<code>bgr-n</code> → no-repeat
<code>bgr-x</code> → repeat-x
<code>bgr-y</code> → repeat-y
<code>bgr-s</code> → space
<code>bgr-r</code> → round

`background-size`

<code>bgz-a</code> → auto
<code>bgz-ct</code> → contain
<code>bgz-cv</code> → cover

`background-position`

<code>bgp-tc</code> → top center
<code>bgp-tl</code> → top left
<code>bgp-cr</code> → center right
<code>bgp-cc</code> → center center
<code>bgp-cl</code> → center left
<code>bgp-br</code> → bottom right
<code>bgp-bc</code> → bottom center
<code>bgp-bl</code> → bottom left

`background-position-x`

<code>bgpx-r</code> → right
<code>bgpx-c</code> → center
<code>bgpx-l</code> → left

`background-position-y`

<code>bgpy-t</code> → top
<code>bgpy-c</code> → center
<code>bgpy-b</code> → bottom

`fill`

<code>[<a href="#breakpoints">breakpoint</a>_]fi{key}[-<a href="#pseudos">pseudo</a>]</code> → fill: {value}

Specify mapping in <code><a href="scss/_variables.scss">$background-colors</a>: (key: value)</code>.

Border

`border-color`

<code>[<a href="#breakpoints">breakpoint</a>_]bdc{key}[-<a href="#pseudos">pseudo</a>]</code> → border-color: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdxc{key}[-<a href="#pseudos">pseudo</a>]</code> = <code>bdlc{key}</code>, <code>bdrc{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]bdyc{key}[-<a href="#pseudos">pseudo</a>]</code> = <code>bdtc{key}</code>, <code>bdbc{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]bdtc{key}[-<a href="#pseudos">pseudo</a>]</code> → border-top-color: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdbc{key}[-<a href="#pseudos">pseudo</a>]</code> → border-bottom-color: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdrc{key}[-<a href="#pseudos">pseudo</a>]</code> → border-right-color: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdlc{key}[-<a href="#pseudos">pseudo</a>]</code> → border-left-color: {value}

Specify mapping in <code><a href="scss/_variables.scss">$border-colors</a>: (key: value)</code>.

`border-width`

<code>[<a href="#breakpoints">breakpoint</a>_]bdw{key}</code> → border-width: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdxw{key}</code> = <code>bdlw{key}</code>, <code>bdrw{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]bdyw{key}</code> = <code>bdtw{key}</code>, <code>bdbw{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]bdtw{key}</code> → border-top-width: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdbw{key}</code> → border-bottom-width: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdrw{key}</code> → border-right-width: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdlw{key}</code> → border-left-width: {value}

Specify mapping in <code><a href="scss/_variables.scss">$border-widths</a>: (key: value)</code>.

`border-style`

<code>[<a href="#breakpoints">breakpoint</a>_]bds{key}</code> → border-style: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdxs{key}</code> = <code>bdls{key}</code>, <code>bdrs{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]bdys{key}</code> = <code>bdts{key}</code>, <code>bdbs{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]bdts{key}</code> → border-top-style: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdbs{key}</code> → border-bottom-style: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdrs{key}</code> → border-right-style: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdls{key}</code> → border-left-style: {value}

Specify mapping in <code><a href="scss/_variables.scss">$border-styles</a>: (key: value)</code>.

By default, all available border styles are included. Border style atoms are emitted for every breakpoint what can cause significant increase of outputted CSS file. Be sure to remove unused border styles in order to reduce file size.

`border-radius`

<code>[<a href="#breakpoints">breakpoint</a>_]bdr{key}</code> → border-radius: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdtr{key}</code> = <code>bdtlr{key}</code>, <code>bdtrr{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]bdrr{key}</code> = <code>bdtrr{key}</code>, <code>bdbrr{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]bdbr{key}</code> = <code>bdblr{key}</code>, <code>bdbrr{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]bdlr{key}</code> = <code>bdtlr{key}</code>, <code>bdblr{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]bdtrr{key}</code> → border-top-right-radius: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdtlr{key}</code> → border-top-left-radius: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdbrr{key}</code> → border-bottom-right-radius: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]bdblr{key}</code> → border-bottom-left-radius: {value}

Specify mapping in <code><a href="scss/_variables.scss">$border-radiuses</a>: (key: value)</code>.

Images

`object-fit`

<code>of-n</code> → none
<code>of-f</code> → fill
<code>of-ct</code> → contain
<code>of-cv</code> → cover
<code>of-sd</code> → scale-down
<code>of-i</code> → inherit

Transforms

`transform`

<code>ts-n</code> → none
<code>ts-i</code> → inherit
<code>tsr(45d…360/45d)</code> → transform: rotate(45deg)…rotate(360deg)
<code>tsr(-45d…-360/-45d)</code> → transform: rotate(-45deg)…rotate(-360deg)
<code>tss(0…200/25)</code> → transform: scale(0)…scale(2)

Flexible Box Layout

These shortcuts are available if display atom is included.

<code>[<a href="#breakpoints">breakpoint</a>_]fx-r</code> = <a href="#display"><code>d-fx</code></a>, <code>fxd-r</code>
<code>[<a href="#breakpoints">breakpoint</a>_]fx-rr</code> = <a href="#display"><code>d-fx</code></a>, <code>fxd-rr</code>
<code>[<a href="#breakpoints">breakpoint</a>_]fx-c</code> = <a href="#display"><code>d-fx</code></a>, <code>fxd-c</code>
<code>[<a href="#breakpoints">breakpoint</a>_]fx-cr</code> = <a href="#display"><code>d-fx</code></a>, <code>fxd-cr</code>

`flex-direction`

<code>[<a href="#breakpoints">breakpoint</a>_]fxd-r</code> → row
<code>[<a href="#breakpoints">breakpoint</a>_]fxd-rr</code> → row-reverse
<code>[<a href="#breakpoints">breakpoint</a>_]fxd-c</code> → column
<code>[<a href="#breakpoints">breakpoint</a>_]fxd-cr</code> → column-reverse

`flex-wrap`

<code>[<a href="#breakpoints">breakpoint</a>_]fxw-n</code> → nowrap
<code>[<a href="#breakpoints">breakpoint</a>_]fxw-w</code> → wrap
<code>[<a href="#breakpoints">breakpoint</a>_]fxw-wr</code> → wrap-reverse

<code>[<a href="#breakpoints">breakpoint</a>_]fxb-a</code> → auto
<code>[<a href="#breakpoints">breakpoint</a>_]fxb-mac</code> → max-content
<code>[<a href="#breakpoints">breakpoint</a>_]fxb-mic</code> → min-content
<code>[<a href="#breakpoints">breakpoint</a>_]fxb-fc</code> → fit-content
<code>[<a href="#breakpoints">breakpoint</a>_]fxb-c</code> → content

`justify-content`

<code>[<a href="#breakpoints">breakpoint</a>_]jc-fs</code> → flex-start
<code>[<a href="#breakpoints">breakpoint</a>_]jc-fe</code> → flex-end
<code>[<a href="#breakpoints">breakpoint</a>_]jc-c</code> → center
<code>[<a href="#breakpoints">breakpoint</a>_]jc-sb</code> → space-between
<code>[<a href="#breakpoints">breakpoint</a>_]jc-sa</code> → space-around

`align-items`

<code>[<a href="#breakpoints">breakpoint</a>_]ai-fs</code> → flex-start
<code>[<a href="#breakpoints">breakpoint</a>_]ai-fe</code> → flex-end
<code>[<a href="#breakpoints">breakpoint</a>_]ai-c</code> → center
<code>[<a href="#breakpoints">breakpoint</a>_]ai-bs</code> → baseline
<code>[<a href="#breakpoints">breakpoint</a>_]ai-s</code> → stretch

`align-content`

<code>[<a href="#breakpoints">breakpoint</a>_]ac-fs</code> → flex-start
<code>[<a href="#breakpoints">breakpoint</a>_]ac-fe</code> → flex-end
<code>[<a href="#breakpoints">breakpoint</a>_]ac-c</code> → center
<code>[<a href="#breakpoints">breakpoint</a>_]ac-sb</code> → space-between
<code>[<a href="#breakpoints">breakpoint</a>_]ac-sa</code> → space-around
<code>[<a href="#breakpoints">breakpoint</a>_]ac-s</code> → stretch

`align-self`

<code>[<a href="#breakpoints">breakpoint</a>_]as-a</code> → auto
<code>[<a href="#breakpoints">breakpoint</a>_]as-fs</code> → flex-start
<code>[<a href="#breakpoints">breakpoint</a>_]as-fe</code> → flex-end
<code>[<a href="#breakpoints">breakpoint</a>_]as-c</code> → center
<code>[<a href="#breakpoints">breakpoint</a>_]as-b</code> → baseline
<code>[<a href="#breakpoints">breakpoint</a>_]as-s</code> → stretch

`order`

<code>[<a href="#breakpoints">breakpoint</a>_]ord(0…10/1)</code> → order: 0…10

Positioning

`float`

<code>[<a href="#breakpoints">breakpoint</a>_]fl-l</code> → left
<code>[<a href="#breakpoints">breakpoint</a>_]fl-r</code> → right
<code>[<a href="#breakpoints">breakpoint</a>_]fl-n</code> → none

`clear`

<code>cl-l</code> → left
<code>cl-r</code> → right
<code>cl-b</code> → both
<code>cl-n</code> → none

`position`

<code>pos-s</code> → static
<code>pos-a</code> → absolute
<code>pos-r</code> → relative
<code>pos-f</code> → fixed

`top` `right` `bottom` `left`

<code>[<a href="#breakpoints">breakpoint</a>_]t{key}</code> → top: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]r{key}</code> → right: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]b{key}</code> → bottom: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]l{key}</code> → left: {value}

Specify mapping in <code><a href="scss/_variables.scss">$positions</a>: (key: value)</code>.

`z-index`

<code>z(0…10/1)</code> → z-index: 0…10
<code>z-a</code> → auto
<code>z-i</code> → inherit

Fonts

`font-size`

<code>[<a href="#breakpoints">breakpoint</a>_]fz-xxs</code> → xx-small
<code>[<a href="#breakpoints">breakpoint</a>_]fz-xs</code> → x-small
<code>[<a href="#breakpoints">breakpoint</a>_]fz-s</code> → small
<code>[<a href="#breakpoints">breakpoint</a>_]fz-m</code> → medium
<code>[<a href="#breakpoints">breakpoint</a>_]fz-l</code> → large
<code>[<a href="#breakpoints">breakpoint</a>_]fz-xl</code> → x-large
<code>[<a href="#breakpoints">breakpoint</a>_]fz-xxl</code> → xx-large
<code>[<a href="#breakpoints">breakpoint</a>_]fz-lr</code> → larger
<code>[<a href="#breakpoints">breakpoint</a>_]fz-sr</code> → smaller
<code>[<a href="#breakpoints">breakpoint</a>_]fz-i</code> → inherit
<code>[<a href="#breakpoints">breakpoint</a>_]fz{key}</code> → font-size: {value}

Specify mapping in <code><a href="scss/_variables.scss">$font-sizes</a>: (key: value)</code>.

`line-height`

<code>lh-n</code> → normal
<code>lh-i</code> → inherit
<code>lh0</code> → 0
<code>lh1</code> → 1
<code>lh{key}</code> → line-height: {value}

Specify mapping in <code><a href="scss/_variables.scss">$line-heights</a>: (key: value)</code>.

`font-family`

<code>[<a href="#breakpoints">breakpoint</a>_]fs-s</code> → serif
<code>[<a href="#breakpoints">breakpoint</a>_]fs-ss</code> → sans-serif
<code>[<a href="#breakpoints">breakpoint</a>_]fs-m</code> → monospace
<code>[<a href="#breakpoints">breakpoint</a>_]fs-c</code> → cursive
<code>[<a href="#breakpoints">breakpoint</a>_]fs-f</code> → fantasy
<code>[<a href="#breakpoints">breakpoint</a>_]fs-i</code> → inherit
<code>[<a href="#breakpoints">breakpoint</a>_]fs{key}</code> → font-family: {value}

Specify mapping in <code><a href="scss/_variables.scss">$font-families</a>: (key: value)</code>.

`font-weight`

<code>[<a href="#breakpoints">breakpoint</a>_]fw(100…900/100)</code> → font-weight: 100…900
<code>[<a href="#breakpoints">breakpoint</a>_]fw-n</code> → normal
<code>[<a href="#breakpoints">breakpoint</a>_]fw-b</code> → bold
<code>[<a href="#breakpoints">breakpoint</a>_]fw-br</code> → bolder
<code>[<a href="#breakpoints">breakpoint</a>_]fw-lr</code> → lighter
<code>[<a href="#breakpoints">breakpoint</a>_]fw-i</code> → inherit

`font-style`

<code>[<a href="#breakpoints">breakpoint</a>_]fs-n</code> → normal
<code>[<a href="#breakpoints">breakpoint</a>_]fs-i</code> → italic
<code>[<a href="#breakpoints">breakpoint</a>_]fs-o</code> → oblique

`font-variant`

<code>fv-cl</code> → common-ligatures
<code>fv-apc</code> → all-petite-caps
<code>fv-asc</code> → all-small-caps
<code>fv-sc</code> → small-caps
<code>fv-c</code> → contextual
<code>fv-df</code> → diagonal-fractions
<code>fv-sf</code> → stacked-fractions
<code>fv-hf</code> → historical-forms
<code>fv-hl</code> → historical-ligatures
<code>fv-i</code> → inherit
<code>fv-n</code> → normal
<code>fv-tn</code> → tabular-nums
<code>fv-pn</code> → proportional-nums
<code>fv-pw</code> → proportional-width

`font-size-adjust`

<code>fza-n</code> → none

`font-stretch`

<code>fst-n</code> → normal
<code>fst-uc</code> → ultra-condensed
<code>fst-ec</code> → extra-condensed
<code>fst-c</code> → condensed
<code>fst-sc</code> → semi-condensed
<code>fst-se</code> → semi-expanded
<code>fst-e</code> → expanded
<code>fst-ee</code> → extra-expanded
<code>fst-ue</code> → ultra-expanded

`-webkit-font-smoothing`

<code>wfsm-a</code> → antialiased
<code>wfsm-sa</code> → subpixel-antialiased
<code>wfsm-n</code> → none

`-moz-osx-font-smoothing`

<code>mfsm-a</code> → auto
<code>mfsm-g</code> → grayscale

Transitions

`transition-property`

<code>trp-n</code> → none
<code>trp-a</code> → all

`transition-duration`

<code>trd(100ms…1000ms/100ms)</code> → transition-duration: 100ms…1000ms

`transition-timing-function`

<code>trtf-e</code> → ease
<code>trtf-ei</code> → ease-in
<code>trtf-eo</code> → ease-out
<code>trtf-eio</code> → ease-in-out
<code>trtf-l</code> → linear
<code>trtf-ss</code> → step-start
<code>trtf-se</code> → step-end

Text

`letter-spacing`

<code>ls-n</code> → normal
<code>ls-i</code> → inherit
<code>ls{key}</code> → letter-spacing: {value}

Specify mapping in <code><a href="scss/_variables.scss">$letter-spacings</a>: (key: value)</code>.

`overflow-wrap`

<code>ovw-n</code> → normal
<code>ovw-b</code> → break-word

`text-align`

<code>[<a href="#breakpoints">breakpoint</a>_]ta-l</code> → left
<code>[<a href="#breakpoints">breakpoint</a>_]ta-c</code> → center
<code>[<a href="#breakpoints">breakpoint</a>_]ta-r</code> → right
<code>[<a href="#breakpoints">breakpoint</a>_]ta-j</code> → justify

`text-align-last`

<code>[<a href="#breakpoints">breakpoint</a>_]tal-l</code> → left
<code>[<a href="#breakpoints">breakpoint</a>_]tal-c</code> → center
<code>[<a href="#breakpoints">breakpoint</a>_]tal-r</code> → right
<code>[<a href="#breakpoints">breakpoint</a>_]tal-j</code> → justify

`text-indent`

<code>ti{key}</code> → text-indent: {value}

Specify mapping in <code><a href="scss/_variables.scss">$text-indents</a>: (key: value)</code>.

`text-decoration`

<code>[<a href="#breakpoints">breakpoint</a>_]td-n[-<a href="#pseudos">pseudo</a>]</code> → none
<code>[<a href="#breakpoints">breakpoint</a>_]td-u[-<a href="#pseudos">pseudo</a>]</code> → underline
<code>[<a href="#breakpoints">breakpoint</a>_]td-o</code> → overline
<code>[<a href="#breakpoints">breakpoint</a>_]td-lt</code> → line-through

`text-transform`

<code>tt-c</code> → capitalize
<code>tt-u</code> → uppercase
<code>tt-l</code> → lowercase
<code>tt-n</code> → none
<code>tt-fw</code> → full-width

`white-space`

<code>[<a href="#breakpoints">breakpoint</a>_]ws-n </code> → normal
<code>[<a href="#breakpoints">breakpoint</a>_]ws-p </code> → pre
<code>[<a href="#breakpoints">breakpoint</a>_]ws-nw</code> → nowrap
<code>[<a href="#breakpoints">breakpoint</a>_]ws-pw</code> → pre-wrap
<code>[<a href="#breakpoints">breakpoint</a>_]ws-pl</code> → pre-line

`word-break`

<code>wob-n</code> → normal
<code>wob-ka</code> → keep-all
<code>wob-ba</code> → break-all

`word-wrap`

<code>wow-n</code> → normal
<code>wow-bw</code> → break-word

Lists and Counters

`list-style`

<code>lis-n</code> → none
<code>lis-i</code> → inherit

`list-style-position`

<code>lisp-in</code> → inside
<code>lisp-o</code> → outside
<code>lisp-i</code> → inherit

`list-style-type`

<code>list-n</code> → none
<code>list-d</code> → disc
<code>list-c</code> → circle
<code>list-s</code> → square
<code>list-dc</code> → decimal
<code>list-dclz</code> → decimal-leading-zero
<code>list-lr</code> → lower-roman
<code>list-ur</code> → upper-roman
<code>list-i</code> → inherit

Colors

`color`

<code>[<a href="#breakpoints">breakpoint</a>_]c{key}[-<a href="#pseudos">pseudo</a>]</code> → color: {value}

Specify mapping in <code><a href="scss/_variables.scss">$colors</a>: (key: value)</code>.

`opacity`

<code>op(0…100/1)</code> → opacity: 0…1

Box Model

`box-shadow`

<code>bxs{key}[-<a href="#pseudos">pseudo</a>]</code> → box-shadow: {value}

Specify mapping in <code><a href="scss/_variables.scss">$box-shadows</a>: (key: value)</code>.

`box-sizing`

<code>bxz-cb</code> → content-box
<code>bxz-bb</code> → border-box
<code>bxz-i</code> → inherit

`height`

<code>[<a href="#breakpoints">breakpoint</a>_]h{key}</code> → height: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]mah-n</code> → max-height: none
<code>[<a href="#breakpoints">breakpoint</a>_]mah{key}</code> → max-height: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]mih{key}</code> → min-height: {value}

Specify mapping in <code><a href="scss/_variables.scss">$heights</a>: (key: value)</code>.

`width`

<code>[<a href="#breakpoints">breakpoint</a>_]w{key}</code> → width: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]maw-n</code> → max-width: none
<code>[<a href="#breakpoints">breakpoint</a>_]maw{key}</code> → max-width: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]miw{key}</code> → min-width: {value}

Specify mapping in <code><a href="scss/_variables.scss">$widths</a>: (key: value)</code>.

`margin`

<code>[<a href="#breakpoints">breakpoint</a>_]m{key}</code> → margin: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]mx-a</code> → margin-left: auto, margin-right: auto
<code>[<a href="#breakpoints">breakpoint</a>_]mx{key}</code> = <code>ml{key}</code>, <code>mr{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]my{key}</code> = <code>mt{key}</code>, <code>mb{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]mt{key}</code> → margin-top: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]mr{key}</code> → margin-right: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]mb{key}</code> → margin-bottom: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]ml{key}</code> → margin-left: {value}

Specify mapping in <code><a href="scss/_variables.scss">$margins</a>: (key: value)</code>.

`padding`

<code>[<a href="#breakpoints">breakpoint</a>_]p{key}</code> → padding: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]px{key}</code> = <code>pl{key}</code>, <code>pr{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]py{key}</code> = <code>pt{key}</code>, <code>pb{key}</code>
<code>[<a href="#breakpoints">breakpoint</a>_]pt{key}</code> → padding-top: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]pr{key}</code> → padding-right: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]pb100p</code> → padding-bottom: 100%
<code>[<a href="#breakpoints">breakpoint</a>_]pb{key}</code> → padding-bottom: {value}
<code>[<a href="#breakpoints">breakpoint</a>_]pl{key}</code> → padding-left: {value}