.prose

Tortor Porta

Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.

Cras justo odio, dapibus ac facilisis^[note] in, egestas eget quam. Lorem ipsum ~~dolor~~ sit amet, consectetur adipiscing elit. H₂0 electrolitis.

<div class="prose">
  <h1>Tortor Porta</h1>
  <small>Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.</small>
  <hr/>
  <p>Cras justo odio, dapibus ac facilisis<sup>[note]</sup> in, <a href='#'>egestas eget quam</a>. Lorem ipsum <del>dolor</del> sit amet, consectetur adipiscing elit. H<sub>2</sub>0 electrolitis.</p>
</div>

.unprose

typography.css: 572

felis euismod semper

Click me

Morbi leo risus

Click me

<div class="prose">
  <h1>felis euismod semper</h1>
  <a class='btn'>Click me</a>
  <h1 class='unprose mt18'>Morbi leo risus</h1>
  <a class='btn unprose'>Click me</a>
</div>

.prose--dark

typography.css: 588

Tortor Porta

Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.

Cras justo odio, dapibus ac facilisis^[note] in, egestas eget quam. Lorem ipsum ~~dolor~~ sit amet, consectetur adipiscing elit. H₂0 electrolitis.

<div class="prose prose--dark bg-gray-deep">
  <h1>Tortor Porta</h1>
  <small>Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.</small>
  <hr/>
  <p>Cras justo odio, dapibus ac facilisis<sup>[note]</sup> in, <a href='#'>egestas eget quam</a>. Lorem ipsum <del>dolor</del> sit amet, consectetur adipiscing elit. H<sub>2</sub>0 electrolitis.</p>
</div>

Type basics

.txt-kbd

typography.css: 22

You entered Flamingo.

You entered <kbd class='txt-kbd'>Flamingo</kbd>.

.txt-sub

typography.css: 47

The chemical formula of water is H₂O.

The chemical formula of water is H<sub class='txt-sub'>2</sub>O.

.pre

typography.css: 78

for each
  do this
end

<pre class='pre'>
<code>for each
  do this
end</code>
</pre>

.txt-code

typography.css: 104

Make sure you git checkout the repository.

Make sure you <code class='txt-code'>git checkout</code> the repository.

.txt-h1.txt-h2.txt-h3.txt-h4.txt-h5

typography.css: 146

Malesuada Pharetra Ridiculus

<div class='txt-h1'>Malesuada Pharetra Ridiculus</div>
<div class='txt-h2'>Malesuada Pharetra Ridiculus</div>
<div class='txt-h3'>Malesuada Pharetra Ridiculus</div>
<div class='txt-h4'>Malesuada Pharetra Ridiculus</div>
<div class='txt-h5'>Malesuada Pharetra Ridiculus</div>

.txt-xl.txt-l.txt-m.txt-ms.txt-s.txt-xs

typography.css: 185

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<div class='txt-xl'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</div>
<div class='txt-l'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</div>
<div class='txt-m'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</div>
<div class='txt-ms'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</div>
<div class='txt-s'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</div>
<div class='txt-xs'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</div>

.txt-abbr

typography.css: 230

How do you feel about CSS?

How do you feel about <abbr title='Cascading Style Sheets' class='txt-abbr'>CSS</abbr>?

.txt-hr

typography.css: 243

<hr class='txt-hr'>

.txt-ul

typography.css: 284

one

two

three

<div class='txt-ul'>
  <div class='txt-li'>one</div>
  <div class='txt-li'>two</div>
  <div class='txt-li'>three</div>
</div>

.txt-ol

typography.css: 300

one
two
three

<ol class='txt-ol'>
  <li class='txt-li'>one</li>
  <li class='txt-li'>two</li>
  <li class='txt-li'>three</li>
</ol>

.txt-blockquote

typography.css: 325

Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.

<div class='txt-blockquote'>Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.</div>

.txt-sup

typography.css: 354

Planet earth is seven years old. ^{citation needed}

Planet earth is seven years old. <sup class='txt-sup'>citation needed</sup>

Type utils

.txt-mono

typography.css: 116

txt-mono

<div class='txt-mono'>txt-mono</div>

.txt-bold

typography.css: 128

txt-bold

<div class='txt-bold'>txt-bold</div>

.txt-light

typography.css: 373

txt-light

<div class='txt-light'>txt-light</div>

.txt-normal

typography.css: 384

txt-normal

<div class='txt-normal'>txt-normal</div>

.txt-em

typography.css: 395

<div class='txt-em'>em</div>

.txt-uppercase

typography.css: 404

UpPeRcAsE

<div class='txt-uppercase'>UpPeRcAsE</div>

.txt-lowercase

typography.css: 413

LoWeRcAsE

<div class='txt-lowercase'>LoWeRcAsE</div>

.txt-capitalize

typography.css: 422

all words are capitalized

<div class='txt-capitalize'>all words are capitalized</div>

.txt-capitalize-first

typography.css: 431

first word only is capitalized

<div class='txt-capitalize-first'>first word only is capitalized</div>

.txt-underline

typography.css: 441

txt-underline

<div class='txt-underline'>txt-underline</div>

.txt-underline-on-hover

typography.css: 450

txt-underline-on-hover

<span class='txt-underline-on-hover'>txt-underline-on-hover</span>

.txt-strike

typography.css: 459

txt-strike

<div class='txt-strike'>txt-strike</div>

.txt-nowrap

typography.css: 470

This text is too long for its container

<div class='border border--gray w60 txt-nowrap'>
  This text is too long for its container
</div>

.txt-break-word

typography.css: 483

Thiswordistoolongforitscontainer

<div class='border border--gray w60 txt-break-word'>
  Thiswordistoolongforitscontainer
</div>

.txt-truncate

typography.css: 496

This text is too long for its container

<div class='border border--gray w60 txt-truncate'>
  This text is too long for its container
</div>

.txt-spacing05.txt-spacing1.txt-spacing2

typography.css: 513

spaced out

way spaced out

<div class='txt-spacing05'>spaced out</div>
<div class='txt-spacing2'>way spaced out</div>

.txt-shadow-darken10.txt-shadow-darken25.txt-shadow-darken50.txt-shadow-lighten10.txt-shadow-lighten25.txt-shadow-lighten50

typography.css: 527

ghost world

<div class='txt-shadow-darken10'>ghost world</div>
<div class='txt-shadow-darken25'>ghost world</div>
<div class='txt-shadow-darken50'>ghost world</div>
<div class='txt-shadow-lighten10 bg-darken75'>ghost world</div>
<div class='txt-shadow-lighten25 bg-darken75'>ghost world</div>
<div class='txt-shadow-lighten50 bg-darken75'>ghost world</div>

.align-l.align-r.align-center

typography.css: 695

.align-l

.align-r

.align-center

<div class='align-l'>.align-l</div>
<div class='align-r'>.align-r</div>
<div class='align-center'>.align-center</div>

.align-t.align-b.align-middle

typography.css: 710

align-t

align-middle

align-b

<div>
  <span class='align-t inline-block h12 w12 border border--gray'></span>
  <span class='align-t inline-block h60 border border--gray'>align-t</span>
</div>
<div class='mt3'>
  <span class='align-middle inline-block h12 w12 border'></span>
  <span class='align-middle inline-block h60 border border--gray'>align-middle</span>
</div>
<div>
  <span class='align-b inline-block h12 w12 border border--gray'></span>
  <span class='align-b inline-block h60 border border--gray'>align-b</span>
</div>

Layout

Display

.inline.block.inline-block.none

layout.css: 64

inline

block

inline-block

none

<div class="inline bg-darken10">inline</div>
<div class="block bg-darken10">block</div>
<div class="inline-block bg-darken10">inline-block</div>
<div class="none bg-darken10">none</div>

Flexbox

.flex.inline-flex

layout.css: 202

flex

inline-flex

<div class='bg-darken10 flex'>flex</div>
<div class='bg-darken10 inline-flex'>inline-flex</div>

.flex--column

layout.css: 216

1 2 3

<div class='bg-darken10 flex flex--column'>
 <span>1</span>
 <span>2</span>
 <span>3</span>
</div>

.flex--column-reverse

layout.css: 229

1 2 3

<div class='bg-darken10 flex flex--column-reverse'>
 <span>1</span>
 <span>2</span>
 <span>3</span>
</div>

.flex--row

layout.css: 242

1 2 3

<div class='bg-darken10 flex flex--row'>
 <span>1</span>
 <span>2</span>
 <span>3</span>
</div>

.flex--row-reverse

layout.css: 255

1 2 3

<div class='bg-darken10 flex flex--row-reverse'>
 <span>1</span>
 <span>2</span>
 <span>3</span>
</div>

.flex--center-main

layout.css: 268

child

<div class='flex flex--center-main bg-darken10'>
 <div class='bg-darken10'>child</div>
</div>

.flex--center-cross

layout.css: 279

child

<div class='flex flex--center-cross bg-darken10 h120'>
 <div class='bg-darken10'>child</div>
</div>

.flex--start-cross

layout.css: 290

child

<div class='flex flex--start-cross h120 bg-darken10'>
 <div class='bg-darken10 h42'>child</div>
 <div class='bg-darken10'>child</div>
</div>

.flex--start-main

layout.css: 302

child

<div class='flex flex--start-main bg-darken10'>
 <div class='bg-darken10'>child</div>
</div>

.flex--end-cross

layout.css: 313

child

<div class='flex flex--end-cross h120 bg-darken10'>
 <div class='bg-darken10 h42'>child</div>
 <div class='bg-darken10'>child</div>
</div>

.flex--end-main

layout.css: 325

child

<div class='flex flex--end-main bg-darken10'>
 <div class='bg-darken10'>child</div>
</div>

.flex--wrap

layout.css: 336

child

<div class='flex flex--wrap bg-darken10 overflow-hidden'>
 <div class='bg-darken10 w600'>child</div>
 <div class='bg-darken10 w600'>child</div>
</div>

.flex--stretch-cross

layout.css: 348

child

<div class='flex flex--stretch-cross bg-darken10 h120'>
 <div class='bg-darken10'>child</div>
</div>

.flex--space-between-main

layout.css: 359

child

<div class='flex flex--space-between-main bg-darken10 h120'>
 <div class='bg-darken10'>child</div>
 <div class='bg-darken10'>child</div>
</div>

.flex-child-grow

layout.css: 372

child

<div class='flex bg-darken10'>
 <div class='flex-child-no-shrink border w240'>child</div>
 <div class='flex-child-grow border'>child</div>
</div>

.flex-child-no-shrink

layout.css: 391

child

<div class='flex bg-darken10 w240'>
 <div class='flex-child-no-shrink border w120'>child</div>
 <div class='border w120'>child</div>
 <div class='border w120'>child</div>
</div>

Grid

.grid--gut0.grid--gut3.grid--gut6.grid--gut12.grid--gut18.grid--gut24.grid--gut30.grid--gut36.grid--gut60.grid--gut120

layout-scales.css: 8

w-1/6

w-1/3

w-1/2

<div class='grid grid--gut12'>
  <div class='col w-1/6'>
    <div class='border border--darken10'>w-1/6</div>
  </div>
  <div class='col w-1/3'>
    <div class='border border--darken10'>w-1/3</div>
  </div>
  <div class='col w-1/2'>
    <div class='border border--darken10'>w-1/2</div>
  </div>
</div>

.grid.col

layout.css: 14

one

two

three

<div class='grid'>
  <div class='col w-1/3 border border--darken10'>one</div>
  <div class='col w-1/3 border border--darken10'>two</div>
  <div class='col w-1/3 border border--darken10'>three</div>
</div>

.col--auto

layout.css: 39

w-1/4 col--auto-ml

w-3/4 col--auto-ml

<div class='grid'>
  <div class='col w-1/4 col--auto-ml border border--darken10'>w-1/4 col--auto-ml</div>
  <div class='col w-3/4 col--auto-ml border border--darken10'>w-3/4 col--auto-ml</div>
</div>

Layout utils

.bleed.bleed-r.bleed-l.unbleed

layout.css: 418

Right bleed

<div class='bg-darken10 flex flex--center-main overflow-hidden'>
  <div class='w240 px12 py12 bg-darken10'>
    <div class='bg-darken10 bleed-r'>Right bleed</div>
  </div>
</div>

.fl.fr.unfloat.clearfix

layout.css: 463

left

with .clearfix

right

without .clearfix

unfloat

<div class='clearfix'>
  <div class='fl bg-darken10'>left</div>
</div>
<div> with .clearfix </div>
<div class='fr bg-darken10'>right</div>
<div class='bg-darken10'> without .clearfix </div>
<div class='fl unfloat'>unfloat</div>

Margins

.my-neg1.my-neg2.my-neg3.my-neg6.my-neg12.my-neg18.my-neg24.my-neg30.my-neg36.my-neg60.my-neg120.my-neg180.my-neg240.my-neg300.my-neg360.my0.my3.my6.my12.my18.my24.my30.my36.my60.my120.my180.my240.my300.my360

layout-scales.css: 139

my24

<div class='my24 bg-darken10'>my24</div>

.mx-neg1.mx-neg2.mx-neg3.mx-neg6.mx-neg12.mx-neg18.mx-neg24.mx-neg30.mx-neg36.mx-neg60.mx-neg120.mx-neg180.mx-neg240.mx-neg300.mx-neg360.mx0.mx3.mx6.mx12.mx18.mx24.mx30.mx36.mx60.mx120.mx180.mx240.mx300.mx360

layout-scales.css: 295

mx24

<div class='mx24 bg-darken10'>mx24</div>

.mt-neg1.mt-neg2.mt-neg3.mt-neg6.mt-neg12.mt-neg18.mt-neg24.mt-neg30.mt-neg36.mt-neg60.mt-neg120.mt-neg180.mt-neg240.mt-neg300.mt-neg360.mt0.mt3.mt6.mt12.mt18.mt24.mt30.mt36.mt60.mt120.mt180.mt240.mt300.mt360

layout-scales.css: 450

mt24

<div class='mt24 bg-darken10'>mt24</div>

.mr-neg1.mr-neg2.mr-neg3.mr-neg6.mr-neg12.mr-neg18.mr-neg24.mr-neg30.mr-neg36.mr-neg60.mr-neg120.mr-neg180.mr-neg240.mr-neg300.mr-neg360.mr0.mr3.mr6.mr12.mr18.mr24.mr30.mr36.mr60.mr120.mr180.mr240.mr300.mr360

layout-scales.css: 576

mr24

<div class='mr24 bg-darken10'>mr24</div>

.mr-1/12.mr-1/6.mr-1/4.mr-1/3.mr-5/12.mr-1/2.mr-7/12.mr-2/3.mr-3/4.mr-5/6.mr-11/12

layout-scales.css: 702

mr-1/2

<div class='grid'>
  <div class='col w-1/2 mr-1/2 bg-darken10'>mr-1/2</div>
</div>

.mb-neg1.mb-neg2.mb-neg3.mb-neg6.mb-neg12.mb-neg18.mb-neg24.mb-neg30.mb-neg36.mb-neg60.mb-neg120.mb-neg180.mb-neg240.mb-neg300.mb-neg360.mb0.mb3.mb6.mb12.mb18.mb24.mb30.mb36.mb60.mb120.mb180.mb240.mb300.mb360

layout-scales.css: 758

mb24

<div class='mb24 bg-darken10'>mb24</div>

.ml-neg1.ml-neg2.ml-neg3.ml-neg6.ml-neg12.ml-neg18.ml-neg24.ml-neg30.ml-neg36.ml-neg60.ml-neg120.ml-neg180.ml-neg240.ml-neg300.ml-neg360.ml0.ml3.ml6.ml12.ml18.ml24.ml30.ml36.ml60.ml120.ml180.ml240.ml300.ml360

layout-scales.css: 886

ml24

<div class='ml24 bg-darken10'>ml24</div>

.ml-1/12.ml-1/6.ml-1/4.ml-1/3.ml-5/12.ml-1/2.ml-7/12.ml-2/3.ml-3/4.ml-5/6.ml-11/12

layout-scales.css: 1012

ml-1/2

<div class='grid'>
  <div class='col w-1/2 ml-1/2 bg-darken10'>ml-1/2</div>
</div>

.mx-auto

layout.css: 165

mx-auto

<div class='mx-auto w60 bg-darken10'>mx-auto</div>

Padding

.py0.py3.py6.py12.py18.py24.py30.py36.py60.py120.py180.py240.py300.py360

layout-scales.css: 1068

py24

<div class='py24 bg-darken10'>py24</div>

.px0.px3.px6.px12.px18.px24.px30.px36.px60.px120.px180.px240.px300.px360

layout-scales.css: 1148

px24

<div class='px24 bg-darken10'>px24</div>

.pt0.pt3.pt6.pt12.pt18.pt24.pt30.pt36.pt60.pt120.pt180.pt240.pt300.pt360

layout-scales.css: 1228

pt24

<div class='pt24 bg-darken10'>pt24</div>

.pr0.pr3.pr6.pr12.pr18.pr24.pr30.pr36.pr60.pr120.pr180.pr240.pr300.pr360

layout-scales.css: 1294

pr24

<div class='pr24 bg-darken10 align-r'>pr24</div>

.pb0.pb3.pb6.pb12.pb18.pb24.pb30.pb36.pb60.pb120.pb180.pb240.pb300.pb360

layout-scales.css: 1360

pb24

<div class='pb24 bg-darken10'>pb24</div>

.pl0.pl3.pl6.pl12.pl18.pl24.pl30.pl36.pl60.pl120.pl180.pl240.pl300.pl360

layout-scales.css: 1426

pl24

<div class='pl24 bg-darken10'>pl24</div>

Positioning

.fixed.absolute.relative.static.sticky

layout.css: 88

absolute

relative

static

<div class="relative">
  <div class="absolute bg-darken10 right">absolute</div>
  <div class="relative bg-darken10">relative</div>
  <div class="static bg-darken10">static</div>
  <div class="sticky bg-darken10">static</div>
  <!--
   Fixed positioning would interfere with page
   <div class="fixed bg-darken10">fixed</div>
  -->
</div>

.top.right.left.bottom

layout.css: 112

right

bottom

left

top left right

<div class="relative h60">
  <div class="absolute bg-darken10 right">right</div>
  <div class="absolute bg-darken10 bottom">bottom</div>
  <div class="absolute bg-darken10 left">left</div>
  <div class="absolute bg-darken10 top left right align-center">top left right</div>
</div>

.z-neg1.z0.z1.z2.z3.z4.z5

layout.css: 131

z-neg1

<div class="relative h60">
  <div class="absolute z5 bg-pink py6 px6">z5</div>
  <div class="absolute z1 bg-blue px6 py6 mt12 ml24">z1</div>
  <div class="absolute z1-neg1 bg-blue px6 py6 mt24 ml60">z-neg1</div>
</div>

Sizing

.w0.w3.w6.w12.w18.w24.w30.w36.w60.w120.w180.w240.w300.w360.w600.w-full.w-auto

layout-scales.css: 1492

w60

<div class='w60 bg-darken10'>w60</div>

.w-1/12.w-1/6.w-1/4.w-1/3.w-5/12.w-1/2.w-7/12.w-2/3.w-3/4.w-5/6.w-11/12

layout-scales.css: 1572

w-1/2

w-1/4

<div class='grid'>
  <div class='col w-1/2 bg-darken10'>w-1/2</div>
  <div class='col w-1/4 bg-darken25'>w-1/4</div>
  <div class='col w-1/4 bg-darken50'>w-1/4</div>
</div>

.wmax0.wmax3.wmax6.wmax12.wmax18.wmax24.wmax30.wmax36.wmax60.wmax120.wmax180.wmax240.wmax300.wmax360.wmax600.wmax1200.wmax1800.wmax-full.wmax-none

layout-scales.css: 1630

wmax6

<div class='wmax6 bg-darken10'>wmax6</div>

.wmin0.wmin3.wmin6.wmin12.wmin18.wmin24.wmin30.wmin36.wmin60.wmin120.wmin180.wmin240.wmin300.wmin360.wmin600.wmin-full

layout-scales.css: 1718

wmin60

<div class='inline-block wmin60 bg-darken10'>wmin60</div>

.h0.h3.h6.h12.h18.h24.h30.h36.h60.h120.h180.h240.h300.h360.h600.h-full.h-auto

layout-scales.css: 1794

h24

<div class='h24 bg-darken10'>h24</div>

.hmax0.hmax3.hmax6.hmax12.hmax18.hmax24.hmax30.hmax36.hmax60.hmax120.hmax180.hmax240.hmax300.hmax360.hmax600.hmax-full.hmax-none

layout-scales.css: 1874

hmax12

<div class='hmax12 bg-darken10'>hmax12</div>

.hmin0.hmin3.hmin6.hmin12.hmin18.hmin24.hmin30.hmin36.hmin60.hmin120.hmin180.hmin240.hmin300.hmin360.hmin600.hmin-full

layout-scales.css: 1954

hmin60

<div class='hmin60 bg-darken10'>hmin60</div>

.h-viewport-full.h-viewport-1/12.h-viewport-1/6.h-viewport-1/4.h-viewport-1/3.h-viewport-5/12.h-viewport-1/2.h-viewport-7/12.h-viewport-2/3.h-viewport-3/4.h-viewport-5/6.h-viewport-11/12

layout-scales.css: 2030

h-viewport-1/3

<div class='h-viewport-1/3 bg-darken10'>h-viewport-1/3</div>

.hmax-viewport-full.hmax-viewport-1/12.hmax-viewport-1/6.hmax-viewport-1/4.hmax-viewport-1/3.hmax-viewport-5/12.hmax-viewport-1/2.hmax-viewport-7/12.hmax-viewport-2/3.hmax-viewport-3/4.hmax-viewport-5/6.hmax-viewport-11/12

layout-scales.css: 2088

hmax-viewport-1/3

<div class='hmax-viewport-1/3 h-viewport-1/2 bg-darken10'>hmax-viewport-1/3</div>

Theming

Border radius

.round.round-t.round-r.round-b.round-l.round-tl.round-tr.round-br.round-bl

theming.css: 92

round

round-tr

<div class='bg-blue inline-block round'>round</div>
<div class='bg-blue inline-block ml6 round-tr'>round-tr</div>

.round-bold.round-t-bold.round-r-bold.round-b-bold.round-l-bold.round-tl-bold.round-tr-bold.round-br-bold.round-bl-bold

theming.css: 114

round-bold

round-tr-bold

<div class='bg-blue inline-block round-bold'>round-bold</div>
<div class='bg-blue inline-block ml6 round-tr-bold'>round-tr-bold</div>

.round-full.round-t-full.round-r-full.round-b-full.round-l-full.round-tl-full.round-tr-full.round-br-full.round-bl-full

theming.css: 134

round-full

round-tr-full

<div class='bg-blue inline-block round-full'>round-full</div>
<div class='bg-blue inline-block ml6 round-tr-full'>round-tr-full</div>

.unround.unround-t.unround-r.unround-b.unround-l.unround-tl.unround-tr.unround-br.unround-bl

theming.css: 154

<input type='text' class='input unround' placeholder='.unround' />

Borders

.border--gray-dark.border--gray-deep.border--gray.border--gray-light.border--gray-lighter.border--gray-faint.border--pink-dark.border--pink-deep.border--pink.border--pink-light.border--pink-lighter.border--pink-faint.border--red-dark.border--red-deep.border--red.border--red-light.border--red-lighter.border--red-faint.border--orange-dark.border--orange-deep.border--orange.border--orange-light.border--orange-lighter.border--orange-faint.border--yellow-dark.border--yellow-deep.border--yellow.border--yellow-light.border--yellow-lighter.border--yellow-faint.border--green-dark.border--green-deep.border--green.border--green-light.border--green-lighter.border--green-faint.border--blue-dark.border--blue-deep.border--blue.border--blue-light.border--blue-lighter.border--blue-faint.border--purple-dark.border--purple-deep.border--purple.border--purple-light.border--purple-lighter.border--purple-faint.border--darken10.border--darken25.border--darken50.border--darken75.border--lighten10.border--lighten25.border--lighten50.border--lighten75.border--white.border--black.border--transparent

color-variants.css: 2355

border--red

<div class='border border--red'>border--red</div>

.border--gray-dark-on-hover.border--gray-dark-on-active.border--gray-deep-on-hover.border--gray-deep-on-active.border--gray-on-hover.border--gray-on-active.border--gray-light-on-hover.border--gray-light-on-active.border--gray-lighter-on-hover.border--gray-lighter-on-active.border--gray-faint-on-hover.border--gray-faint-on-active.border--pink-dark-on-hover.border--pink-dark-on-active.border--pink-deep-on-hover.border--pink-deep-on-active.border--pink-on-hover.border--pink-on-active.border--pink-light-on-hover.border--pink-light-on-active.border--pink-lighter-on-hover.border--pink-lighter-on-active.border--pink-faint-on-hover.border--pink-faint-on-active.border--red-dark-on-hover.border--red-dark-on-active.border--red-deep-on-hover.border--red-deep-on-active.border--red-on-hover.border--red-on-active.border--red-light-on-hover.border--red-light-on-active.border--red-lighter-on-hover.border--red-lighter-on-active.border--red-faint-on-hover.border--red-faint-on-active.border--orange-dark-on-hover.border--orange-dark-on-active.border--orange-deep-on-hover.border--orange-deep-on-active.border--orange-on-hover.border--orange-on-active.border--orange-light-on-hover.border--orange-light-on-active.border--orange-lighter-on-hover.border--orange-lighter-on-active.border--orange-faint-on-hover.border--orange-faint-on-active.border--yellow-dark-on-hover.border--yellow-dark-on-active.border--yellow-deep-on-hover.border--yellow-deep-on-active.border--yellow-on-hover.border--yellow-on-active.border--yellow-light-on-hover.border--yellow-light-on-active.border--yellow-lighter-on-hover.border--yellow-lighter-on-active.border--yellow-faint-on-hover.border--yellow-faint-on-active.border--green-dark-on-hover.border--green-dark-on-active.border--green-deep-on-hover.border--green-deep-on-active.border--green-on-hover.border--green-on-active.border--green-light-on-hover.border--green-light-on-active.border--green-lighter-on-hover.border--green-lighter-on-active.border--green-faint-on-hover.border--green-faint-on-active.border--blue-dark-on-hover.border--blue-dark-on-active.border--blue-deep-on-hover.border--blue-deep-on-active.border--blue-on-hover.border--blue-on-active.border--blue-light-on-hover.border--blue-light-on-active.border--blue-lighter-on-hover.border--blue-lighter-on-active.border--blue-faint-on-hover.border--blue-faint-on-active.border--purple-dark-on-hover.border--purple-dark-on-active.border--purple-deep-on-hover.border--purple-deep-on-active.border--purple-on-hover.border--purple-on-active.border--purple-light-on-hover.border--purple-light-on-active.border--purple-lighter-on-hover.border--purple-lighter-on-active.border--purple-faint-on-hover.border--purple-faint-on-active.border--darken10-on-hover.border--darken10-on-active.border--darken25-on-hover.border--darken25-on-active.border--darken50-on-hover.border--darken50-on-active.border--darken75-on-hover.border--darken75-on-active.border--lighten10-on-hover.border--lighten10-on-active.border--lighten25-on-hover.border--lighten25-on-active.border--lighten50-on-hover.border--lighten50-on-active.border--lighten75-on-hover.border--lighten75-on-active.border--white-on-hover.border--white-on-active.border--black-on-hover.border--black-on-active.border--transparent-on-hover.border--transparent-on-active

color-variants.css: 3529

border--red-on-hover

border--red-on-active (not active)

border--red-on-active (active)

<div class='border border--red-on-hover'>border--red-on-hover</div>
<div class='border border--red-on-active'>border--red-on-active (not active)</div>
<div class='border border--red-on-active is-active'>border--red-on-active (active)</div>

.border.border-t.border-r.border-b.border-l

theming.css: 14

border

border-b

<div class='border'>border</div>
<div class='mt12 border-b'>border-b</div>

.border--0.border-t--0.border-r--0.border-b--0.border-l--0

theming.css: 45

border-r--0

<div class='border border-r--0'>border-r--0</div>

.border--2.border-t--2.border-r--2.border-b--2.border-l--2

theming.css: 60

border--2

<div class='border border--2'>border--2</div>

.border--dash

theming.css: 75

border--dash

<div class='border border--dash'>border--dash</div>

Cursors

.cursor-default.cursor-pointer.cursor-crosshair.cursor-move.cursor-notallowed.cursor-grab.cursor-grabbing

theming.css: 187

cursor-pointer

cursor-crosshair

cursor-move

cursor-notallowed

cursor-grab

cursor-grabbing

<div class='cursor-pointer'>cursor-pointer</div>
<div class='cursor-crosshair'>cursor-crosshair</div>
<div class='cursor-move'>cursor-move</div>
<div class='cursor-notallowed'>cursor-notallowed</div>
<div class='cursor-grab'>cursor-grab</div>
<div class='cursor-grabbing'>cursor-grabbing</div>

Opacity

.opacity0.opacity25.opacity50.opacity75.opacity100

theming.css: 217

opacity25

opacity50

opacity100

<div class='opacity25'>opacity25</div>
<div class='opacity50'>opacity50</div>
<div class='opacity100'>opacity100</div>

.opacity0-on-hover.opacity0-on-active.opacity25-on-hover.opacity25-on-active.opacity50-on-hover.opacity50-on-active.opacity75-on-hover.opacity75-on-active.opacity100-on-hover.opacity100-on-active.opacity100-on-focus

theming.css: 234

opacity25-on-hover

opacity25-on-active (inactive)

opacity25-on-active (active)

<div class='opacity25-on-hover'>opacity25-on-hover</div>
<div class='opacity25-on-active'>opacity25-on-active (inactive)</div>
<div class='opacity25-on-active is-active'>opacity25-on-active (active)</div>
<button class='opacity0 opacity100-on-focus'>opacity100-on-focus</button>

Shadows

.shadow-darken10.shadow-darken25.shadow-darken50.shadow-darken75.shadow-lighten10.shadow-lighten25.shadow-lighten50.shadow-lighten75

color-variants.css: 2601

shadow-darken25

<div class='shadow-darken25'>shadow-darken25</div>

.shadow-darken10-bold.shadow-darken25-bold.shadow-darken50-bold.shadow-darken75-bold.shadow-lighten10-bold.shadow-lighten25-bold.shadow-lighten50-bold.shadow-lighten75-bold

color-variants.css: 2643

shadow-darken25-bold

<div class='shadow-darken25-bold'>shadow-darken25-bold</div>

.shadow-darken10-on-hover.shadow-darken10-on-active.shadow-darken10-bold-on-hover.shadow-darken10-bold-on-active.shadow-darken25-on-hover.shadow-darken25-on-active.shadow-darken25-bold-on-hover.shadow-darken25-bold-on-active.shadow-darken50-on-hover.shadow-darken50-on-active.shadow-darken50-bold-on-hover.shadow-darken50-bold-on-active.shadow-darken75-on-hover.shadow-darken75-on-active.shadow-darken75-bold-on-hover.shadow-darken75-bold-on-active.shadow-lighten10-on-hover.shadow-lighten10-on-active.shadow-lighten10-bold-on-hover.shadow-lighten10-bold-on-active.shadow-lighten25-on-hover.shadow-lighten25-on-active.shadow-lighten25-bold-on-hover.shadow-lighten25-bold-on-active.shadow-lighten50-on-hover.shadow-lighten50-on-active.shadow-lighten50-bold-on-hover.shadow-lighten50-bold-on-active.shadow-lighten75-on-hover.shadow-lighten75-on-active.shadow-lighten75-bold-on-hover.shadow-lighten75-bold-on-active

color-variants.css: 2685

shadow-darken25-on-hover

shadow-darken25-on-active (not active)

shadow-darken25-on-active (active)

<div class='shadow-darken25-on-hover'>shadow-darken25-on-hover</div>
<div class='shadow-darken25-on-active'>shadow-darken25-on-active (not active)</div>
<div class='shadow-darken25-on-active is-active'>shadow-darken25-on-active (active)</div>

Colors

Background colors

.bg-gray-dark.bg-gray-deep.bg-gray.bg-gray-light.bg-gray-lighter.bg-gray-faint.bg-pink-dark.bg-pink-deep.bg-pink.bg-pink-light.bg-pink-lighter.bg-pink-faint.bg-red-dark.bg-red-deep.bg-red.bg-red-light.bg-red-lighter.bg-red-faint.bg-orange-dark.bg-orange-deep.bg-orange.bg-orange-light.bg-orange-lighter.bg-orange-faint.bg-yellow-dark.bg-yellow-deep.bg-yellow.bg-yellow-light.bg-yellow-lighter.bg-yellow-faint.bg-green-dark.bg-green-deep.bg-green.bg-green-light.bg-green-lighter.bg-green-faint.bg-blue-dark.bg-blue-deep.bg-blue.bg-blue-light.bg-blue-lighter.bg-blue-faint.bg-purple-dark.bg-purple-deep.bg-purple.bg-purple-light.bg-purple-lighter.bg-purple-faint.bg-darken5.bg-darken10.bg-darken25.bg-darken50.bg-darken75.bg-lighten5.bg-lighten10.bg-lighten25.bg-lighten50.bg-lighten75.bg-white.bg-black.bg-transparent

color-variants.css: 1895

bg-gray-dark

bg-gray-deep

bg-gray

bg-gray-light

bg-gray-lighter

bg-gray-faint

bg-pink-dark

bg-pink-deep

bg-pink

bg-pink-light

bg-pink-lighter

bg-pink-faint

bg-red-dark

bg-red-deep

bg-red

bg-red-light

bg-red-lighter

bg-red-faint

bg-orange-dark

bg-orange-deep

bg-orange

bg-orange-light

bg-orange-lighter

bg-orange-faint

bg-yellow-dark

bg-yellow-deep

bg-yellow

bg-yellow-light

bg-yellow-lighter

bg-yellow-faint

bg-green-dark

bg-green-deep

bg-green

bg-green-light

bg-green-lighter

bg-green-faint

bg-blue-dark

bg-blue-deep

bg-blue

bg-blue-light

bg-blue-lighter

bg-blue-faint

bg-purple-dark

bg-purple-deep

bg-purple

bg-purple-light

bg-purple-lighter

bg-purple-faint

bg-darken5

bg-darken10

bg-darken25

bg-darken50

bg-darken75

bg-lighten5

bg-lighten10

bg-lighten25

bg-lighten50

bg-lighten75

bg-white

bg-black

bg-transparent

<div class='grid'>
  <div class='col w-1/4 bg-gray-dark py6 px6'>bg-gray-dark</div>
  <div class='col w-1/4 bg-gray-deep py6 px6'>bg-gray-deep</div>
  <div class='col w-1/4 bg-gray py6 px6'>bg-gray</div>
  <div class='col w-1/4 bg-gray-light py6 px6'>bg-gray-light</div>
  <div class='col w-1/4 bg-gray-lighter py6 px6'>bg-gray-lighter</div>
  <div class='col w-1/4 bg-gray-faint py6 px6'>bg-gray-faint</div>
  <div class='col w-1/4 bg-pink-dark py6 px6'>bg-pink-dark</div>
  <div class='col w-1/4 bg-pink-deep py6 px6'>bg-pink-deep</div>
  <div class='col w-1/4 bg-pink py6 px6'>bg-pink</div>
  <div class='col w-1/4 bg-pink-light py6 px6'>bg-pink-light</div>
  <div class='col w-1/4 bg-pink-lighter py6 px6'>bg-pink-lighter</div>
  <div class='col w-1/4 bg-pink-faint py6 px6'>bg-pink-faint</div>
  <div class='col w-1/4 bg-red-dark py6 px6'>bg-red-dark</div>
  <div class='col w-1/4 bg-red-deep py6 px6'>bg-red-deep</div>
  <div class='col w-1/4 bg-red py6 px6'>bg-red</div>
  <div class='col w-1/4 bg-red-light py6 px6'>bg-red-light</div>
  <div class='col w-1/4 bg-red-lighter py6 px6'>bg-red-lighter</div>
  <div class='col w-1/4 bg-red-faint py6 px6'>bg-red-faint</div>
  <div class='col w-1/4 bg-orange-dark py6 px6'>bg-orange-dark</div>
  <div class='col w-1/4 bg-orange-deep py6 px6'>bg-orange-deep</div>
  <div class='col w-1/4 bg-orange py6 px6'>bg-orange</div>
  <div class='col w-1/4 bg-orange-light py6 px6'>bg-orange-light</div>
  <div class='col w-1/4 bg-orange-lighter py6 px6'>bg-orange-lighter</div>
  <div class='col w-1/4 bg-orange-faint py6 px6'>bg-orange-faint</div>
  <div class='col w-1/4 bg-yellow-dark py6 px6'>bg-yellow-dark</div>
  <div class='col w-1/4 bg-yellow-deep py6 px6'>bg-yellow-deep</div>
  <div class='col w-1/4 bg-yellow py6 px6'>bg-yellow</div>
  <div class='col w-1/4 bg-yellow-light py6 px6'>bg-yellow-light</div>
  <div class='col w-1/4 bg-yellow-lighter py6 px6'>bg-yellow-lighter</div>
  <div class='col w-1/4 bg-yellow-faint py6 px6'>bg-yellow-faint</div>
  <div class='col w-1/4 bg-green-dark py6 px6'>bg-green-dark</div>
  <div class='col w-1/4 bg-green-deep py6 px6'>bg-green-deep</div>
  <div class='col w-1/4 bg-green py6 px6'>bg-green</div>
  <div class='col w-1/4 bg-green-light py6 px6'>bg-green-light</div>
  <div class='col w-1/4 bg-green-lighter py6 px6'>bg-green-lighter</div>
  <div class='col w-1/4 bg-green-faint py6 px6'>bg-green-faint</div>
  <div class='col w-1/4 bg-blue-dark py6 px6'>bg-blue-dark</div>
  <div class='col w-1/4 bg-blue-deep py6 px6'>bg-blue-deep</div>
  <div class='col w-1/4 bg-blue py6 px6'>bg-blue</div>
  <div class='col w-1/4 bg-blue-light py6 px6'>bg-blue-light</div>
  <div class='col w-1/4 bg-blue-lighter py6 px6'>bg-blue-lighter</div>
  <div class='col w-1/4 bg-blue-faint py6 px6'>bg-blue-faint</div>
  <div class='col w-1/4 bg-purple-dark py6 px6'>bg-purple-dark</div>
  <div class='col w-1/4 bg-purple-deep py6 px6'>bg-purple-deep</div>
  <div class='col w-1/4 bg-purple py6 px6'>bg-purple</div>
  <div class='col w-1/4 bg-purple-light py6 px6'>bg-purple-light</div>
  <div class='col w-1/4 bg-purple-lighter py6 px6'>bg-purple-lighter</div>
  <div class='col w-1/4 bg-purple-faint py6 px6'>bg-purple-faint</div>
  <div class='col w-1/4 bg-darken5 py6 px6'>bg-darken5</div>
  <div class='col w-1/4 bg-darken10 py6 px6'>bg-darken10</div>
  <div class='col w-1/4 bg-darken25 py6 px6'>bg-darken25</div>
  <div class='col w-1/4 bg-darken50 py6 px6'>bg-darken50</div>
  <div class='col w-1/4 bg-darken75 py6 px6'>bg-darken75</div>
  <div class='col w-1/4 bg-lighten5 py6 px6'>bg-lighten5</div>
  <div class='col w-1/4 bg-lighten10 py6 px6'>bg-lighten10</div>
  <div class='col w-1/4 bg-lighten25 py6 px6'>bg-lighten25</div>
  <div class='col w-1/4 bg-lighten50 py6 px6'>bg-lighten50</div>
  <div class='col w-1/4 bg-lighten75 py6 px6'>bg-lighten75</div>
  <div class='col w-1/4 bg-white py6 px6'>bg-white</div>
  <div class='col w-1/4 bg-black py6 px6'>bg-black</div>
  <div class='col w-1/4 bg-transparent py6 px6'>bg-transparent</div>
</div>

.bg-gray-dark-on-hover.bg-gray-dark-on-active.bg-gray-deep-on-hover.bg-gray-deep-on-active.bg-gray-on-hover.bg-gray-on-active.bg-gray-light-on-hover.bg-gray-light-on-active.bg-gray-lighter-on-hover.bg-gray-lighter-on-active.bg-gray-faint-on-hover.bg-gray-faint-on-active.bg-pink-dark-on-hover.bg-pink-dark-on-active.bg-pink-deep-on-hover.bg-pink-deep-on-active.bg-pink-on-hover.bg-pink-on-active.bg-pink-light-on-hover.bg-pink-light-on-active.bg-pink-lighter-on-hover.bg-pink-lighter-on-active.bg-pink-faint-on-hover.bg-pink-faint-on-active.bg-red-dark-on-hover.bg-red-dark-on-active.bg-red-deep-on-hover.bg-red-deep-on-active.bg-red-on-hover.bg-red-on-active.bg-red-light-on-hover.bg-red-light-on-active.bg-red-lighter-on-hover.bg-red-lighter-on-active.bg-red-faint-on-hover.bg-red-faint-on-active.bg-orange-dark-on-hover.bg-orange-dark-on-active.bg-orange-deep-on-hover.bg-orange-deep-on-active.bg-orange-on-hover.bg-orange-on-active.bg-orange-light-on-hover.bg-orange-light-on-active.bg-orange-lighter-on-hover.bg-orange-lighter-on-active.bg-orange-faint-on-hover.bg-orange-faint-on-active.bg-yellow-dark-on-hover.bg-yellow-dark-on-active.bg-yellow-deep-on-hover.bg-yellow-deep-on-active.bg-yellow-on-hover.bg-yellow-on-active.bg-yellow-light-on-hover.bg-yellow-light-on-active.bg-yellow-lighter-on-hover.bg-yellow-lighter-on-active.bg-yellow-faint-on-hover.bg-yellow-faint-on-active.bg-green-dark-on-hover.bg-green-dark-on-active.bg-green-deep-on-hover.bg-green-deep-on-active.bg-green-on-hover.bg-green-on-active.bg-green-light-on-hover.bg-green-light-on-active.bg-green-lighter-on-hover.bg-green-lighter-on-active.bg-green-faint-on-hover.bg-green-faint-on-active.bg-blue-dark-on-hover.bg-blue-dark-on-active.bg-blue-deep-on-hover.bg-blue-deep-on-active.bg-blue-on-hover.bg-blue-on-active.bg-blue-light-on-hover.bg-blue-light-on-active.bg-blue-lighter-on-hover.bg-blue-lighter-on-active.bg-blue-faint-on-hover.bg-blue-faint-on-active.bg-purple-dark-on-hover.bg-purple-dark-on-active.bg-purple-deep-on-hover.bg-purple-deep-on-active.bg-purple-on-hover.bg-purple-on-active.bg-purple-light-on-hover.bg-purple-light-on-active.bg-purple-lighter-on-hover.bg-purple-lighter-on-active.bg-purple-faint-on-hover.bg-purple-faint-on-active.bg-darken5-on-hover.bg-darken5-on-active.bg-darken10-on-hover.bg-darken10-on-active.bg-darken25-on-hover.bg-darken25-on-active.bg-darken50-on-hover.bg-darken50-on-active.bg-darken75-on-hover.bg-darken75-on-active.bg-lighten5-on-hover.bg-lighten5-on-active.bg-lighten10-on-hover.bg-lighten10-on-active.bg-lighten25-on-hover.bg-lighten25-on-active.bg-lighten50-on-hover.bg-lighten50-on-active.bg-lighten75-on-hover.bg-lighten75-on-active.bg-white-on-hover.bg-white-on-active.bg-black-on-hover.bg-black-on-active.bg-transparent-on-hover.bg-transparent-on-active

color-variants.css: 2785

bg-darken25-on-hover

bg-darken25-on-active (not active)

bg-darken25-on-active (active)

<div class='bg-darken25-on-hover'>bg-darken25-on-hover</div>
<div class='bg-darken25-on-active'>bg-darken25-on-active (not active)</div>
<div class='bg-darken25-on-active is-active'>bg-darken25-on-active (active)</div>

Text colors

.color-gray-dark.color-gray-deep.color-gray.color-gray-light.color-gray-lighter.color-gray-faint.color-pink-dark.color-pink-deep.color-pink.color-pink-light.color-pink-lighter.color-pink-faint.color-red-dark.color-red-deep.color-red.color-red-light.color-red-lighter.color-red-faint.color-orange-dark.color-orange-deep.color-orange.color-orange-light.color-orange-lighter.color-orange-faint.color-yellow-dark.color-yellow-deep.color-yellow.color-yellow-light.color-yellow-lighter.color-yellow-faint.color-green-dark.color-green-deep.color-green.color-green-light.color-green-lighter.color-green-faint.color-blue-dark.color-blue-deep.color-blue.color-blue-light.color-blue-lighter.color-blue-faint.color-purple-dark.color-purple-deep.color-purple.color-purple-light.color-purple-lighter.color-purple-faint.color-darken10.color-darken25.color-darken50.color-darken75.color-lighten10.color-lighten25.color-lighten50.color-lighten75.color-white.color-black.color-transparent.color-text

color-variants.css: 1579

color-gray-dark

color-gray-deep

color-gray

color-gray-light

color-gray-lighter

color-gray-faint

color-pink-dark

color-pink-deep

color-pink

color-pink-light

color-pink-lighter

color-pink-faint

color-red-dark

color-red-deep

color-red

color-red-light

color-red-lighter

color-red-faint

color-orange-dark

color-orange-deep

color-orange

color-orange-light

color-orange-lighter

color-orange-faint

color-yellow-dark

color-yellow-deep

color-yellow

color-yellow-light

color-yellow-lighter

color-yellow-faint

color-green-dark

color-green-deep

color-green

color-green-light

color-green-lighter

color-green-faint

color-blue-dark

color-blue-deep

color-blue

color-blue-light

color-blue-lighter

color-blue-faint

color-purple-dark

color-purple-deep

color-purple

color-purple-light

color-purple-lighter

color-purple-faint

color-darken10

color-darken25

color-darken50

color-darken75

color-lighten10

color-lighten25

color-lighten50

color-lighten75

color-white

color-black

color-transparent

color-text

<div class='txt-s grid'>
  <div class='col w-1/4 color-gray-dark'>color-gray-dark</div>
  <div class='col w-1/4 color-gray-deep'>color-gray-deep</div>
  <div class='col w-1/4 color-gray'>color-gray</div>
  <div class='col w-1/4 color-gray-light'>color-gray-light</div>
  <div class='col w-1/4 color-gray-lighter'>color-gray-lighter</div>
  <div class='col w-1/4 color-gray-faint'>color-gray-faint</div>
  <div class='col w-1/4 color-pink-dark'>color-pink-dark</div>
  <div class='col w-1/4 color-pink-deep'>color-pink-deep</div>
  <div class='col w-1/4 color-pink'>color-pink</div>
  <div class='col w-1/4 color-pink-light'>color-pink-light</div>
  <div class='col w-1/4 color-pink-lighter'>color-pink-lighter</div>
  <div class='col w-1/4 color-pink-faint'>color-pink-faint</div>
  <div class='col w-1/4 color-red-dark'>color-red-dark</div>
  <div class='col w-1/4 color-red-deep'>color-red-deep</div>
  <div class='col w-1/4 color-red'>color-red</div>
  <div class='col w-1/4 color-red-light'>color-red-light</div>
  <div class='col w-1/4 color-red-lighter'>color-red-lighter</div>
  <div class='col w-1/4 color-red-faint'>color-red-faint</div>
  <div class='col w-1/4 color-orange-dark'>color-orange-dark</div>
  <div class='col w-1/4 color-orange-deep'>color-orange-deep</div>
  <div class='col w-1/4 color-orange'>color-orange</div>
  <div class='col w-1/4 color-orange-light'>color-orange-light</div>
  <div class='col w-1/4 color-orange-lighter'>color-orange-lighter</div>
  <div class='col w-1/4 color-orange-faint'>color-orange-faint</div>
  <div class='col w-1/4 color-yellow-dark'>color-yellow-dark</div>
  <div class='col w-1/4 color-yellow-deep'>color-yellow-deep</div>
  <div class='col w-1/4 color-yellow'>color-yellow</div>
  <div class='col w-1/4 color-yellow-light'>color-yellow-light</div>
  <div class='col w-1/4 color-yellow-lighter'>color-yellow-lighter</div>
  <div class='col w-1/4 color-yellow-faint'>color-yellow-faint</div>
  <div class='col w-1/4 color-green-dark'>color-green-dark</div>
  <div class='col w-1/4 color-green-deep'>color-green-deep</div>
  <div class='col w-1/4 color-green'>color-green</div>
  <div class='col w-1/4 color-green-light'>color-green-light</div>
  <div class='col w-1/4 color-green-lighter'>color-green-lighter</div>
  <div class='col w-1/4 color-green-faint'>color-green-faint</div>
  <div class='col w-1/4 color-blue-dark'>color-blue-dark</div>
  <div class='col w-1/4 color-blue-deep'>color-blue-deep</div>
  <div class='col w-1/4 color-blue'>color-blue</div>
  <div class='col w-1/4 color-blue-light'>color-blue-light</div>
  <div class='col w-1/4 color-blue-lighter'>color-blue-lighter</div>
  <div class='col w-1/4 color-blue-faint'>color-blue-faint</div>
  <div class='col w-1/4 color-purple-dark'>color-purple-dark</div>
  <div class='col w-1/4 color-purple-deep'>color-purple-deep</div>
  <div class='col w-1/4 color-purple'>color-purple</div>
  <div class='col w-1/4 color-purple-light'>color-purple-light</div>
  <div class='col w-1/4 color-purple-lighter'>color-purple-lighter</div>
  <div class='col w-1/4 color-purple-faint'>color-purple-faint</div>
  <div class='col w-1/4 color-darken10'>color-darken10</div>
  <div class='col w-1/4 color-darken25'>color-darken25</div>
  <div class='col w-1/4 color-darken50'>color-darken50</div>
  <div class='col w-1/4 color-darken75'>color-darken75</div>
  <div class='col w-1/4 color-lighten10'>color-lighten10</div>
  <div class='col w-1/4 color-lighten25'>color-lighten25</div>
  <div class='col w-1/4 color-lighten50'>color-lighten50</div>
  <div class='col w-1/4 color-lighten75'>color-lighten75</div>
  <div class='col w-1/4 color-white'>color-white</div>
  <div class='col w-1/4 color-black'>color-black</div>
  <div class='col w-1/4 color-transparent'>color-transparent</div>
  <div class='col w-1/4 color-text'>color-text</div>
</div>

.color-gray-dark-on-hover.color-gray-dark-on-active.color-gray-deep-on-hover.color-gray-deep-on-active.color-gray-on-hover.color-gray-on-active.color-gray-light-on-hover.color-gray-light-on-active.color-gray-lighter-on-hover.color-gray-lighter-on-active.color-gray-faint-on-hover.color-gray-faint-on-active.color-pink-dark-on-hover.color-pink-dark-on-active.color-pink-deep-on-hover.color-pink-deep-on-active.color-pink-on-hover.color-pink-on-active.color-pink-light-on-hover.color-pink-light-on-active.color-pink-lighter-on-hover.color-pink-lighter-on-active.color-pink-faint-on-hover.color-pink-faint-on-active.color-red-dark-on-hover.color-red-dark-on-active.color-red-deep-on-hover.color-red-deep-on-active.color-red-on-hover.color-red-on-active.color-red-light-on-hover.color-red-light-on-active.color-red-lighter-on-hover.color-red-lighter-on-active.color-red-faint-on-hover.color-red-faint-on-active.color-orange-dark-on-hover.color-orange-dark-on-active.color-orange-deep-on-hover.color-orange-deep-on-active.color-orange-on-hover.color-orange-on-active.color-orange-light-on-hover.color-orange-light-on-active.color-orange-lighter-on-hover.color-orange-lighter-on-active.color-orange-faint-on-hover.color-orange-faint-on-active.color-yellow-dark-on-hover.color-yellow-dark-on-active.color-yellow-deep-on-hover.color-yellow-deep-on-active.color-yellow-on-hover.color-yellow-on-active.color-yellow-light-on-hover.color-yellow-light-on-active.color-yellow-lighter-on-hover.color-yellow-lighter-on-active.color-yellow-faint-on-hover.color-yellow-faint-on-active.color-green-dark-on-hover.color-green-dark-on-active.color-green-deep-on-hover.color-green-deep-on-active.color-green-on-hover.color-green-on-active.color-green-light-on-hover.color-green-light-on-active.color-green-lighter-on-hover.color-green-lighter-on-active.color-green-faint-on-hover.color-green-faint-on-active.color-blue-dark-on-hover.color-blue-dark-on-active.color-blue-deep-on-hover.color-blue-deep-on-active.color-blue-on-hover.color-blue-on-active.color-blue-light-on-hover.color-blue-light-on-active.color-blue-lighter-on-hover.color-blue-lighter-on-active.color-blue-faint-on-hover.color-blue-faint-on-active.color-purple-dark-on-hover.color-purple-dark-on-active.color-purple-deep-on-hover.color-purple-deep-on-active.color-purple-on-hover.color-purple-on-active.color-purple-light-on-hover.color-purple-light-on-active.color-purple-lighter-on-hover.color-purple-lighter-on-active.color-purple-faint-on-hover.color-purple-faint-on-active.color-darken10-on-hover.color-darken10-on-active.color-darken25-on-hover.color-darken25-on-active.color-darken50-on-hover.color-darken50-on-active.color-darken75-on-hover.color-darken75-on-active.color-lighten10-on-hover.color-lighten10-on-active.color-lighten25-on-hover.color-lighten25-on-active.color-lighten50-on-hover.color-lighten50-on-active.color-lighten75-on-hover.color-lighten75-on-active.color-white-on-hover.color-white-on-active.color-black-on-hover.color-black-on-active.color-transparent-on-hover.color-transparent-on-active

color-variants.css: 3163

color-red-on-hover

color-red-on-active (not active)

color-red-on-active (active)

<div class='color-red-on-hover'>color-red-on-hover</div>
<div class='color-red-on-active'>color-red-on-active (not active)</div>
<div class='color-red-on-active is-active'>color-red-on-active (active)</div>

Icons

.icon

icons.css: 9

<svg class='icon'><use xlink:href='#icon-paint'/></svg>

Buttons

.btn

buttons.css: 12

<button class='btn'>Default</button>
<button class='btn btn--red'>Color</button>
<button class='btn btn--green color-yellow'>More colors</button>
<button class='btn round'>Less rounded</button>
<div class='px6 py6 bg-blue inline-block'>
  <button class='btn btn--white color-blue'>Reverse</button>
</div>

.btn--stroke

buttons.css: 42

<button class='btn btn--stroke'>Default</button>
<button class='btn btn--stroke btn--red'>Color</button>
<button class='btn btn--stroke round'>Less rounded</button>
<div class='px6 py6 bg-blue inline-block'>
  <button class='btn btn--stroke btn--white'>Reverse</button>
</div>

.btn--s

buttons.css: 62

<button class='btn btn--s'>Small</button>

.btn.is-active.btn--stroke.is-active

buttons.css: 76

<button class='btn is-active'>Active</button>
<button class='btn btn--red is-active'>Red and active</button>
<button class='btn btn--stroke is-active'>Active</button>
<button class='btn btn--stroke btn--red is-active'>Red and active</button>

.btn:disabled

buttons.css: 98

<button disabled class='btn'>Disabled button</button>

.btn--pill-stroke

buttons.css: 119

<div class="inline-flex">
  <button class="btn btn--pill btn--pill-hl">Left</button>
  <button class="btn btn--pill btn--pill-hc">Center</button>
  <button class="btn btn--pill btn--pill-hr">Right</button>
</div>
<div class="inline-flex flex--column">
  <button class="btn btn--stroke btn--pill-stroke btn--pill-vt">Top</button>
  <button class="btn btn--pill-stroke btn--pill-vc is-active">Center</button>
  <button class="btn btn--stroke btn--pill-stroke btn--pill-vb">Bottom</button>
</div>

Links

.link

links.css: 9

A link A red link

<a href='#Links' class='link'>A link</a>
<a href='#Links' class='link link--red'>A red link</a>

.link.is-active

links.css: 25

Active Red and active

<a href='#Links' class='link is-active'>Active</a>
<a href='#Links' class='link link--red is-active'>Red and active</a>

.link:disabled

links.css: 39

<button href='#Links' disabled class='link'>A disabled link</button>
<button href='#Links' disabled class='link link--red'>A disabled red link</button>

Forms

Checkboxes

.checkbox

forms.css: 614

More cats

More mice

<label class='checkbox-container'>
    <input type='checkbox' />
    <div class='checkbox mr6'>
      <svg class='icon'><use xlink:href='#icon-check' /></svg>
    </div>
    More cats
  </label>
  <label class='txt-s checkbox-container ml24'>
    <input type='checkbox' />
    <div class='checkbox mr6 checkbox--s-label checkbox--red'>
      <svg class='icon'><use xlink:href='#icon-check' /></svg>
    </div>
    More mice
  </label>

input:disabled + .checkbox

forms.css: 872

<label class="checkbox-container mr6">
  <input disabled type='checkbox'>
  <div class='checkbox'>
    <svg class='icon'><use xlink:href='#icon-check' /></svg>
  </div>
</label>
<label class="checkbox-container">
  <input checked disabled type='checkbox'>
  <div class='checkbox'>
    <svg class='icon'><use xlink:href='#icon-check' /></svg>
  </div>
</label>

Inputs & textareas

.input

forms.css: 72

<input class='input' placeholder='default' />
<input class='input input--border-green w240' placeholder='green' />

.input--s

forms.css: 82

<input class='input input--s' placeholder='small' />

.textarea

forms.css: 95

<textarea placeholder='default' class='textarea'></textarea>
<textarea placeholder='pink' class='textarea textarea--border-pink w240'></textarea>

.textarea--s

forms.css: 109

<textarea class='textarea textarea--s'>small textarea</textarea>

.input:disabled.textarea:disabled.select--stroke:disabled

forms.css: 122

<input disabled class='input' placeholder='disabled' />
<textarea disabled class='textarea' placeholder='disabled' value='Disabled'>Disabled text</textarea>

.input[readonly].textarea[readonly]

forms.css: 141

Readonly text

<input readonly class='input' placeholder='basic' value='Readonly' />
<textarea readonly class='textarea' placeholder='basic' value='Disabled' >Readonly text</textarea>

Radio buttons

.radio

forms.css: 669

Orange

Apple

<label class='radio-container'>
  <input name='radio-basic' type='radio'>
  <div class='radio mr6'></div>
  Orange
</label>
<label class='txt-s ml24 radio-container'>
  <input name='radio-basic' type='radio'>
  <div class='radio radio--s-label radio--yellow mr6'></div>
  Apple
</label>

input:disabled + .radio

forms.css: 892

<label class='radio-container'>
  <input disabled type='radio'>
  <div class='radio'></div>
</label>
<label class='radio-container'>
  <input disabled checked type='radio'>
  <div class='radio'></div>
</label>

Ranges

.range

forms.css: 350

<div class='range'>
  <input type='range' />
</div>

.range--s

forms.css: 486

<div class='range range--s'>
  <input type='range' />
</div>

.range:disabled

forms.css: 542

<div class='range'>
  <input disabled type='range' />
</div>

Selects

.select-container.select.select-arrow

forms.css: 164

<div class='select-container'>
  <select class='select'>
    <option>default</option>
    <option>two</option>
  </select>
  <div class='select-arrow'></div>
</div>
<div class='select-container'>
  <select class='select select--green'>
    <option>default</option>
    <option>two</option>
  </select>
  <div class='select-arrow'></div>
</div>

.select--s

forms.css: 257

<div class='select-container'>
  <select class='select select--s'>
    <option>one</option>
    <option>two</option>
  </select>
  <div class='select-arrow'></div>
</div>

.select--stroke

forms.css: 280

<div class='select-container'>
  <select class='select select--stroke'>
    <option>one</option>
    <option>two</option>
  </select>
  <div class='select-arrow'></div>
</div>
<div class='select-container mt6'>
  <select class='select select--stroke select--green'>
    <option>green</option>
    <option>two</option>
  </select>
  <div class='select-arrow'></div>
</div>

.select:disabled

forms.css: 312

<div class='select-container'>
  <select disabled class='select'>
    <option>one</option>
    <option>two</option>
  </select>
  <div class='select-arrow'></div>
</div>
<div class='select-container'>
  <select disabled class='select select--stroke'>
    <option>one</option>
    <option>two</option>
  </select>
  <div class='select-arrow'></div>
</div>

Switches

.switch

forms.css: 712

Enabled

<label class='switch-container'>
  <input type='checkbox' />
  <div class='switch'></div>
</label>
<label class='switch-container'>
  <input type='checkbox' />
  <div class='switch switch--pink switch--dot-yellow mr6'></div>
  Enabled
</label>

.switch--l

forms.css: 760

Really enabled

<label class='switch-container'>
  <input type='checkbox' />
  <div class='switch switch--l mr6'></div>
  Really enabled
</label>

input:disabled + .switch

forms.css: 908

<label class="switch-container mr6">
  <input disabled type='checkbox'>
  <div class="switch"></div>
</label>
<label class="switch-container">
  <input checked disabled type='checkbox'>
  <div class="switch"></div>
</label>

Toggle group

.toggle-group.toggle-container.toggle

forms.css: 795

cat

dog

<div class='toggle-group mr18'>
  <label class='toggle-container'>
    <input checked name='toggle-1' type='radio' />
    <div class='toggle'>cat</div>
  </label>
  <label class='toggle-container'>
    <input name='toggle-1' type='radio' />
    <div class='toggle'>dog</div>
  </label>
</div>

.toggle--s

forms.css: 838

mouse

cricket

<div class='toggle-group'>
  <label class='toggle-container'>
    <input checked name='toggle-small' type='radio' />
    <div class='toggle toggle--s'>mouse</div>
  </label>
  <label class='toggle-container'>
    <input name='toggle-small' type='radio' />
    <div class='toggle toggle--s'>cricket</div>
  </label>
</div>

input:disabled + .toggle

forms.css: 987

cat

dog

<div class='toggle-group'>
  <label class='toggle-container'>
    <input disabled name='pet' type='radio' />
    <div class='toggle'>cat</div>
  </label>
  <label class='toggle-container'>
    <input disabled checked name='pet' type='radio' />
    <div class='toggle'>dog</div>
  </label>
</div>

Tables

.table

tables.css: 7

Malesuada Tristique Commodo	Nibh Commodo
item	item
item	item

<table class='table'>
  <thead>
    <tr>
      <th>Malesuada Tristique Commodo</th>
      <th>Nibh Commodo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>item</td>
      <td>item</td>
    </tr>
    <tr>
      <td>item</td>
      <td>item</td>
    </tr>
  </tbody>
</table>
*

.table--fixed

tables.css: 124

Malesuada Tristique Commodo	Nibh Commodo	Fusce
Fusce	Curabitur blandit tempus porttitor.	Aenean Adipiscing
Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum.	Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.	Cras Inceptos Purus

<table class='table table--fixed'>
  <thead>
    <tr>
      <th>Malesuada Tristique Commodo</th>
      <th>Nibh Commodo</th>
      <th class='w240'>Fusce</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Fusce</td>
      <td>Curabitur blandit tempus porttitor.</td>
      <td>Aenean Adipiscing</td>
    </tr>
    <tr>
      <td>Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum.</td>
      <td>Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.</td>
      <td>Cras Inceptos Purus</td>
    </tr>
  </tbody>
</table>

Animations

.animation-pulse.animation-spin.animation-fade-in.animation-fade-out.animation-fade-in-out.animation-shake

animations.css: 7

<div class="bg-blue inline-block mr18 w60 h60 round animation-pulse animation--infinite"></div>
<div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite"></div>
<div class="bg-blue inline-block mr18 w60 h60 round animation-fade-in animation--infinite"></div>
<div class="bg-blue inline-block mr18 w60 h60 round animation-fade-out animation--infinite"></div>
<div class="bg-blue inline-block mr18 w60 h60 round animation-fade-in-out animation--infinite"></div>
<div class="bg-blue inline-block mr18 w60 h60 round animation-shake animation--infinite"></div>

.animation--speed-025.animation--speed-05.animation--speed-1.animation--speed-2.animation--speed-4.animation--delay

animations.css: 28

<div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite animation--speed-025"></div>
<div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite animation--speed-05"></div>
<div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite animation--speed-1"></div>
<div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite animation--speed-2"></div>
<div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite animation--speed-4"></div>
<div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite animation--delay"></div>

.animation--infinite

animations.css: 51

<div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite"></div>

Triangles

.triangle.triangle--u.triangle--r.triangle--d.triangle--l

triangles.css: 7

<div class='triangle--u triangle color-blue inline-block'></div>
<div class='triangle--r triangle color-green inline-block'></div>
<div class='triangle--d triangle color-orange inline-block'></div>
<div class='triangle--l triangle color-pink inline-block'></div>

.triangle-l.triangle-l--u.triangle-l--r.triangle-l--d.triangle-l--l

triangles.css: 51

<span class='triangle-l triangle-l--u color-blue inline-block'></span>
<span class='triangle-l triangle-l--r color-green inline-block'></span>
<span class='triangle-l triangle-l--d color-orange inline-block'></span>
<span class='triangle-l triangle-l--l color-pink inline-block'></span>

Miscellaneous

.scroll-styled

miscellaneous.css: 7

<div class="scroll-styled overflow-auto h120"><div class='h240'></div></div>
<div class="scroll-styled scroll-styled--dark bg-gray-dark overflow-auto h120"><div class='h240'></div></div>

.loading.loading--dark.loading--s

miscellaneous.css: 49

<div class="loading"></div>
<div class="loading loading--s"></div>
<div class="bg-gray-dark">
  <div class="loading loading--dark"></div>
</div>
<div class="bg-gray">
  <div class="loading color-lighten50"></div>
</div>

.events-none

miscellaneous.css: 98

You can't click this

<div class='btn events-none'>You can't click this</div>

.events-all

miscellaneous.css: 127

You can click this.

<div class='events-none'><div class='events-all'>You can click this.</div></div>

.unselectable

miscellaneous.css: 154

You can't select this.

<div class='unselectable'>You can't select this.</div>

.selectable

miscellaneous.css: 178

You can select this.

<div class='unselectable'><div class='selectable'>You can select this.</div></div>

.transition

miscellaneous.css: 202

Hover over me

<div class='bg-blue-on-hover transition'>Hover over me</div>

.transition-none

miscellaneous.css: 213

transition-none

<div class='btn transition-none'>transition-none</div>

.overflow-scroll

miscellaneous.css: 224

Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.

<div class='overflow-scroll'>Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>

.overflow-auto

miscellaneous.css: 235

<div class='h60 overflow-auto'>Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>

.overflow-hidden

miscellaneous.css: 247

<div class='h60 overflow-hidden'>Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>

.hide-visually

miscellaneous.css: 258

You cannot see this with your eyes.

There is a sentence above this that you cannot see.

<div class='hide-visually'>You cannot see this with your eyes.</div>
<div>There is a sentence above this that you cannot see.</div>

.none-print

miscellaneous.css: 279

<div class="none-print'>Hi, this text won't print!</div>