Tachyons CSS Cheatsheet

New to Tachyons and confused about what all the short css classes do?

One page listing of Tachyon CSS classes. Search by class name and find out what it does.

Type Scale (Font Size)

http://tachyons.io/docs/typography/scale/

/*   TYPE SCALE   Base:    f = font-size   Modifiers     1 = 1st step in size scale     2 = 2nd step in size scale     3 = 3rd step in size scale     4 = 4th step in size scale     5 = 5th step in size scale     6 = 6th step in size scale     7 = 7th step in size scale   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*//* * For Hero/Marketing Titles * * These generally are too large for mobile * so be careful using them on smaller screens. */.f-6,.f-headline {  font-size: 6rem;}.f-5,.f-subheadline {  font-size: 5rem;}/* Type Scale */.f1 { font-size: 3rem; }.f2 { font-size: 2.25rem; }.f3 { font-size: 1.5rem; }.f4 { font-size: 1.25rem; }.f5 { font-size: 1rem; }.f6 { font-size: .875rem; }.f7 { font-size: .75rem; } /* Small and hard to read for many people so use with extreme caution */@media (--breakpoint-not-small){  .f-6-ns,  .f-headline-ns { font-size: 6rem; }  .f-5-ns,  .f-subheadline-ns { font-size: 5rem; }  .f1-ns { font-size: 3rem; }  .f2-ns { font-size: 2.25rem; }  .f3-ns { font-size: 1.5rem; }  .f4-ns { font-size: 1.25rem; }  .f5-ns { font-size: 1rem; }  .f6-ns { font-size: .875rem; }  .f7-ns { font-size: .75rem; }}@media (--breakpoint-medium) {  .f-6-m,  .f-headline-m { font-size: 6rem; }  .f-5-m,  .f-subheadline-m { font-size: 5rem; }  .f1-m { font-size: 3rem; }  .f2-m { font-size: 2.25rem; }  .f3-m { font-size: 1.5rem; }  .f4-m { font-size: 1.25rem; }  .f5-m { font-size: 1rem; }  .f6-m { font-size: .875rem; }  .f7-m { font-size: .75rem; }}@media (--breakpoint-large) {  .f-6-l,  .f-headline-l {    font-size: 6rem;  }  .f-5-l,  .f-subheadline-l {    font-size: 5rem;  }  .f1-l { font-size: 3rem; }  .f2-l { font-size: 2.25rem; }  .f3-l { font-size: 1.5rem; }  .f4-l { font-size: 1.25rem; }  .f5-l { font-size: 1rem; }  .f6-l { font-size: .875rem; }  .f7-l { font-size: .75rem; }}

Measure

http://tachyons.io/docs/typography/measure/

Tachyons provides 3 classes for setting measure.

.measure = line lengths ~66 characters
.measure-narrow = line lengths ~45 characters
.measure-wide = line lengths ~80 characters

/*   TYPOGRAPHY   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*//* Measure is limited to ~66 characters */.measure {  max-width: 30em;}/* Measure is limited to ~80 characters */.measure-wide {  max-width: 34em;}/* Measure is limited to ~45 characters */.measure-narrow {  max-width: 20em;}/* Book paragraph style - paragraphs are indented with no vertical spacing. */.indent {  text-indent: 1em;  margin-top: 0;  margin-bottom: 0;}.small-caps {  font-variant: small-caps;}/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */.truncate {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}@media (--breakpoint-not-small) {  .measure-ns  {    max-width: 30em;  }  .measure-wide-ns {    max-width: 34em;  }  .measure-narrow-ns {    max-width: 20em;  }  .indent-ns {    text-indent: 1em;    margin-top: 0;    margin-bottom: 0;  }  .small-caps-ns {    font-variant: small-caps;  }  .truncate-ns {    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;  }}@media (--breakpoint-medium) {  .measure-m {    max-width: 30em;  }  .measure-wide-m {    max-width: 34em;  }  .measure-narrow-m {    max-width: 20em;  }  .indent-m {    text-indent: 1em;    margin-top: 0;    margin-bottom: 0;  }  .small-caps-m {    font-variant: small-caps;  }  .truncate-m {    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;  }}@media (--breakpoint-large) {  .measure-l {    max-width: 30em;  }  .measure-wide-l {    max-width: 34em;  }  .measure-narrow-l {    max-width: 20em;  }  .indent-l {    text-indent: 1em;    margin-top: 0;    margin-bottom: 0;  }  .small-caps-l {    font-variant: small-caps;  }  .truncate-l {    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;  }}

Line Height / Leading

http://tachyons.io/docs/typography/line-height/

Line-height affects how easy it is to read a piece of text, so having a well constructed set of values can help make your text easier to read, increasing the chances that people will read it. Tachyons provides classes to set text at three common line-height values. 1.5 for body copy, 1.25 for titles, and 1 for text that doesn't wrap.

/*   LINE HEIGHT / LEADING   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/  .lh-solid { line-height: 1; }  .lh-title { line-height: 1.25; }  .lh-copy  { line-height: 1.5; }@media (--breakpoint-not-small) {  .lh-solid-ns { line-height: 1; }  .lh-title-ns { line-height: 1.25; }  .lh-copy-ns  { line-height: 1.5; }}@media (--breakpoint-medium) {  .lh-solid-m { line-height: 1; }  .lh-title-m { line-height: 1.25; }  .lh-copy-m  { line-height: 1.5; }}@media (--breakpoint-large) {  .lh-solid-l { line-height: 1; }  .lh-title-l { line-height: 1.25; }  .lh-copy-l  { line-height: 1.5; }}

Tracking

http://tachyons.io/docs/typography/tracking/

Letter spacing.

/*   LETTER SPACING   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/.tracked       { letter-spacing:  .1em; }.tracked-tight { letter-spacing: -.05em; }.tracked-mega  { letter-spacing:  .25em; }@media (--breakpoint-not-small) {  .tracked-ns       { letter-spacing:  .1em; }  .tracked-tight-ns { letter-spacing: -.05em; }  .tracked-mega-ns  { letter-spacing:  .25em; }}@media (--breakpoint-medium) {  .tracked-m       { letter-spacing:  .1em; }  .tracked-tight-m { letter-spacing: -.05em; }  .tracked-mega-m  { letter-spacing:  .25em; }}@media (--breakpoint-large) {  .tracked-l       { letter-spacing:  .1em; }  .tracked-tight-l { letter-spacing: -.05em; }  .tracked-mega-l  { letter-spacing:  .25em; }}

Font Weight

http://tachyons.io/docs/typography/font-weight/

/*   FONT WEIGHT   Base     fw = font-weight   Modifiers:     1 = literal value 100     2 = literal value 200     3 = literal value 300     4 = literal value 400     5 = literal value 500     6 = literal value 600     7 = literal value 700     8 = literal value 800     9 = literal value 900   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/.normal { font-weight: normal; }.b      { font-weight: bold; }.fw1    { font-weight: 100; }.fw2    { font-weight: 200; }.fw3    { font-weight: 300; }.fw4    { font-weight: 400; }.fw5    { font-weight: 500; }.fw6    { font-weight: 600; }.fw7    { font-weight: 700; }.fw8    { font-weight: 800; }.fw9    { font-weight: 900; }@media (--breakpoint-not-small) {  .normal-ns { font-weight: normal; }  .b-ns      { font-weight: bold; }  .fw1-ns    { font-weight: 100; }  .fw2-ns    { font-weight: 200; }  .fw3-ns    { font-weight: 300; }  .fw4-ns    { font-weight: 400; }  .fw5-ns    { font-weight: 500; }  .fw6-ns    { font-weight: 600; }  .fw7-ns    { font-weight: 700; }  .fw8-ns    { font-weight: 800; }  .fw9-ns    { font-weight: 900; }}@media (--breakpoint-medium) {  .normal-m { font-weight: normal; }  .b-m      { font-weight: bold; }  .fw1-m    { font-weight: 100; }  .fw2-m    { font-weight: 200; }  .fw3-m    { font-weight: 300; }  .fw4-m    { font-weight: 400; }  .fw5-m    { font-weight: 500; }  .fw6-m    { font-weight: 600; }  .fw7-m    { font-weight: 700; }  .fw8-m    { font-weight: 800; }  .fw9-m    { font-weight: 900; }}@media (--breakpoint-large) {  .normal-l { font-weight: normal; }  .b-l      { font-weight: bold; }  .fw1-l    { font-weight: 100; }  .fw2-l    { font-weight: 200; }  .fw3-l    { font-weight: 300; }  .fw4-l    { font-weight: 400; }  .fw5-l    { font-weight: 500; }  .fw6-l    { font-weight: 600; }  .fw7-l    { font-weight: 700; }  .fw8-l    { font-weight: 800; }  .fw9-l    { font-weight: 900; }}

Font Style

http://tachyons.io/docs/typography/font-style/

/*   FONT STYLE   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/.i         { font-style: italic; }.fs-normal { font-style: normal; }@media (--breakpoint-not-small) {  .i-ns       { font-style: italic; }  .fs-normal-ns     { font-style: normal; }}@media (--breakpoint-medium) {  .i-m       { font-style: italic; }  .fs-normal-m     { font-style: normal; }}@media (--breakpoint-large) {  .i-l       { font-style: italic; }  .fs-normal-l     { font-style: normal; }}

Vertical Align

http://tachyons.io/docs/typography/vertical-align/

/*   VERTICAL ALIGN   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/.v-base     { vertical-align: baseline; }.v-mid      { vertical-align: middle; }.v-top      { vertical-align: top; }.v-btm      { vertical-align: bottom; }@media (--breakpoint-not-small) {  .v-base-ns     { vertical-align: baseline; }  .v-mid-ns      { vertical-align: middle; }  .v-top-ns      { vertical-align: top; }  .v-btm-ns      { vertical-align: bottom; }}@media (--breakpoint-medium) {  .v-base-m     { vertical-align: baseline; }  .v-mid-m      { vertical-align: middle; }  .v-top-m      { vertical-align: top; }  .v-btm-m      { vertical-align: bottom; }}@media (--breakpoint-large) {  .v-base-l     { vertical-align: baseline; }  .v-mid-l      { vertical-align: middle; }  .v-top-l      { vertical-align: top; }  .v-btm-l      { vertical-align: bottom; }}

Text Align

http://tachyons.io/docs/typography/text-align/

/*  TEXT ALIGN  Base    t = text-align  Modifiers    l = left    r = right    c = center    j = justify  Media Query Extensions:    -ns = not-small    -m  = medium    -l  = large*/.tl  { text-align: left; }.tr  { text-align: right; }.tc  { text-align: center; }.tj  { text-align: justify; }@media (--breakpoint-not-small) {  .tl-ns  { text-align: left; }  .tr-ns  { text-align: right; }  .tc-ns  { text-align: center; }  .tj-ns  { text-align: justify; }}@media (--breakpoint-medium) {  .tl-m  { text-align: left; }  .tr-m  { text-align: right; }  .tc-m  { text-align: center; }  .tj-m  { text-align: justify; }}@media (--breakpoint-large) {  .tl-l  { text-align: left; }  .tr-l  { text-align: right; }  .tc-l  { text-align: center; }  .tj-l  { text-align: justify; }}

Text Transformation

http://tachyons.io/docs/typography/text-transform/

Capitalization of text.

/*   TEXT TRANSFORM   Base:     tt = text-transform   Modifiers     c = capitalize     l = lowercase     u = uppercase     n = none   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/.ttc { text-transform: capitalize; }.ttl { text-transform: lowercase; }.ttu { text-transform: uppercase; }.ttn { text-transform: none; }@media (--breakpoint-not-small) {  .ttc-ns { text-transform: capitalize; }  .ttl-ns { text-transform: lowercase; }  .ttu-ns { text-transform: uppercase; }  .ttn-ns { text-transform: none; }}@media (--breakpoint-medium) {  .ttc-m { text-transform: capitalize; }  .ttl-m { text-transform: lowercase; }  .ttu-m { text-transform: uppercase; }  .ttn-m { text-transform: none; }}@media (--breakpoint-large) {  .ttc-l { text-transform: capitalize; }  .ttl-l { text-transform: lowercase; }  .ttu-l { text-transform: uppercase; }  .ttn-l { text-transform: none; }}

Text Decoration

http://tachyons.io/docs/typography/text-decoration/

Text underlines and strikethrough.

/* TEXT DECORATION

Media Query Extensions: -ns = not-small -m = medium -l = large */

.strike { text-decoration: line-through; } .underline { text-decoration: underline; } .no-underline { text-decoration: none; }

@media (--breakpoint-not-small) { .strike-ns { text-decoration: line-through; } .underline-ns { text-decoration: underline; } .no-underline-ns { text-decoration: none; } }

@media (--breakpoint-medium) { .strike-m { text-decoration: line-through; } .underline-m { text-decoration: underline; } .no-underline-m { text-decoration: none; } }

@media (--breakpoint-large) { .strike-l { text-decoration: line-through; } .underline-l { text-decoration: underline; } .no-underline-l { text-decoration: none; } }

White Space

http://tachyons.io/docs/typography/white-space/

/*   WHITE SPACE   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/.ws-normal { white-space: normal; }.nowrap { white-space: nowrap; }.pre { white-space: pre; }@media (--breakpoint-not-small) {  .ws-normal-ns { white-space: normal; }  .nowrap-ns { white-space: nowrap; }  .pre-ns { white-space: pre; }}@media (--breakpoint-medium) {  .ws-normal-m { white-space: normal; }  .nowrap-m { white-space: nowrap; }  .pre-m { white-space: pre; }}@media (--breakpoint-large) {  .ws-normal-l { white-space: normal; }  .nowrap-l { white-space: nowrap; }  .pre-l { white-space: pre; }}

Font Family

http://tachyons.io/docs/typography/font-family/

/*   FONT FAMILY GROUPS*/.sans-serif {  font-family: -apple-system, BlinkMacSystemFont,               'avenir next', avenir,               'helvetica neue', helvetica,               ubuntu,               roboto, noto,               'segoe ui', arial,               sans-serif;}.serif {  font-family: georgia,               times,               serif;}.system-sans-serif {  font-family: sans-serif;}.system-serif {  font-family: serif;}/* Monospaced Typefaces (for code) *//* From http://cssfontstack.com */code, .code {  font-family: Consolas,               monaco,               monospace;}.courier {  font-family: 'Courier Next',               courier,               monospace;}/* Sans-Serif Typefaces */.helvetica {  font-family: 'helvetica neue', helvetica,               sans-serif;}.avenir {  font-family: 'avenir next', avenir,               sans-serif;}/* Serif Typefaces */.athelas {  font-family: athelas,               georgia,               serif;}.georgia {  font-family: georgia,               serif;}.times {  font-family: times,               serif;}.bodoni {  font-family: "Bodoni MT",                serif;}.calisto {  font-family: "Calisto MT",                serif;}.garamond {  font-family: garamond,               serif;}.baskerville {  font-family: baskerville,               serif;}

Debug

http://tachyons.io/docs/debug/

That element along with any child node will have an outline of 1px solid gold placed on it.

.debug * { outline: 1px solid gold; }

Debug Grid

http://tachyons.io/docs/debug-grid/

The debug grid module allows you to put a background grid on any element which can help you line elements up vertically and horizontally with eachother. Sometimes across large amounts of whitespace it can be tough to see if things are aligned. The background grid comes in both 8 and 16px columns.

/*   DEBUG GRID   Can be useful for debugging layout issues   or helping to make sure things line up perfectly.   Just tack one of these classes onto a parent element.*/.debug-grid {  background:transparent url(...) repeat top left;}.debug-grid-16 {  background:transparent url(...) repeat top left;}.debug-grid-8-solid {  background:white url(...) repeat top left;}.debug-grid-16-solid {  background:white url(...) repeat top left;}

Box Sizing

http://tachyons.io/docs/layout/box-sizing/

.border-box {  box-sizing: border-box;}

Spacing

http://tachyons.io/docs/layout/spacing/

/* Variables */:root {  --spacing-none: 0;  --spacing-extra-small: .25rem;  --spacing-small: .5rem;  --spacing-medium: 1rem;  --spacing-large: 2rem;  --spacing-extra-large: 4rem;  --spacing-extra-extra-large: 8rem;  --spacing-extra-extra-extra-large: 16rem;}/*   SPACING   An eight step powers of two scale ranging from 0 to 16rem.   Base:     p = padding     m = margin   Modifiers:     a = all     h = horizontal     v = vertical     t = top     r = right     b = bottom     l = left     0 = none     1 = 1st step in spacing scale     2 = 2nd step in spacing scale     3 = 3rd step in spacing scale     4 = 4th step in spacing scale     5 = 5th step in spacing scale     6 = 6th step in spacing scale     7 = 7th step in spacing scale   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/

Padding All

.pa0 { padding: var(--spacing-none); }.pa1 { padding: var(--spacing-extra-small); }.pa2 { padding: var(--spacing-small); }.pa3 { padding: var(--spacing-medium); }.pa4 { padding: var(--spacing-large); }.pa5 { padding: var(--spacing-extra-large); }.pa6 { padding: var(--spacing-extra-extra-large); }.pa7 { padding: var(--spacing-extra-extra-extra-large); }@media (--breakpoint-not-small) {  .pa0-ns  {  padding: var(--spacing-none); }  .pa1-ns {  padding: var(--spacing-extra-small); }  .pa2-ns  {  padding: var(--spacing-small); }  .pa3-ns  {  padding: var(--spacing-medium); }  .pa4-ns  {  padding: var(--spacing-large); }  .pa5-ns  {  padding: var(--spacing-extra-large); }  .pa6-ns {  padding: var(--spacing-extra-extra-large); }  .pa7-ns { padding: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-medium) {  .pa0-m  {  padding: var(--spacing-none); }  .pa1-m {  padding: var(--spacing-extra-small); }  .pa2-m  {  padding: var(--spacing-small); }  .pa3-m  {  padding: var(--spacing-medium); }  .pa4-m  {  padding: var(--spacing-large); }  .pa5-m  {  padding: var(--spacing-extra-large); }  .pa6-m {  padding: var(--spacing-extra-extra-large); }  .pa7-m { padding: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-large) {  .pa0-l  {  padding: var(--spacing-none); }  .pa1-l {  padding: var(--spacing-extra-small); }  .pa2-l  {  padding: var(--spacing-small); }  .pa3-l  {  padding: var(--spacing-medium); }  .pa4-l  {  padding: var(--spacing-large); }  .pa5-l  {  padding: var(--spacing-extra-large); }  .pa6-l {  padding: var(--spacing-extra-extra-large); }  .pa7-l { padding: var(--spacing-extra-extra-extra-large); }}

Padding Horizontal

.ph0 {  padding-left: var(--spacing-none);  padding-right: var(--spacing-none);}.ph1 {  padding-left: var(--spacing-extra-small);  padding-right: var(--spacing-extra-small);}.ph2 {  padding-left: var(--spacing-small);  padding-right: var(--spacing-small);}.ph3 {  padding-left: var(--spacing-medium);  padding-right: var(--spacing-medium);}.ph4 {  padding-left: var(--spacing-large);  padding-right: var(--spacing-large);}.ph5 {  padding-left: var(--spacing-extra-large);  padding-right: var(--spacing-extra-large);}.ph6 {  padding-left: var(--spacing-extra-extra-large);  padding-right: var(--spacing-extra-extra-large);}.ph7 {  padding-left: var(--spacing-extra-extra-extra-large);  padding-right: var(--spacing-extra-extra-extra-large);}@media (--breakpoint-not-small) {  .ph0-ns {    padding-left: var(--spacing-none);    padding-right: var(--spacing-none);  }  .ph1-ns {    padding-left: var(--spacing-extra-small);    padding-right: var(--spacing-extra-small);  }  .ph2-ns {    padding-left: var(--spacing-small);    padding-right: var(--spacing-small);  }  .ph3-ns {    padding-left: var(--spacing-medium);    padding-right: var(--spacing-medium);  }  .ph4-ns {    padding-left: var(--spacing-large);    padding-right: var(--spacing-large);  }  .ph5-ns {    padding-left: var(--spacing-extra-large);    padding-right: var(--spacing-extra-large);  }  .ph6-ns {    padding-left: var(--spacing-extra-extra-large);    padding-right: var(--spacing-extra-extra-large);  }  .ph7-ns {    padding-left: var(--spacing-extra-extra-extra-large);    padding-right: var(--spacing-extra-extra-extra-large);  }}@media (--breakpoint-medium) {  .ph0-m {    padding-left: var(--spacing-none);    padding-right: var(--spacing-none);  }  .ph1-m {    padding-left: var(--spacing-extra-small);    padding-right: var(--spacing-extra-small);  }  .ph2-m {    padding-left: var(--spacing-small);    padding-right: var(--spacing-small);  }  .ph3-m {    padding-left: var(--spacing-medium);    padding-right: var(--spacing-medium);  }  .ph4-m {    padding-left: var(--spacing-large);    padding-right: var(--spacing-large);  }  .ph5-m {    padding-left: var(--spacing-extra-large);    padding-right: var(--spacing-extra-large);  }  .ph6-m {    padding-left: var(--spacing-extra-extra-large);    padding-right: var(--spacing-extra-extra-large);  }  .ph7-m {    padding-left: var(--spacing-extra-extra-extra-large);    padding-right: var(--spacing-extra-extra-extra-large);  }}@media (--breakpoint-large) {  .ph0-l {    padding-left: var(--spacing-none);    padding-right: var(--spacing-none);  }  .ph1-l {    padding-left: var(--spacing-extra-small);    padding-right: var(--spacing-extra-small);  }  .ph2-l {    padding-left: var(--spacing-small);    padding-right: var(--spacing-small);  }  .ph3-l {    padding-left: var(--spacing-medium);    padding-right: var(--spacing-medium);  }  .ph4-l {    padding-left: var(--spacing-large);    padding-right: var(--spacing-large);  }  .ph5-l {    padding-left: var(--spacing-extra-large);    padding-right: var(--spacing-extra-large);  }  .ph6-l {    padding-left: var(--spacing-extra-extra-large);    padding-right: var(--spacing-extra-extra-large);  }  .ph7-l {    padding-left: var(--spacing-extra-extra-extra-large);    padding-right: var(--spacing-extra-extra-extra-large);  }}

Padding Vertical

.pv0 {  padding-top: var(--spacing-none);  padding-bottom: var(--spacing-none);}.pv1 {  padding-top: var(--spacing-extra-small);  padding-bottom: var(--spacing-extra-small);}.pv2 {  padding-top: var(--spacing-small);  padding-bottom: var(--spacing-small);}.pv3 {  padding-top: var(--spacing-medium);  padding-bottom: var(--spacing-medium);}.pv4 {  padding-top: var(--spacing-large);  padding-bottom: var(--spacing-large);}.pv5 {  padding-top: var(--spacing-extra-large);  padding-bottom: var(--spacing-extra-large);}.pv6 {  padding-top: var(--spacing-extra-extra-large);  padding-bottom: var(--spacing-extra-extra-large);}.pv7 {  padding-top: var(--spacing-extra-extra-extra-large);  padding-bottom: var(--spacing-extra-extra-extra-large);}@media (--breakpoint-not-small) {  .pv0-ns {    padding-top: var(--spacing-none);    padding-bottom: var(--spacing-none);  }  .pv1-ns {    padding-top: var(--spacing-extra-small);    padding-bottom: var(--spacing-extra-small);  }  .pv2-ns {    padding-top: var(--spacing-small);    padding-bottom: var(--spacing-small);  }  .pv3-ns {    padding-top: var(--spacing-medium);    padding-bottom: var(--spacing-medium);  }  .pv4-ns {    padding-top: var(--spacing-large);    padding-bottom: var(--spacing-large);  }  .pv5-ns {    padding-top: var(--spacing-extra-large);    padding-bottom: var(--spacing-extra-large);  }  .pv6-ns {    padding-top: var(--spacing-extra-extra-large);    padding-bottom: var(--spacing-extra-extra-large);  }  .pv7-ns {    padding-top: var(--spacing-extra-extra-extra-large);    padding-bottom: var(--spacing-extra-extra-extra-large);  }}@media (--breakpoint-medium) {  .pv0-m {    padding-top: var(--spacing-none);    padding-bottom: var(--spacing-none);  }  .pv1-m {    padding-top: var(--spacing-extra-small);    padding-bottom: var(--spacing-extra-small);  }  .pv2-m {    padding-top: var(--spacing-small);    padding-bottom: var(--spacing-small);  }  .pv3-m {    padding-top: var(--spacing-medium);    padding-bottom: var(--spacing-medium);  }  .pv4-m {    padding-top: var(--spacing-large);    padding-bottom: var(--spacing-large);  }  .pv5-m {    padding-top: var(--spacing-extra-large);    padding-bottom: var(--spacing-extra-large);  }  .pv6-m {    padding-top: var(--spacing-extra-extra-large);    padding-bottom: var(--spacing-extra-extra-large);  }  .pv7-m {    padding-top: var(--spacing-extra-extra-extra-large);    padding-bottom: var(--spacing-extra-extra-extra-large);  }}@media (--breakpoint-large) {  .pv0-l {    padding-top: var(--spacing-none);    padding-bottom: var(--spacing-none);  }  .pv1-l {    padding-top: var(--spacing-extra-small);    padding-bottom: var(--spacing-extra-small);  }  .pv2-l {    padding-top: var(--spacing-small);    padding-bottom: var(--spacing-small);  }  .pv3-l {    padding-top: var(--spacing-medium);    padding-bottom: var(--spacing-medium);  }  .pv4-l {    padding-top: var(--spacing-large);    padding-bottom: var(--spacing-large);  }  .pv5-l {    padding-top: var(--spacing-extra-large);    padding-bottom: var(--spacing-extra-large);  }  .pv6-l {    padding-top: var(--spacing-extra-extra-large);    padding-bottom: var(--spacing-extra-extra-large);  }  .pv7-l {    padding-top: var(--spacing-extra-extra-extra-large);    padding-bottom: var(--spacing-extra-extra-extra-large);  }}

Padding Left

.pl0 { padding-left: var(--spacing-none); }.pl1 { padding-left: var(--spacing-extra-small); }.pl2 { padding-left: var(--spacing-small); }.pl3 { padding-left: var(--spacing-medium); }.pl4 { padding-left: var(--spacing-large); }.pl5 { padding-left: var(--spacing-extra-large); }.pl6 { padding-left: var(--spacing-extra-extra-large); }.pl7 { padding-left: var(--spacing-extra-extra-extra-large); }@media (--breakpoint-not-small) {  .pl0-ns  {  padding-left: var(--spacing-none); }  .pl1-ns {  padding-left: var(--spacing-extra-small); }  .pl2-ns  {  padding-left: var(--spacing-small); }  .pl3-ns  {  padding-left: var(--spacing-medium); }  .pl4-ns  {  padding-left: var(--spacing-large); }  .pl5-ns  {  padding-left: var(--spacing-extra-large); }  .pl6-ns {  padding-left: var(--spacing-extra-extra-large); }  .pl7-ns { padding-left: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-medium) {  .pl0-m  {  padding-left: var(--spacing-none); }  .pl1-m {  padding-left: var(--spacing-extra-small); }  .pl2-m  {  padding-left: var(--spacing-small); }  .pl3-m  {  padding-left: var(--spacing-medium); }  .pl4-m  {  padding-left: var(--spacing-large); }  .pl5-m  {  padding-left: var(--spacing-extra-large); }  .pl6-m {  padding-left: var(--spacing-extra-extra-large); }  .pl7-m { padding-left: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-large) {  .pl0-l  {  padding-left: var(--spacing-none); }  .pl1-l {  padding-left: var(--spacing-extra-small); }  .pl2-l  {  padding-left: var(--spacing-small); }  .pl3-l  {  padding-left: var(--spacing-medium); }  .pl4-l  {  padding-left: var(--spacing-large); }  .pl5-l  {  padding-left: var(--spacing-extra-large); }  .pl6-l {  padding-left: var(--spacing-extra-extra-large); }  .pl7-l { padding-left: var(--spacing-extra-extra-extra-large); }}

Padding Right

.pr0 { padding-right: var(--spacing-none); }.pr1 { padding-right: var(--spacing-extra-small); }.pr2 { padding-right: var(--spacing-small); }.pr3 { padding-right: var(--spacing-medium); }.pr4 { padding-right: var(--spacing-large); }.pr5 { padding-right: var(--spacing-extra-large); }.pr6 { padding-right: var(--spacing-extra-extra-large); }.pr7 { padding-right: var(--spacing-extra-extra-extra-large); }@media (--breakpoint-not-small) {  .pr0-ns  {  padding-right: var(--spacing-none); }  .pr1-ns {  padding-right: var(--spacing-extra-small); }  .pr2-ns  {  padding-right: var(--spacing-small); }  .pr3-ns  {  padding-right: var(--spacing-medium); }  .pr4-ns  {  padding-right: var(--spacing-large); }  .pr5-ns {   padding-right: var(--spacing-extra-large); }  .pr6-ns {  padding-right: var(--spacing-extra-extra-large); }  .pr7-ns { padding-right: var(--spacing-extra-extra-extra-large); }  }@media (--breakpoint-medium) {  .pr0-m  {  padding-right: var(--spacing-none); }  .pr1-m {  padding-right: var(--spacing-extra-small); }  .pr2-m  {  padding-right: var(--spacing-small); }  .pr3-m  {  padding-right: var(--spacing-medium); }  .pr4-m  {  padding-right: var(--spacing-large); }  .pr5-m  {  padding-right: var(--spacing-extra-large); }  .pr6-m {  padding-right: var(--spacing-extra-extra-large); }  .pr7-m { padding-right: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-large) {  .pr0-l  {  padding-right: var(--spacing-none); }  .pr1-l {  padding-right: var(--spacing-extra-small); }  .pr2-l  {  padding-right: var(--spacing-small); }  .pr3-l  {  padding-right: var(--spacing-medium); }  .pr4-l  {  padding-right: var(--spacing-large); }  .pr5-l  {  padding-right: var(--spacing-extra-large); }  .pr6-l {  padding-right: var(--spacing-extra-extra-large); }  .pr7-l { padding-right: var(--spacing-extra-extra-extra-large); }}

Padding Top

.pt0 { padding-top: var(--spacing-none); }.pt1 { padding-top: var(--spacing-extra-small); }.pt2 { padding-top: var(--spacing-small); }.pt3 { padding-top: var(--spacing-medium); }.pt4 { padding-top: var(--spacing-large); }.pt5 { padding-top: var(--spacing-extra-large); }.pt6 { padding-top: var(--spacing-extra-extra-large); }.pt7 { padding-top: var(--spacing-extra-extra-extra-large); }@media (--breakpoint-not-small) {  .pt0-ns  {  padding-top: var(--spacing-none); }  .pt1-ns {  padding-top: var(--spacing-extra-small); }  .pt2-ns  {  padding-top: var(--spacing-small); }  .pt3-ns  {  padding-top: var(--spacing-medium); }  .pt4-ns  {  padding-top: var(--spacing-large); }  .pt5-ns  {  padding-top: var(--spacing-extra-large); }  .pt6-ns {  padding-top: var(--spacing-extra-extra-large); }  .pt7-ns { padding-top: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-medium) {  .pt0-m  {  padding-top: var(--spacing-none); }  .pt1-m {  padding-top: var(--spacing-extra-small); }  .pt2-m  {  padding-top: var(--spacing-small); }  .pt3-m  {  padding-top: var(--spacing-medium); }  .pt4-m  {  padding-top: var(--spacing-large); }  .pt5-m  {  padding-top: var(--spacing-extra-large); }  .pt6-m {  padding-top: var(--spacing-extra-extra-large); }  .pt7-m { padding-top: var(--spacing-extra-extra-extra-large); } }@media (--breakpoint-large) {  .pt0-l  {  padding-top: var(--spacing-none); }  .pt1-l {  padding-top: var(--spacing-extra-small); }  .pt2-l  {  padding-top: var(--spacing-small); }  .pt3-l  {  padding-top: var(--spacing-medium); }  .pt4-l  {  padding-top: var(--spacing-large); }  .pt5-l  {  padding-top: var(--spacing-extra-large); }  .pt6-l {  padding-top: var(--spacing-extra-extra-large); }  .pt7-l { padding-top: var(--spacing-extra-extra-extra-large); } }

Padding Bottom

.pb0 { padding-bottom: var(--spacing-none); }.pb1 { padding-bottom: var(--spacing-extra-small); }.pb2 { padding-bottom: var(--spacing-small); }.pb3 { padding-bottom: var(--spacing-medium); }.pb4 { padding-bottom: var(--spacing-large); }.pb5 { padding-bottom: var(--spacing-extra-large); }.pb6 { padding-bottom: var(--spacing-extra-extra-large); }.pb7 { padding-bottom: var(--spacing-extra-extra-extra-large); }@media (--breakpoint-not-small) {  .pb0-ns  {  padding-bottom: var(--spacing-none); }  .pb1-ns {  padding-bottom: var(--spacing-extra-small); }  .pb2-ns  {  padding-bottom: var(--spacing-small); }  .pb3-ns  {  padding-bottom: var(--spacing-medium); }  .pb4-ns  {  padding-bottom: var(--spacing-large); }  .pb5-ns  {  padding-bottom: var(--spacing-extra-large); }  .pb6-ns {  padding-bottom: var(--spacing-extra-extra-large); }  .pb7-ns { padding-bottom: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-medium) {  .pb0-m  {  padding-bottom: var(--spacing-none); }  .pb1-m {  padding-bottom: var(--spacing-extra-small); }  .pb2-m  {  padding-bottom: var(--spacing-small); }  .pb3-m  {  padding-bottom: var(--spacing-medium); }  .pb4-m  {  padding-bottom: var(--spacing-large); }  .pb5-m  {  padding-bottom: var(--spacing-extra-large); }  .pb6-m {  padding-bottom: var(--spacing-extra-extra-large); }  .pb7-m { padding-bottom: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-large) {  .pb0-l  {  padding-bottom: var(--spacing-none); }  .pb1-l {  padding-bottom: var(--spacing-extra-small); }  .pb2-l  {  padding-bottom: var(--spacing-small); }  .pb3-l  {  padding-bottom: var(--spacing-medium); }  .pb4-l  {  padding-bottom: var(--spacing-large); }  .pb5-l  {  padding-bottom: var(--spacing-extra-large); }  .pb6-l {  padding-bottom: var(--spacing-extra-extra-large); }  .pb7-l { padding-bottom: var(--spacing-extra-extra-extra-large); }}

Margin All

.ma0  {  margin: var(--spacing-none); }.ma1 {  margin: var(--spacing-extra-small); }.ma2  {  margin: var(--spacing-small); }.ma3  {  margin: var(--spacing-medium); }.ma4  {  margin: var(--spacing-large); }.ma5  {  margin: var(--spacing-extra-large); }.ma6 {  margin: var(--spacing-extra-extra-large); }.ma7 { margin: var(--spacing-extra-extra-extra-large); }@media (--breakpoint-not-small) {  .ma0-ns  {  margin: var(--spacing-none); }  .ma1-ns {  margin: var(--spacing-extra-small); }  .ma2-ns  {  margin: var(--spacing-small); }  .ma3-ns  {  margin: var(--spacing-medium); }  .ma4-ns  {  margin: var(--spacing-large); }  .ma5-ns  {  margin: var(--spacing-extra-large); }  .ma6-ns {  margin: var(--spacing-extra-extra-large); }  .ma7-ns { margin: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-medium) {  .ma0-m  {  margin: var(--spacing-none); }  .ma1-m {  margin: var(--spacing-extra-small); }  .ma2-m  {  margin: var(--spacing-small); }  .ma3-m  {  margin: var(--spacing-medium); }  .ma4-m  {  margin: var(--spacing-large); }  .ma5-m  {  margin: var(--spacing-extra-large); }  .ma6-m {  margin: var(--spacing-extra-extra-large); }  .ma7-m { margin: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-large) {  .ma0-l  {  margin: var(--spacing-none); }  .ma1-l {  margin: var(--spacing-extra-small); }  .ma2-l  {  margin: var(--spacing-small); }  .ma3-l  {  margin: var(--spacing-medium); }  .ma4-l  {  margin: var(--spacing-large); }  .ma5-l  {  margin: var(--spacing-extra-large); }  .ma6-l {  margin: var(--spacing-extra-extra-large); }  .ma7-l { margin: var(--spacing-extra-extra-extra-large); }}

Margin Horizontal

mh0   {  margin-left: var(--spacing-none);  margin-right: var(--spacing-none);}.mh1   {  margin-left: var(--spacing-extra-small);  margin-right: var(--spacing-extra-small);}.mh2   {  margin-left: var(--spacing-small);  margin-right: var(--spacing-small);}.mh3   {  margin-left: var(--spacing-medium);  margin-right: var(--spacing-medium);}.mh4   {  margin-left: var(--spacing-large);  margin-right: var(--spacing-large);}.mh5   {  margin-left: var(--spacing-extra-large);  margin-right: var(--spacing-extra-large);}.mh6  {  margin-left: var(--spacing-extra-extra-large);  margin-right: var(--spacing-extra-extra-large);}.mh7  {  margin-left: var(--spacing-extra-extra-extra-large);  margin-right: var(--spacing-extra-extra-extra-large);}@media (--breakpoint-not-small) {  .mh0-ns   {    margin-left: var(--spacing-none);    margin-right: var(--spacing-none);  }  .mh1-ns   {    margin-left: var(--spacing-extra-small);    margin-right: var(--spacing-extra-small);  }  .mh2-ns   {    margin-left: var(--spacing-small);    margin-right: var(--spacing-small);  }  .mh3-ns   {    margin-left: var(--spacing-medium);    margin-right: var(--spacing-medium);  }  .mh4-ns   {    margin-left: var(--spacing-large);    margin-right: var(--spacing-large);  }  .mh5-ns   {    margin-left: var(--spacing-extra-large);    margin-right: var(--spacing-extra-large);  }  .mh6-ns  {    margin-left: var(--spacing-extra-extra-large);    margin-right: var(--spacing-extra-extra-large);  }  .mh7-ns  {    margin-left: var(--spacing-extra-extra-extra-large);    margin-right: var(--spacing-extra-extra-extra-large);  }}@media (--breakpoint-medium) {  .mh0-m {    margin-left: var(--spacing-none);    margin-right: var(--spacing-none);  }  .mh1-m {    margin-left: var(--spacing-extra-small);    margin-right: var(--spacing-extra-small);  }  .mh2-m {    margin-left: var(--spacing-small);    margin-right: var(--spacing-small);  }  .mh3-m {    margin-left: var(--spacing-medium);    margin-right: var(--spacing-medium);  }  .mh4-m {    margin-left: var(--spacing-large);    margin-right: var(--spacing-large);  }  .mh5-m {    margin-left: var(--spacing-extra-large);    margin-right: var(--spacing-extra-large);  }  .mh6-m {    margin-left: var(--spacing-extra-extra-large);    margin-right: var(--spacing-extra-extra-large);  }  .mh7-m {    margin-left: var(--spacing-extra-extra-extra-large);    margin-right: var(--spacing-extra-extra-extra-large);  }}@media (--breakpoint-large) {  .mh0-l {    margin-left: var(--spacing-none);    margin-right: var(--spacing-none);  }  .mh1-l {    margin-left: var(--spacing-extra-small);    margin-right: var(--spacing-extra-small);  }  .mh2-l {    margin-left: var(--spacing-small);    margin-right: var(--spacing-small);  }  .mh3-l {    margin-left: var(--spacing-medium);    margin-right: var(--spacing-medium);  }  .mh4-l {    margin-left: var(--spacing-large);    margin-right: var(--spacing-large);  }  .mh5-l {    margin-left: var(--spacing-extra-large);    margin-right: var(--spacing-extra-large);  }  .mh6-l {    margin-left: var(--spacing-extra-extra-large);    margin-right: var(--spacing-extra-extra-large);  }  .mh7-l {    margin-left: var(--spacing-extra-extra-extra-large);    margin-right: var(--spacing-extra-extra-extra-large);  } } 

Margin Vertical

.mv0   {  margin-top: var(--spacing-none);  margin-bottom: var(--spacing-none);}.mv1  {  margin-top: var(--spacing-extra-small);  margin-bottom: var(--spacing-extra-small);}.mv2   {  margin-top: var(--spacing-small);  margin-bottom: var(--spacing-small);}.mv3   {  margin-top: var(--spacing-medium);  margin-bottom: var(--spacing-medium);}.mv4   {  margin-top: var(--spacing-large);  margin-bottom: var(--spacing-large);}.mv5   {  margin-top: var(--spacing-extra-large);  margin-bottom: var(--spacing-extra-large);}.mv6  {  margin-top: var(--spacing-extra-extra-large);  margin-bottom: var(--spacing-extra-extra-large);}.mv7  {  margin-top: var(--spacing-extra-extra-extra-large);  margin-bottom: var(--spacing-extra-extra-extra-large);}@media (--breakpoint-not-small) {  .mv0-ns   {    margin-top: var(--spacing-none);    margin-bottom: var(--spacing-none);  }  .mv1-ns  {    margin-top: var(--spacing-extra-small);    margin-bottom: var(--spacing-extra-small);  }  .mv2-ns   {    margin-top: var(--spacing-small);    margin-bottom: var(--spacing-small);  }  .mv3-ns   {    margin-top: var(--spacing-medium);    margin-bottom: var(--spacing-medium);  }  .mv4-ns   {    margin-top: var(--spacing-large);    margin-bottom: var(--spacing-large);  }  .mv5-ns   {    margin-top: var(--spacing-extra-large);    margin-bottom: var(--spacing-extra-large);  }  .mv6-ns  {    margin-top: var(--spacing-extra-extra-large);    margin-bottom: var(--spacing-extra-extra-large);  }  .mv7-ns  {    margin-top: var(--spacing-extra-extra-extra-large);    margin-bottom: var(--spacing-extra-extra-extra-large);  }}@media (--breakpoint-medium) {  .mv0-m {    margin-top: var(--spacing-none);    margin-bottom: var(--spacing-none);  }  .mv1-m {    margin-top: var(--spacing-extra-small);    margin-bottom: var(--spacing-extra-small);  }  .mv2-m {    margin-top: var(--spacing-small);    margin-bottom: var(--spacing-small);  }  .mv3-m {    margin-top: var(--spacing-medium);    margin-bottom: var(--spacing-medium);  }  .mv4-m {    margin-top: var(--spacing-large);    margin-bottom: var(--spacing-large);  }  .mv5-m {    margin-top: var(--spacing-extra-large);    margin-bottom: var(--spacing-extra-large);  }  .mv6-m {    margin-top: var(--spacing-extra-extra-large);    margin-bottom: var(--spacing-extra-extra-large);  }  .mv7-m {    margin-top: var(--spacing-extra-extra-extra-large);    margin-bottom: var(--spacing-extra-extra-extra-large);  }  }@media (--breakpoint-large) {  .mv0-l {    margin-top: var(--spacing-none);    margin-bottom: var(--spacing-none);  }  .mv1-l {    margin-top: var(--spacing-extra-small);    margin-bottom: var(--spacing-extra-small);  }  .mv2-l {    margin-top: var(--spacing-small);    margin-bottom: var(--spacing-small);  }  .mv3-l {    margin-top: var(--spacing-medium);    margin-bottom: var(--spacing-medium);  }  .mv4-l {    margin-top: var(--spacing-large);    margin-bottom: var(--spacing-large);  }  .mv5-l {    margin-top: var(--spacing-extra-large);    margin-bottom: var(--spacing-extra-large);  }  .mv6-l {    margin-top: var(--spacing-extra-extra-large);    margin-bottom: var(--spacing-extra-extra-large);  }  .mv7-l {    margin-top: var(--spacing-extra-extra-extra-large);    margin-bottom: var(--spacing-extra-extra-extra-large);  }  }

Margin Left

.ml0  {  margin-left: var(--spacing-none); }.ml1 {  margin-left: var(--spacing-extra-small); }.ml2  {  margin-left: var(--spacing-small); }.ml3  {  margin-left: var(--spacing-medium); }.ml4  {  margin-left: var(--spacing-large); }.ml5  {  margin-left: var(--spacing-extra-large); }.ml6 {  margin-left: var(--spacing-extra-extra-large); }.ml7 { margin-left: var(--spacing-extra-extra-extra-large); }@media (--breakpoint-not-small) {  .ml0-ns  {  margin-left: var(--spacing-none); }  .ml1-ns {  margin-left: var(--spacing-extra-small); }  .ml2-ns  {  margin-left: var(--spacing-small); }  .ml3-ns  {  margin-left: var(--spacing-medium); }  .ml4-ns  {  margin-left: var(--spacing-large); }  .ml5-ns  {  margin-left: var(--spacing-extra-large); }  .ml6-ns {  margin-left: var(--spacing-extra-extra-large); }  .ml7-ns { margin-left: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-medium) {  .ml0-m  {  margin-left: var(--spacing-none); }  .ml1-m {  margin-left: var(--spacing-extra-small); }  .ml2-m  {  margin-left: var(--spacing-small); }  .ml3-m  {  margin-left: var(--spacing-medium); }  .ml4-m  {  margin-left: var(--spacing-large); }  .ml5-m  {  margin-left: var(--spacing-extra-large); }  .ml6-m {  margin-left: var(--spacing-extra-extra-large); }  .ml7-m { margin-left: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-large) {  .ml0-l  {  margin-left: var(--spacing-none); }  .ml1-l {  margin-left: var(--spacing-extra-small); }  .ml2-l  {  margin-left: var(--spacing-small); }  .ml3-l  {  margin-left: var(--spacing-medium); }  .ml4-l  {  margin-left: var(--spacing-large); }  .ml5-l  {  margin-left: var(--spacing-extra-large); }  .ml6-l {  margin-left: var(--spacing-extra-extra-large); }  .ml7-l { margin-left: var(--spacing-extra-extra-extra-large); }}

Margin Right

.mr0  {  margin-right: var(--spacing-none); }.mr1 {  margin-right: var(--spacing-extra-small); }.mr2  {  margin-right: var(--spacing-small); }.mr3  {  margin-right: var(--spacing-medium); }.mr4  {  margin-right: var(--spacing-large); }.mr5  {  margin-right: var(--spacing-extra-large); }.mr6 {  margin-right: var(--spacing-extra-extra-large); }.mr7 { margin-right: var(--spacing-extra-extra-extra-large); }@media (--breakpoint-not-small) {  .mr0-ns  {  margin-right: var(--spacing-none); }  .mr1-ns {  margin-right: var(--spacing-extra-small); }  .mr2-ns  {  margin-right: var(--spacing-small); }  .mr3-ns  {  margin-right: var(--spacing-medium); }  .mr4-ns  {  margin-right: var(--spacing-large); }  .mr5-ns  {  margin-right: var(--spacing-extra-large); }  .mr6-ns {  margin-right: var(--spacing-extra-extra-large); }  .mr7-ns { margin-right: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-medium) {  .mr0-m  {  margin-right: var(--spacing-none); }  .mr1-m {  margin-right: var(--spacing-extra-small); }  .mr2-m  {  margin-right: var(--spacing-small); }  .mr3-m  {  margin-right: var(--spacing-medium); }  .mr4-m  {  margin-right: var(--spacing-large); }  .mr5-m  {  margin-right: var(--spacing-extra-large); }  .mr6-m {  margin-right: var(--spacing-extra-extra-large); }  .mr7-m { margin-right: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-large) {  .mr0-l  {  margin-right: var(--spacing-none); }  .mr1-l {  margin-right: var(--spacing-extra-small); }  .mr2-l  {  margin-right: var(--spacing-small); }  .mr3-l  {  margin-right: var(--spacing-medium); }  .mr4-l  {  margin-right: var(--spacing-large); }  .mr5-l  {  margin-right: var(--spacing-extra-large); }  .mr6-l {  margin-right: var(--spacing-extra-extra-large); }  .mr7-l { margin-right: var(--spacing-extra-extra-extra-large); }}

Margin Top

.mt0  {  margin-top: var(--spacing-none); }.mt1 {  margin-top: var(--spacing-extra-small); }.mt2  {  margin-top: var(--spacing-small); }.mt3  {  margin-top: var(--spacing-medium); }.mt4  {  margin-top: var(--spacing-large); }.mt5  {  margin-top: var(--spacing-extra-large); }.mt6 {  margin-top: var(--spacing-extra-extra-large); }.mt7 { margin-top: var(--spacing-extra-extra-extra-large); }@media (--breakpoint-not-small) {  .mt0-ns  {  margin-top: var(--spacing-none); }  .mt1-ns {  margin-top: var(--spacing-extra-small); }  .mt2-ns  {  margin-top: var(--spacing-small); }  .mt3-ns  {  margin-top: var(--spacing-medium); }  .mt4-ns  {  margin-top: var(--spacing-large); }  .mt5-ns  {  margin-top: var(--spacing-extra-large); }  .mt6-ns {  margin-top: var(--spacing-extra-extra-large); }  .mt7-ns { margin-top: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-medium) {  .mt0-m  {  margin-top: var(--spacing-none); }  .mt1-m {  margin-top: var(--spacing-extra-small); }  .mt2-m  {  margin-top: var(--spacing-small); }  .mt3-m  {  margin-top: var(--spacing-medium); }  .mt4-m  {  margin-top: var(--spacing-large); }  .mt5-m  {  margin-top: var(--spacing-extra-large); }  .mt6-m {  margin-top: var(--spacing-extra-extra-large); }  .mt7-m { margin-top: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-large) {  .mt0-l  {  margin-top: var(--spacing-none); }  .mt1-l {  margin-top: var(--spacing-extra-small); }  .mt2-l  {  margin-top: var(--spacing-small); }  .mt3-l  {  margin-top: var(--spacing-medium); }  .mt4-l  {  margin-top: var(--spacing-large); }  .mt5-l  {  margin-top: var(--spacing-extra-large); }  .mt6-l {  margin-top: var(--spacing-extra-extra-large); }  .mt7-l { margin-top: var(--spacing-extra-extra-extra-large); }}

Margin Bottom

.mb0  {  margin-bottom: var(--spacing-none); }.mb1 {  margin-bottom: var(--spacing-extra-small); }.mb2  {  margin-bottom: var(--spacing-small); }.mb3  {  margin-bottom: var(--spacing-medium); }.mb4  {  margin-bottom: var(--spacing-large); }.mb5  {  margin-bottom: var(--spacing-extra-large); }.mb6 {  margin-bottom: var(--spacing-extra-extra-large); }.mb7 { margin-bottom: var(--spacing-extra-extra-extra-large); }@media (--breakpoint-not-small) {  .mb0-ns  {  margin-bottom: var(--spacing-none); }  .mb1-ns {  margin-bottom: var(--spacing-extra-small); }  .mb2-ns  {  margin-bottom: var(--spacing-small); }  .mb3-ns  {  margin-bottom: var(--spacing-medium); }  .mb4-ns  {  margin-bottom: var(--spacing-large); }  .mb5-ns  {  margin-bottom: var(--spacing-extra-large); }  .mb6-ns {  margin-bottom: var(--spacing-extra-extra-large); }  .mb7-ns { margin-bottom: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-medium) {  .mb0-m  {  margin-bottom: var(--spacing-none); }  .mb1-m {  margin-bottom: var(--spacing-extra-small); }  .mb2-m  {  margin-bottom: var(--spacing-small); }  .mb3-m  {  margin-bottom: var(--spacing-medium); }  .mb4-m  {  margin-bottom: var(--spacing-large); }  .mb5-m  {  margin-bottom: var(--spacing-extra-large); }  .mb6-m {  margin-bottom: var(--spacing-extra-extra-large); }  .mb7-m { margin-bottom: var(--spacing-extra-extra-extra-large); }}@media (--breakpoint-large) {  .mb0-l  {  margin-bottom: var(--spacing-none); }  .mb1-l {  margin-bottom: var(--spacing-extra-small); }  .mb2-l  {  margin-bottom: var(--spacing-small); }  .mb3-l  {  margin-bottom: var(--spacing-medium); }  .mb4-l  {  margin-bottom: var(--spacing-large); }  .mb5-l  {  margin-bottom: var(--spacing-extra-large); }  .mb6-l {  margin-bottom: var(--spacing-extra-extra-large); }  .mb7-l { margin-bottom: var(--spacing-extra-extra-extra-large); }}

Floats

/*   FLOATS   1. Floated elements are automatically rendered as block level elements.      Setting floats to display inline will fix the double margin bug in      ie6. You know... just in case.   2. Don't forget to clearfix your floats with .cf   Base:     f = float   Modifiers:     l = left     r = right     n = none   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/.fl { float: left;  _display: inline; }.fr { float: right; _display: inline; }.fn { float: none; }@media (--breakpoint-not-small) {  .fl-ns { float: left; _display: inline; }  .fr-ns { float: right; _display: inline; }  .fn-ns { float: none; }}@media (--breakpoint-medium) {  .fl-m { float: left; _display: inline; }  .fr-m { float: right; _display: inline; }  .fn-m { float: none; }}@media (--breakpoint-large) {  .fl-l { float: left; _display: inline; }  .fr-l { float: right; _display: inline; }  .fn-l { float: none; }}

Clearfix

/*   CLEARS*//* Nicolas Gallaghers Clearfix solution   Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */.cf:before,.cf:after   { content: " "; display: table; }.cf:after   { clear: both; }.cf         { *zoom: 1; }

Display

http://tachyons.io/docs/layout/display/

/*   DISPLAY   Docs: http://tachyons.io/docs/layout/display   Base:    d = display   Modifiers:    n     = none    b     = block    ib    = inline-block    it    = inline-table    t     = table    tc    = table-cell    t-row          = table-row    t-columm       = table-column    t-column-group = table-column-group   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/.dn {              display: none; }.di {              display: inline; }.db {              display: block; }.dib {             display: inline-block; }.dit {             display: inline-table; }.dt {              display: table; }.dtc {             display: table-cell; }.dt-row {          display: table-row; }.dt-row-group {    display: table-row-group; }.dt-column {       display: table-column; }.dt-column-group { display: table-column-group; }/*  This will set table to full width and then  all cells will be equal width*/.dt--fixed {  table-layout: fixed;  width: 100%;}@media (--breakpoint-not-small) {  .dn-ns {              display: none; }  .di-ns {              display: inline; }  .db-ns {              display: block; }  .dib-ns {             display: inline-block; }  .dit-ns {             display: inline-table; }  .dt-ns {              display: table; }  .dtc-ns {             display: table-cell; }  .dt-row-ns {          display: table-row; }  .dt-row-group-ns {    display: table-row-group; }  .dt-column-ns {       display: table-column; }  .dt-column-group-ns { display: table-column-group; }  .dt--fixed-ns {    table-layout: fixed;    width: 100%;  }}@media (--breakpoint-medium) {  .dn-m {              display: none; }  .di-m {              display: inline; }  .db-m {              display: block; }  .dib-m {             display: inline-block; }  .dit-m {             display: inline-table; }  .dt-m {              display: table; }  .dtc-m {             display: table-cell; }  .dt-row-m {          display: table-row; }  .dt-row-group-m {    display: table-row-group; }  .dt-column-m {       display: table-column; }  .dt-column-group-m { display: table-column-group; }  .dt--fixed-m {    table-layout: fixed;    width: 100%;  }}@media (--breakpoint-large) {  .dn-l {              display: none; }  .di-l {              display: inline; }  .db-l {              display: block; }  .dib-l {             display: inline-block; }  .dit-l {             display: inline-table; }  .dt-l {              display: table; }  .dtc-l {             display: table-cell; }  .dt-row-l {          display: table-row; }  .dt-row-group-l {    display: table-row-group; }  .dt-column-l {       display: table-column; }  .dt-column-group-l { display: table-column-group; }  .dt--fixed-l {    table-layout: fixed;    width: 100%;  }}

Widths

/*   WIDTHS   Base:     w = width   Modifiers     1 = 1st step in width scale     2 = 2nd step in width scale     3 = 3rd step in width scale     4 = 4th step in width scale     5 = 5th step in width scale     -10  = literal value 10%     -20  = literal value 20%     -25  = literal value 25%     -30  = literal value 30%     -33  = literal value 33%     -34  = literal value 34%     -40  = literal value 40%     -50  = literal value 50%     -60  = literal value 60%     -70  = literal value 70%     -75  = literal value 75%     -80  = literal value 80%     -90  = literal value 90%     -100 = literal value 100%     -third      = 100% / 3 (Not supported in opera mini or IE8)     -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)     -auto       = string value auto   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*//* Width Scale */.w1 {    width: 1rem; }.w2 {    width: 2rem; }.w3 {    width: 4rem; }.w4 {    width: 8rem; }.w5 {    width: 16rem; }.w-10 {  width:  10%; }.w-20 {  width:  20%; }.w-25 {  width:  25%; }.w-30 {  width:  30%; }.w-33 {  width:  33%; }.w-34 {  width:  34%; }.w-40 {  width:  40%; }.w-50 {  width:  50%; }.w-60 {  width:  60%; }.w-70 {  width:  70%; }.w-75 {  width:  75%; }.w-80 {  width:  80%; }.w-90 {  width:  90%; }.w-100 { width: 100%; }.w-third { width: calc(100% / 3); }.w-two-thirds { width: calc(100% / 1.5); }.w-auto { width: auto; }@media (--breakpoint-not-small) {  .w1-ns {  width: 1rem; }  .w2-ns {  width: 2rem; }  .w3-ns {  width: 4rem; }  .w4-ns {  width: 8rem; }  .w5-ns {  width: 16rem; }  .w-10-ns { width:  10%; }  .w-20-ns { width:  20%; }  .w-25-ns { width:  25%; }  .w-30-ns { width:  30%; }  .w-33-ns { width:  33%; }  .w-34-ns { width:  34%; }  .w-40-ns { width:  40%; }  .w-50-ns { width:  50%; }  .w-60-ns { width:  60%; }  .w-70-ns { width:  70%; }  .w-75-ns { width:  75%; }  .w-80-ns { width:  80%; }  .w-90-ns { width:  90%; }  .w-100-ns { width: 100%; }  .w-third-ns { width: calc(100% / 3); }  .w-two-thirds-ns { width: calc(100% / 1.5); }  .w-auto-ns { width: auto; }}@media (--breakpoint-medium) {  .w1-m {      width: 1rem; }  .w2-m {      width: 2rem; }  .w3-m {      width: 4rem; }  .w4-m {      width: 8rem; }  .w5-m {      width: 16rem; }  .w-10-m { width:  10%; }  .w-20-m { width:  20%; }  .w-25-m { width:  25%; }  .w-30-m { width:  30%; }  .w-33-m { width:  33%; }  .w-34-m { width:  34%; }  .w-40-m { width:  40%; }  .w-50-m { width:  50%; }  .w-60-m { width:  60%; }  .w-70-m { width:  70%; }  .w-75-m { width:  75%; }  .w-80-m { width:  80%; }  .w-90-m { width:  90%; }  .w-100-m { width: 100%; }  .w-third-m { width: calc(100% / 3); }  .w-two-thirds-m { width: calc(100% / 1.5); }  .w-auto-m {    width: auto; }}@media (--breakpoint-large) {  .w1-l {      width: 1rem; }  .w2-l {      width: 2rem; }  .w3-l {      width: 4rem; }  .w4-l {      width: 8rem; }  .w5-l {      width: 16rem; }  .w-10-l {    width:  10%; }  .w-20-l {    width:  20%; }  .w-25-l {    width:  25%; }  .w-30-l {    width:  30%; }  .w-33-l {    width:  33%; }  .w-34-l {    width:  34%; }  .w-40-l {    width:  40%; }  .w-50-l {    width:  50%; }  .w-60-l {    width:  60%; }  .w-70-l {    width:  70%; }  .w-75-l {    width:  75%; }  .w-80-l {    width:  80%; }  .w-90-l {    width:  90%; }  .w-100-l {   width: 100%; }  .w-third-l { width: calc(100% / 3); }  .w-two-thirds-l { width: calc(100% / 1.5); }  .w-auto-l {    width: auto; }}

Basic Grid

http://tachyons.io/docs/layout/grid/

Max Width

http://tachyons.io/docs/layout/max-widths/

/*   MAX WIDTHS   Docs: http://tachyons.io/docs/layout/max-widths/   Base:     mw = max-width   Modifiers     1 = 1st step in width scale     2 = 2nd step in width scale     3 = 3rd step in width scale     4 = 4th step in width scale     5 = 5th step in width scale     6 = 6st step in width scale     7 = 7nd step in width scale     8 = 8rd step in width scale     9 = 9th step in width scale     -100 = literal value 100%     -none  = string value none   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*//* Max Width Percentages */.mw-100  { max-width: 100%; }/* Max Width Scale */.mw1  {  max-width: 1rem; }.mw2  {  max-width: 2rem; }.mw3  {  max-width: 4rem; }.mw4  {  max-width: 8rem; }.mw5  {  max-width: 16rem; }.mw6  {  max-width: 32rem; }.mw7  {  max-width: 48rem; }.mw8  {  max-width: 64rem; }.mw9  {  max-width: 96rem; }/* Max Width String Properties */.mw-none { max-width: none; }@media (--breakpoint-not-small) {  .mw-100-ns  { max-width: 100%; }  .mw1-ns  {  max-width: 1rem; }  .mw2-ns  {  max-width: 2rem; }  .mw3-ns  {  max-width: 4rem; }  .mw4-ns  {  max-width: 8rem; }  .mw5-ns  {  max-width: 16rem; }  .mw6-ns  {  max-width: 32rem; }  .mw7-ns  {  max-width: 48rem; }  .mw8-ns  {  max-width: 64rem; }  .mw9-ns  {  max-width: 96rem; }  .mw-none-ns { max-width: none; }}@media (--breakpoint-medium) {  .mw-100-m  { max-width: 100%; }  .mw1-m  {  max-width: 1rem; }  .mw2-m  {  max-width: 2rem; }  .mw3-m  {  max-width: 4rem; }  .mw4-m  {  max-width: 8rem; }  .mw5-m  {  max-width: 16rem; }  .mw6-m  {  max-width: 32rem; }  .mw7-m  {  max-width: 48rem; }  .mw8-m  {  max-width: 64rem; }  .mw9-m  {  max-width: 96rem; }  .mw-none-m { max-width: none; }}@media (--breakpoint-large) {  .mw-100-l  { max-width: 100%; }  .mw1-l  {  max-width: 1rem; }  .mw2-l  {  max-width: 2rem; }  .mw3-l  {  max-width: 4rem; }  .mw4-l  {  max-width: 8rem; }  .mw5-l  {  max-width: 16rem; }  .mw6-l  {  max-width: 32rem; }  .mw7-l  {  max-width: 48rem; }  .mw8-l  {  max-width: 64rem; }  .mw9-l  {  max-width: 96rem; }  .mw-none-l { max-width: none; }}

Heights

/*   HEIGHTS   Base:     h = height     min-h = min-height     min-vh = min-height vertical screen height     vh = vertical screen height   Modifiers     1 = 1st step in height scale     2 = 2nd step in height scale     3 = 3rd step in height scale     4 = 4th step in height scale     5 = 5th step in height scale     -25   = literal value 25%     -50   = literal value 50%     -75   = literal value 75%     -100  = literal value 100%     -auto = string value of auto     -inherit = string value of inherit   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*//* Height Scale */.h1 { height: 1rem; }.h2 { height: 2rem; }.h3 { height: 4rem; }.h4 { height: 8rem; }.h5 { height: 16rem; }/* Height Percentages - Based off of height of parent */.h-25 {  height:  25%; }.h-50 {  height:  50%; }.h-75 {  height:  75%; }.h-100 { height: 100%; }.min-h-100 { min-height: 100%; }/* Screen Height Percentage */.vh-25 {  height:  25vh; }.vh-50 {  height:  50vh; }.vh-75 {  height:  75vh; }.vh-100 { height: 100vh; }.min-vh-100 { min-height: 100vh; }/* String Properties */.h-auto {     height: auto; }.h-inherit {  height: inherit; }@media (--breakpoint-not-small) {  .h1-ns {  height: 1rem; }  .h2-ns {  height: 2rem; }  .h3-ns {  height: 4rem; }  .h4-ns {  height: 8rem; }  .h5-ns {  height: 16rem; }  .h-25-ns { height: 25%; }  .h-50-ns { height: 50%; }  .h-75-ns { height: 75%; }  .h-100-ns { height: 100%; }  .min-h-100-ns { min-height: 100%; }  .vh-25-ns {  height:  25vh; }  .vh-50-ns {  height:  50vh; }  .vh-75-ns {  height:  75vh; }  .vh-100-ns { height: 100vh; }  .min-vh-100-ns { min-height: 100vh; }  .h-auto-ns { height: auto; }  .h-inherit-ns { height: inherit; }}@media (--breakpoint-medium) {  .h1-m { height: 1rem; }  .h2-m { height: 2rem; }  .h3-m { height: 4rem; }  .h4-m { height: 8rem; }  .h5-m { height: 16rem; }  .h-25-m { height: 25%; }  .h-50-m { height: 50%; }  .h-75-m { height: 75%; }  .h-100-m { height: 100%; }  .min-h-100-m { min-height: 100%; }  .vh-25-m {  height:  25vh; }  .vh-50-m {  height:  50vh; }  .vh-75-m {  height:  75vh; }  .vh-100-m { height: 100vh; }  .min-vh-100-m { min-height: 100vh; }  .h-auto-m { height: auto; }  .h-inherit-m { height: inherit; }}@media (--breakpoint-large) {  .h1-l { height: 1rem; }  .h2-l { height: 2rem; }  .h3-l { height: 4rem; }  .h4-l { height: 8rem; }  .h5-l { height: 16rem; }  .h-25-l { height: 25%; }  .h-50-l { height: 50%; }  .h-75-l { height: 75%; }  .h-100-l { height: 100%; }  .min-h-100-l { min-height: 100%; }  .vh-25-l {  height:  25vh; }  .vh-50-l {  height:  50vh; }  .vh-75-l {  height:  75vh; }  .vh-100-l { height: 100vh; }  .min-vh-100-l { min-height: 100vh; }  .h-auto-l { height: auto; }  .h-inherit-l { height: inherit; }}

Position

/*   POSITIONING   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/.static { position: static; }.relative  { position: relative; }.absolute  { position: absolute; }.fixed  { position: fixed; }@media (--breakpoint-not-small) {  .static-ns { position: static; }  .relative-ns  { position: relative; }  .absolute-ns  { position: absolute; }  .fixed-ns  { position: fixed; }}@media (--breakpoint-medium) {  .static-m { position: static; }  .relative-m  { position: relative; }  .absolute-m  { position: absolute; }  .fixed-m  { position: fixed; }}@media (--breakpoint-large) {  .static-l { position: static; }  .relative-l  { position: relative; }  .absolute-l  { position: absolute; }  .fixed-l  { position: fixed; }}@custom-media --breakpoint-not-small screen and (min-width: 48em);@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);@custom-media --breakpoint-large screen and (min-width: 64em);/*   COORDINATES   Use in combination with the position module.*/.top-0    { top:    0; }.right-0  { right:  0; }.bottom-0 { bottom: 0; }.left-0   { left:   0; }.top-1    { top:    1rem; }.right-1  { right:  1rem; }.bottom-1 { bottom: 1rem; }.left-1   { left:   1rem; }.top-2    { top:    2rem; }.right-2  { right:  2rem; }.bottom-2 { bottom: 2rem; }.left-2   { left:   2rem; }.top--1    { top:    -1rem; }.right--1  { right:  -1rem; }.bottom--1 { bottom: -1rem; }.left--1   { left:   -1rem; }.top--2    { top:    -2rem; }.right--2  { right:  -2rem; }.bottom--2 { bottom: -2rem; }.left--2   { left:   -2rem; }.absolute--fill {  top: 0;  right: 0;  bottom: 0;  left: 0;}@media (--breakpoint-not-small) {  .top-0-ns     { top:   0; }  .left-0-ns    { left:  0; }  .right-0-ns   { right: 0; }  .bottom-0-ns  { bottom: 0; }  .top-1-ns     { top:   1rem; }  .left-1-ns    { left:  1rem; }  .right-1-ns   { right: 1rem; }  .bottom-1-ns  { bottom: 1rem; }  .top-2-ns     { top:   2rem; }  .left-2-ns    { left:  2rem; }  .right-2-ns   { right: 2rem; }  .bottom-2-ns  { bottom: 2rem; }  .top--1-ns    { top:    -1rem; }  .right--1-ns  { right:  -1rem; }  .bottom--1-ns { bottom: -1rem; }  .left--1-ns   { left:   -1rem; }  .top--2-ns    { top:    -2rem; }  .right--2-ns  { right:  -2rem; }  .bottom--2-ns { bottom: -2rem; }  .left--2-ns   { left:   -2rem; }  .absolute--fill-ns {    top: 0;    right: 0;    bottom: 0;    left: 0;  }}@media (--breakpoint-medium) {  .top-0-m     { top:   0; }  .left-0-m    { left:  0; }  .right-0-m   { right: 0; }  .bottom-0-m  { bottom: 0; }  .top-1-m     { top:   1rem; }  .left-1-m    { left:  1rem; }  .right-1-m   { right: 1rem; }  .bottom-1-m  { bottom: 1rem; }  .top-2-m     { top:   2rem; }  .left-2-m    { left:  2rem; }  .right-2-m   { right: 2rem; }  .bottom-2-m  { bottom: 2rem; }  .top--1-m    { top:    -1rem; }  .right--1-m  { right:  -1rem; }  .bottom--1-m { bottom: -1rem; }  .left--1-m   { left:   -1rem; }  .top--2-m    { top:    -2rem; }  .right--2-m  { right:  -2rem; }  .bottom--2-m { bottom: -2rem; }  .left--2-m   { left:   -2rem; }  .absolute--fill-m {    top: 0;    right: 0;    bottom: 0;    left: 0;  }}@media (--breakpoint-large) {  .top-0-l     { top:   0; }  .left-0-l    { left:  0; }  .right-0-l   { right: 0; }  .bottom-0-l  { bottom: 0; }  .top-1-l     { top:   1rem; }  .left-1-l    { left:  1rem; }  .right-1-l   { right: 1rem; }  .bottom-1-l  { bottom: 1rem; }  .top-2-l     { top:   2rem; }  .left-2-l    { left:  2rem; }  .right-2-l   { right: 2rem; }  .bottom-2-l  { bottom: 2rem; }  .top--1-l    { top:    -1rem; }  .right--1-l  { right:  -1rem; }  .bottom--1-l { bottom: -1rem; }  .left--1-l   { left:   -1rem; }  .top--2-l    { top:    -2rem; }  .right--2-l  { right:  -2rem; }  .bottom--2-l { bottom: -2rem; }  .left--2-l   { left:   -2rem; }  .absolute--fill-l {    top: 0;    right: 0;    bottom: 0;    left: 0;  }}

Skins

http://tachyons.io/docs/themes/skins/

/*   SKINS   Classes for setting foreground and background colors on elements.   If you haven't declared a border color, but set border on an element, it will    be set to the current text color. *//* Text colors */.black-90 {         color: var(--black-90); }.black-80 {         color: var(--black-80); }.black-70 {         color: var(--black-70); }.black-60 {         color: var(--black-60); }.black-50 {         color: var(--black-50); }.black-40 {         color: var(--black-40); }.black-30 {         color: var(--black-30); }.black-20 {         color: var(--black-20); }.black-10 {         color: var(--black-10); }.black-05 {         color: var(--black-05); }.white-90 {         color: var(--white-90); }.white-80 {         color: var(--white-80); }.white-70 {         color: var(--white-70); }.white-60 {         color: var(--white-60); }.white-50 {         color: var(--white-50); }.white-40 {         color: var(--white-40); }.white-30 {         color: var(--white-30); }.white-20 {         color: var(--white-20); }.white-10 {         color: var(--white-10); }.black {         color: var(--black); }.near-black {    color: var(--near-black); }.dark-gray {     color: var(--dark-gray); }.mid-gray {      color: var(--mid-gray); }.gray {          color: var(--gray); }.silver  {       color: var(--silver); }.light-silver {  color: var(--light-silver); }.moon-gray {     color: var(--moon-gray); }.light-gray {    color: var(--light-gray); }.near-white {    color: var(--near-white); }.white {         color: var(--white); }.dark-red { color: var(--dark-red); }.red { color: var(--red); }.light-red { color: var(--light-red); }.orange { color: var(--orange); }.gold { color: var(--gold); }.yellow { color: var(--yellow); }.light-yellow { color: var(--light-yellow); }.purple { color: var(--purple); }.light-purple { color: var(--light-purple); }.dark-pink { color: var(--dark-pink); }.hot-pink { color: var(--hot-pink); }.pink { color: var(--pink); }.light-pink { color: var(--light-pink); }.dark-green { color: var(--dark-green); }.green { color: var(--green); }.light-green { color: var(--light-green); }.navy { color: var(--navy); }.dark-blue { color: var(--dark-blue); }.blue { color: var(--blue); }.light-blue { color: var(--light-blue); }.lightest-blue { color: var(--lightest-blue); }.washed-blue { color: var(--washed-blue); }.washed-green { color: var(--washed-green); }.washed-yellow { color: var(--washed-yellow); }.washed-red { color: var(--washed-red); }.color-inherit { color: inherit; }.bg-black-90 {         background-color: var(--black-90); }.bg-black-80 {         background-color: var(--black-80); }.bg-black-70 {         background-color: var(--black-70); }.bg-black-60 {         background-color: var(--black-60); }.bg-black-50 {         background-color: var(--black-50); }.bg-black-40 {         background-color: var(--black-40); }.bg-black-30 {         background-color: var(--black-30); }.bg-black-20 {         background-color: var(--black-20); }.bg-black-10 {         background-color: var(--black-10); }.bg-black-05 {         background-color: var(--black-05); }.bg-white-90 {        background-color: var(--white-90); }.bg-white-80 {        background-color: var(--white-80); }.bg-white-70 {        background-color: var(--white-70); }.bg-white-60 {        background-color: var(--white-60); }.bg-white-50 {        background-color: var(--white-50); }.bg-white-40 {        background-color: var(--white-40); }.bg-white-30 {        background-color: var(--white-30); }.bg-white-20 {        background-color: var(--white-20); }.bg-white-10 {        background-color: var(--white-10); }/* Background colors */.bg-black {         background-color: var(--black); }.bg-near-black {    background-color: var(--near-black); }.bg-dark-gray {     background-color: var(--dark-gray); }.bg-mid-gray {      background-color: var(--mid-gray); }.bg-gray {          background-color: var(--gray); }.bg-silver  {       background-color: var(--silver); }.bg-light-silver {  background-color: var(--light-silver); }.bg-moon-gray {     background-color: var(--moon-gray); }.bg-light-gray {    background-color: var(--light-gray); }.bg-near-white {    background-color: var(--near-white); }.bg-white {         background-color: var(--white); }.bg-transparent {   background-color: var(--transparent); }.bg-dark-red { background-color: var(--dark-red); }.bg-red { background-color: var(--red); }.bg-light-red { background-color: var(--light-red); }.bg-orange { background-color: var(--orange); }.bg-gold { background-color: var(--gold); }.bg-yellow { background-color: var(--yellow); }.bg-light-yellow { background-color: var(--light-yellow); }.bg-purple { background-color: var(--purple); }.bg-light-purple { background-color: var(--light-purple); }.bg-dark-pink { background-color: var(--dark-pink); }.bg-hot-pink { background-color: var(--hot-pink); }.bg-pink { background-color: var(--pink); }.bg-light-pink { background-color: var(--light-pink); }.bg-dark-green { background-color: var(--dark-green); }.bg-green { background-color: var(--green); }.bg-light-green { background-color: var(--light-green); }.bg-navy { background-color: var(--navy); }.bg-dark-blue { background-color: var(--dark-blue); }.bg-blue { background-color: var(--blue); }.bg-light-blue { background-color: var(--light-blue); }.bg-lightest-blue { background-color: var(--lightest-blue); }.bg-washed-blue { background-color: var(--washed-blue); }.bg-washed-green { background-color: var(--washed-green); }.bg-washed-yellow { background-color: var(--washed-yellow); }.bg-washed-red { background-color: var(--washed-red); }.bg-inherit { background-color: inherit; }/*   SKINS:PSEUDO   Customize the color of an element when   it is focused or hovered over. */.hover-black:hover { color: #000; }.hover-black:focus { color: #000; }.hover-near-black:hover { color: #111; }.hover-near-black:focus { color: #111; }.hover-dark-gray:hover { color: #333; }.hover-dark-gray:focus { color: #333; }.hover-mid-gray:hover { color: #555; }.hover-mid-gray:focus { color: #555; }.hover-gray:hover { color: #777; }.hover-gray:focus { color: #777; }.hover-silver:hover { color: #999; }.hover-silver:focus { color: #999; }.hover-light-silver:hover { color: #aaa; }.hover-light-silver:focus { color: #aaa; }.hover-moon-gray:hover { color: #ccc; }.hover-moon-gray:focus { color: #ccc; }.hover-light-gray:hover { color: #eee; }.hover-light-gray:focus { color: #eee; }.hover-near-white:hover { color: #f4f4f4; }.hover-near-white:focus { color: #f4f4f4; }.hover-white:hover { color: #fff; }.hover-white:focus { color: #fff; }.hover-black-90:hover { color: rgba( 0, 0, 0, .9 ); }.hover-black-90:focus { color: rgba( 0, 0, 0, .9 ); }.hover-black-80:hover { color: rgba( 0, 0, 0, .8 ); }.hover-black-80:focus { color: rgba( 0, 0, 0, .8 ); }.hover-black-70:hover { color: rgba( 0, 0, 0, .7 ); }.hover-black-70:focus { color: rgba( 0, 0, 0, .7 ); }.hover-black-60:hover { color: rgba( 0, 0, 0, .6 ); }.hover-black-60:focus { color: rgba( 0, 0, 0, .6 ); }.hover-black-50:hover { color: rgba( 0, 0, 0, .5 ); }.hover-black-50:focus { color: rgba( 0, 0, 0, .5 ); }.hover-black-40:hover { color: rgba( 0, 0, 0, .4 ); }.hover-black-40:focus { color: rgba( 0, 0, 0, .4 ); }.hover-black-30:hover { color: rgba( 0, 0, 0, .3 ); }.hover-black-30:focus { color: rgba( 0, 0, 0, .3 ); }.hover-black-20:hover { color: rgba( 0, 0, 0, .2 ); }.hover-black-20:focus { color: rgba( 0, 0, 0, .2 ); }.hover-black-10:hover { color: rgba( 0, 0, 0, .1 ); }.hover-black-10:focus { color: rgba( 0, 0, 0, .1 ); }.hover-white-90:hover { color: rgba( 255, 255, 255, .9 ); }.hover-white-90:focus { color: rgba( 255, 255, 255, .9 ); }.hover-white-80:hover { color: rgba( 255, 255, 255, .8 ); }.hover-white-80:focus { color: rgba( 255, 255, 255, .8 ); }.hover-white-70:hover { color: rgba( 255, 255, 255, .7 ); }.hover-white-70:focus { color: rgba( 255, 255, 255, .7 ); }.hover-white-60:hover { color: rgba( 255, 255, 255, .6 ); }.hover-white-60:focus { color: rgba( 255, 255, 255, .6 ); }.hover-white-50:hover { color: rgba( 255, 255, 255, .5 ); }.hover-white-50:focus { color: rgba( 255, 255, 255, .5 ); }.hover-white-40:hover { color: rgba( 255, 255, 255, .4 ); }.hover-white-40:focus { color: rgba( 255, 255, 255, .4 ); }.hover-white-30:hover { color: rgba( 255, 255, 255, .3 ); }.hover-white-30:focus { color: rgba( 255, 255, 255, .3 ); }.hover-white-20:hover { color: rgba( 255, 255, 255, .2 ); }.hover-white-20:focus { color: rgba( 255, 255, 255, .2 ); }.hover-white-10:hover { color: rgba( 255, 255, 255, .1 ); }.hover-white-10:focus { color: rgba( 255, 255, 255, .1 ); }.hover-inherit:hover, .hover-inherit:focus { color: inherit; }.hover-bg-black:hover { background-color: #000; }.hover-bg-black:focus { background-color: #000; }.hover-bg-near-black:hover { background-color: #111; }.hover-bg-near-black:focus { background-color: #111; }.hover-bg-dark-gray:hover { background-color: #333; }.hover-bg-dark-gray:focus { background-color: #333; }.hover-bg-dark-gray:focus { background-color: #555; }.hover-bg-mid-gray:hover { background-color: #555; }.hover-bg-gray:hover { background-color: #777; }.hover-bg-gray:focus { background-color: #777; }.hover-bg-silver:hover { background-color: #999; }.hover-bg-silver:focus { background-color: #999; }.hover-bg-light-silver:hover { background-color: #aaa; }.hover-bg-light-silver:focus { background-color: #aaa; }.hover-bg-moon-gray:hover { background-color: #ccc; }.hover-bg-moon-gray:focus { background-color: #ccc; }.hover-bg-light-gray:hover { background-color: #eee; }.hover-bg-light-gray:focus { background-color: #eee; }.hover-bg-near-white:hover { background-color: #f4f4f4; }.hover-bg-near-white:focus { background-color: #f4f4f4; }.hover-bg-white:hover { background-color: #fff; }.hover-bg-white:focus { background-color: #fff; }.hover-bg-transparent:hover { background-color: transparent; }.hover-bg-transparent:focus { background-color: transparent; }.hover-bg-black-90:hover { background-color: rgba( 0, 0, 0, .9 ); }.hover-bg-black-90:focus { background-color: rgba( 0, 0, 0, .9 ); }.hover-bg-black-80:hover { background-color: rgba( 0, 0, 0, .8 ); }.hover-bg-black-80:focus { background-color: rgba( 0, 0, 0, .8 ); }.hover-bg-black-70:hover { background-color: rgba( 0, 0, 0, .7 ); }.hover-bg-black-70:focus { background-color: rgba( 0, 0, 0, .7 ); }.hover-bg-black-60:hover { background-color: rgba( 0, 0, 0, .6 ); }.hover-bg-black-60:focus { background-color: rgba( 0, 0, 0, .6 ); }.hover-bg-black-50:hover { background-color: rgba( 0, 0, 0, .5 ); }.hover-bg-black-50:focus { background-color: rgba( 0, 0, 0, .5 ); }.hover-bg-black-40:hover { background-color: rgba( 0, 0, 0, .4 ); }.hover-bg-black-40:focus { background-color: rgba( 0, 0, 0, .4 ); }.hover-bg-black-30:hover { background-color: rgba( 0, 0, 0, .3 ); }.hover-bg-black-30:focus { background-color: rgba( 0, 0, 0, .3 ); }.hover-bg-black-20:hover { background-color: rgba( 0, 0, 0, .2 ); }.hover-bg-black-20:focus { background-color: rgba( 0, 0, 0, .2 ); }.hover-bg-black-10:hover { background-color: rgba( 0, 0, 0, .1 ); }.hover-bg-black-10:focus { background-color: rgba( 0, 0, 0, .1 ); }.hover-bg-white-90:hover { background-color: rgba( 255, 255, 255, .9 ); }.hover-bg-white-90:focus { background-color: rgba( 255, 255, 255, .9 ); }.hover-bg-white-80:hover { background-color: rgba( 255, 255, 255, .8 ); }.hover-bg-white-80:focus { background-color: rgba( 255, 255, 255, .8 ); }.hover-bg-white-70:hover { background-color: rgba( 255, 255, 255, .7 ); }.hover-bg-white-70:focus { background-color: rgba( 255, 255, 255, .7 ); }.hover-bg-white-60:hover { background-color: rgba( 255, 255, 255, .6 ); }.hover-bg-white-60:focus { background-color: rgba( 255, 255, 255, .6 ); }.hover-bg-white-50:hover { background-color: rgba( 255, 255, 255, .5 ); }.hover-bg-white-50:focus { background-color: rgba( 255, 255, 255, .5 ); }.hover-bg-white-40:hover { background-color: rgba( 255, 255, 255, .4 ); }.hover-bg-white-40:focus { background-color: rgba( 255, 255, 255, .4 ); }.hover-bg-white-30:hover { background-color: rgba( 255, 255, 255, .3 ); }.hover-bg-white-30:focus { background-color: rgba( 255, 255, 255, .3 ); }.hover-bg-white-20:hover { background-color: rgba( 255, 255, 255, .2 ); }.hover-bg-white-20:focus { background-color: rgba( 255, 255, 255, .2 ); }.hover-bg-white-10:hover { background-color: rgba( 255, 255, 255, .1 ); }.hover-bg-white-10:focus { background-color: rgba( 255, 255, 255, .1 ); }.hover-dark-red:hover { color: #e7040f; }.hover-dark-red:focus { color: #e7040f; }.hover-red:hover { color: #ff4136; }.hover-red:focus { color: #ff4136; }.hover-light-red:hover { color: #ff725c; }.hover-light-red:focus { color: #ff725c; }.hover-orange:hover { color: #ff6300; }.hover-orange:focus { color: #ff6300; }.hover-gold:hover { color: #ffb700; }.hover-gold:focus { color: #ffb700; }.hover-yellow:hover { color: #ffd700; }.hover-yellow:focus { color: #ffd700; }.hover-light-yellow:hover { color: #fbf1a9; }.hover-light-yellow:focus { color: #fbf1a9; }.hover-purple:hover { color: #5e2ca5; }.hover-purple:focus { color: #5e2ca5; }.hover-light-purple:hover { color: #a463f2; }.hover-light-purple:focus { color: #a463f2; }.hover-dark-pink:hover { color: #d5008f; }.hover-dark-pink:focus { color: #d5008f; }.hover-hot-pink:hover { color: #ff41b4; }.hover-hot-pink:focus { color: #ff41b4; }.hover-pink:hover { color: #ff80cc; }.hover-pink:focus { color: #ff80cc; }.hover-light-pink:hover { color: #ffa3d7; }.hover-light-pink:focus { color: #ffa3d7; }.hover-dark-green:hover { color: #137752; }.hover-dark-green:focus { color: #137752; }.hover-green:hover { color: #19a974; }.hover-green:focus { color: #19a974; }.hover-light-green:hover { color: #9eebcf; }.hover-light-green:focus { color: #9eebcf; }.hover-navy:hover { color: #001b44; }.hover-navy:focus { color: #001b44; }.hover-dark-blue:hover { color: #00449e; }.hover-dark-blue:focus { color: #00449e; }.hover-blue:hover { color: #357edd; }.hover-blue:focus { color: #357edd; }.hover-light-blue:hover { color: #96ccff; }.hover-light-blue:focus { color: #96ccff; }.hover-lightest-blue:hover { color: #cdecff; }.hover-lightest-blue:focus { color: #cdecff; }.hover-washed-blue:hover { color: #f6fffe; }.hover-washed-blue:focus { color: #f6fffe; }.hover-washed-green:hover { color: #e8fdf5; }.hover-washed-green:focus { color: #e8fdf5; }.hover-washed-yellow:hover { color: #fffceb; }.hover-washed-yellow:focus { color: #fffceb; }.hover-washed-red:hover { color: #ffdfdf; }.hover-washed-red:focus { color: #ffdfdf; }.hover-bg-dark-red:hover { background-color: #e7040f; }.hover-bg-dark-red:focus { background-color: #e7040f; }.hover-bg-red:hover { background-color: #ff4136; }.hover-bg-red:focus { background-color: #ff4136; }.hover-bg-light-red:hover { background-color: #ff725c; }.hover-bg-light-red:focus { background-color: #ff725c; }.hover-bg-orange:hover { background-color: #ff6300; }.hover-bg-orange:focus { background-color: #ff6300; }.hover-bg-gold:hover { background-color: #ffb700; }.hover-bg-gold:focus { background-color: #ffb700; }.hover-bg-yellow:hover { background-color: #ffd700; }.hover-bg-yellow:focus { background-color: #ffd700; }.hover-bg-light-yellow:hover { background-color: #fbf1a9; }.hover-bg-light-yellow:focus { background-color: #fbf1a9; }.hover-bg-purple:hover { background-color: #5e2ca5; }.hover-bg-purple:focus { background-color: #5e2ca5; }.hover-bg-light-purple:hover { background-color: #a463f2; }.hover-bg-light-purple:focus { background-color: #a463f2; }.hover-bg-dark-pink:hover { background-color: #d5008f; }.hover-bg-dark-pink:focus { background-color: #d5008f; }.hover-bg-hot-pink:hover { background-color: #ff41b4; }.hover-bg-hot-pink:focus { background-color: #ff41b4; }.hover-bg-pink:hover { background-color: #ff80cc; }.hover-bg-pink:focus { background-color: #ff80cc; }.hover-bg-light-pink:hover { background-color: #ffa3d7; }.hover-bg-light-pink:focus { background-color: #ffa3d7; }.hover-bg-dark-green:hover { background-color: #137752; }.hover-bg-dark-green:focus { background-color: #137752; }.hover-bg-green:hover { background-color: #19a974; }.hover-bg-green:focus { background-color: #19a974; }.hover-bg-light-green:hover { background-color: #9eebcf; }.hover-bg-light-green:focus { background-color: #9eebcf; }.hover-bg-navy:hover { background-color: #001b44; }.hover-bg-navy:focus { background-color: #001b44; }.hover-bg-dark-blue:hover { background-color: #00449e; }.hover-bg-dark-blue:focus { background-color: #00449e; }.hover-bg-blue:hover { background-color: #357edd; }.hover-bg-blue:focus { background-color: #357edd; }.hover-bg-light-blue:hover { background-color: #96ccff; }.hover-bg-light-blue:focus { background-color: #96ccff; }.hover-bg-lightest-blue:hover { background-color: #cdecff; }.hover-bg-lightest-blue:focus { background-color: #cdecff; }.hover-bg-washed-blue:hover { background-color: #f6fffe; }.hover-bg-washed-blue:focus { background-color: #f6fffe; }.hover-bg-washed-green:hover { background-color: #e8fdf5; }.hover-bg-washed-green:focus { background-color: #e8fdf5; }.hover-bg-washed-yellow:hover { background-color: #fffceb; }.hover-bg-washed-yellow:focus { background-color: #fffceb; }.hover-bg-washed-red:hover { background-color: #ffdfdf; }.hover-bg-washed-red:focus { background-color: #ffdfdf; }.hover-bg-inherit:hover, .hover-bg-inherit:focus { background-color: inherit; }

Hover Effects

http://tachyons.io/docs/themes/hovers/

/*  HOVER EFFECTS    - Dim    - Glow    - Hide Child    - Underline text    - Grow    - Pointer    - Shadow*//*  Dim element on hover by adding the dim class.*/.dim {  opacity: 1;  transition: opacity .15s ease-in;}.dim:hover,.dim:focus {  opacity: .5;  transition: opacity .15s ease-in;}.dim:active {  opacity: .8; transition: opacity .15s ease-out;}/*  Animate opacity to 100% on hover by adding the glow class.*/.glow {  transition: opacity .15s ease-in;}.glow:hover,.glow:focus {  opacity: 1;  transition: opacity .15s ease-in;}/*  Hide child & reveal on hover:  Put the hide-child class on a parent element and any nested element with the  child class will be hidden and displayed on hover or focus. */.hide-child .child {  opacity: 0;  transition: opacity .15s ease-in;}.hide-child:hover  .child,.hide-child:focus  .child,.hide-child:active .child {  opacity: 1;  transition: opacity .15s ease-in;}.underline-hover:hover,.underline-hover:focus {  text-decoration: underline;}/*  Can combine this with overflow-hidden to make background images grow on hover  even if you are using background-size: cover*/.grow {  -moz-osx-font-smoothing: grayscale;  backface-visibility: hidden;  transform: translateZ(0);  transition: transform 0.25s ease-out;}.grow:hover,.grow:focus {  transform: scale(1.05);}.grow:active {  transform: scale(.90);}.grow-large {  -moz-osx-font-smoothing: grayscale;  backface-visibility: hidden;  transform: translateZ(0);  transition: transform .25s ease-in-out;}.grow-large:hover,.grow-large:focus {  transform: scale(1.2);}.grow-large:active {  transform: scale(.95);}/* Add pointer on hover */.pointer:hover {  cursor: pointer;}/*  Add shadow on hover.  Performant box-shadow animation pattern from  http://tobiasahlin.com/blog/how-to-animate-box-shadow/*/.shadow-hover {  cursor: pointer;  position: relative;  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);}.shadow-hover::after {  content: '';  box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );  opacity: 0;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  z-index: -1;  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);}.shadow-hover:hover::after,.shadow-hover:focus::after {  opacity: 1;}/*  Combine with classes in skins and skins-pseudo for  many different transition possibilities.*/.bg-animate,.bg-animate:hover,.bg-animate:focus {  transition: background-color .15s ease-in-out;}

Background Size

http://tachyons.io/docs/themes/background-size/

Background-size affects how background images fill their containing elements.

/*   BACKGROUND SIZE   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*//*  Often used in combination with background image set as an inline style  on an html element.*/  .cover { background-size: cover!important; }  .contain { background-size: contain!important; }@media (--breakpoint-not-small) {  .cover-ns { background-size: cover!important; }  .contain-ns { background-size: contain!important; }}@media (--breakpoint-medium) {  .cover-m { background-size: cover!important; }  .contain-m { background-size: contain!important; }}@media (--breakpoint-large) {  .cover-l { background-size: cover!important; }  .contain-l { background-size: contain!important; }}

Borders

http://tachyons.io/docs/themes/borders/

/*    BORDERS    Base:      b = border    Modifiers:      a = all      t = top      r = right      b = bottom      l = left      n = none   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/  .ba { border-style: solid; border-width: 1px; }  .bt { border-top-style: solid; border-top-width: 1px; }  .br { border-right-style: solid; border-right-width: 1px; }  .bb { border-bottom-style: solid; border-bottom-width: 1px; }  .bl { border-left-style: solid; border-left-width: 1px; }  .bn { border-style: none; border-width: 0; }@media (--breakpoint-not-small) {  .ba-ns { border-style: solid; border-width: 1px; }  .bt-ns { border-top-style: solid; border-top-width: 1px; }  .br-ns { border-right-style: solid; border-right-width: 1px; }  .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }  .bl-ns { border-left-style: solid; border-left-width: 1px; }  .bn-ns { border-style: none; border-width: 0; }}@media (--breakpoint-medium) {  .ba-m { border-style: solid; border-width: 1px; }  .bt-m { border-top-style: solid; border-top-width: 1px; }  .br-m { border-right-style: solid; border-right-width: 1px; }  .bb-m { border-bottom-style: solid; border-bottom-width: 1px; }  .bl-m { border-left-style: solid; border-left-width: 1px; }  .bn-m { border-style: none; border-width: 0; }}@media (--breakpoint-large) {  .ba-l { border-style: solid; border-width: 1px; }  .bt-l { border-top-style: solid; border-top-width: 1px; }  .br-l { border-right-style: solid; border-right-width: 1px; }  .bb-l { border-bottom-style: solid; border-bottom-width: 1px; }  .bl-l { border-left-style: solid; border-left-width: 1px; }  .bn-l { border-style: none; border-width: 0; }}/*   BORDER STYLES   Depends on base border module in _borders.css   Base:     b = border-style   Modifiers:     --none   = none     --dotted = dotted     --dashed = dashed     --solid  = solid   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large */.b--dotted { border-style: dotted; }.b--dashed { border-style: dashed; }.b--solid {  border-style: solid; }.b--none {   border-style: none; }@media (--breakpoint-not-small) {  .b--dotted-ns { border-style: dotted; }  .b--dashed-ns { border-style: dashed; }  .b--solid-ns {  border-style: solid; }  .b--none-ns {   border-style: none; }}@media (--breakpoint-medium) {  .b--dotted-m { border-style: dotted; }  .b--dashed-m { border-style: dashed; }  .b--solid-m {  border-style: solid; }  .b--none-m {   border-style: none; }}@media (--breakpoint-large) {  .b--dotted-l { border-style: dotted; }  .b--dashed-l { border-style: dashed; }  .b--solid-l {  border-style: solid; }  .b--none-l {   border-style: none; }}/*   BORDER COLORS   Border colors can be used to extend the base   border classes ba,bt,bb,br,bl found in the _borders.css file.   The base border class by default will set the color of the border   to that of the current text color. These classes are for the cases   where you desire for the text and border colors to be different.   Base:     b = border   Modifiers:   --color-name = each color variable name is also a border color name*/.b--black {        border-color: var(--black); }.b--near-black {   border-color: var(--near-black); }.b--dark-gray {    border-color: var(--dark-gray); }.b--mid-gray {     border-color: var(--mid-gray); }.b--gray {         border-color: var(--gray); }.b--silver {       border-color: var(--silver); }.b--light-silver { border-color: var(--light-silver); }.b--moon-gray {    border-color: var(--moon-gray); }.b--light-gray {   border-color: var(--light-gray); }.b--near-white {   border-color: var(--near-white); }.b--white {        border-color: var(--white); }.b--white-90 {   border-color: var(--white-90); }.b--white-80 {   border-color: var(--white-80); }.b--white-70 {   border-color: var(--white-70); }.b--white-60 {   border-color: var(--white-60); }.b--white-50 {   border-color: var(--white-50); }.b--white-40 {   border-color: var(--white-40); }.b--white-30 {   border-color: var(--white-30); }.b--white-20 {   border-color: var(--white-20); }.b--white-10 {   border-color: var(--white-10); }.b--white-05 {   border-color: var(--white-05); }.b--white-025 {   border-color: var(--white-025); }.b--white-0125 {   border-color: var(--white-0125); }.b--black-90 {   border-color: var(--black-90); }.b--black-80 {   border-color: var(--black-80); }.b--black-70 {   border-color: var(--black-70); }.b--black-60 {   border-color: var(--black-60); }.b--black-50 {   border-color: var(--black-50); }.b--black-40 {   border-color: var(--black-40); }.b--black-30 {   border-color: var(--black-30); }.b--black-20 {   border-color: var(--black-20); }.b--black-10 {   border-color: var(--black-10); }.b--black-05 {   border-color: var(--black-05); }.b--black-025 {   border-color: var(--black-025); }.b--black-0125 {   border-color: var(--black-0125); }.b--dark-red { border-color: var(--dark-red); }.b--red { border-color: var(--red); }.b--light-red { border-color: var(--light-red); }.b--orange { border-color: var(--orange); }.b--gold { border-color: var(--gold); }.b--yellow { border-color: var(--yellow); }.b--light-yellow { border-color: var(--light-yellow); }.b--purple { border-color: var(--purple); }.b--light-purple { border-color: var(--light-purple); }.b--dark-pink { border-color: var(--dark-pink); }.b--hot-pink { border-color: var(--hot-pink); }.b--pink { border-color: var(--pink); }.b--light-pink { border-color: var(--light-pink); }.b--dark-green { border-color: var(--dark-green); }.b--green { border-color: var(--green); }.b--light-green { border-color: var(--light-green); }.b--navy { border-color: var(--navy); }.b--dark-blue { border-color: var(--dark-blue); }.b--blue { border-color: var(--blue); }.b--light-blue { border-color: var(--light-blue); }.b--lightest-blue { border-color: var(--lightest-blue); }.b--washed-blue { border-color: var(--washed-blue); }.b--washed-green { border-color: var(--washed-green); }.b--washed-yellow { border-color: var(--washed-yellow); }.b--washed-red { border-color: var(--washed-red); }.b--transparent { border-color: var(--transparent); }.b--inherit { border-color: inherit; }/*   BORDER WIDTHS   Base:     bw = border-width   Modifiers:     0 = 0 width border     1 = 1st step in border-width scale     2 = 2nd step in border-width scale     3 = 3rd step in border-width scale     4 = 4th step in border-width scale     5 = 5th step in border-width scale   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/.bw0 { border-width: 0; }.bw1 { border-width: .125rem; }.bw2 { border-width: .25rem; }.bw3 { border-width: .5rem; }.bw4 { border-width: 1rem; }.bw5 { border-width: 2rem; }/* Resets */.bt-0 { border-top-width: 0; }.br-0 { border-right-width: 0; }.bb-0 { border-bottom-width: 0; }.bl-0 { border-left-width: 0; }@media (--breakpoint-not-small) {  .bw0-ns { border-width: 0; }  .bw1-ns { border-width: .125rem; }  .bw2-ns { border-width: .25rem; }  .bw3-ns { border-width: .5rem; }  .bw4-ns { border-width: 1rem; }  .bw5-ns { border-width: 2rem; }  .bt-0-ns { border-top-width: 0; }  .br-0-ns { border-right-width: 0; }  .bb-0-ns { border-bottom-width: 0; }  .bl-0-ns { border-left-width: 0; }}@media (--breakpoint-medium) {  .bw0-m { border-width: 0; }  .bw1-m { border-width: .125rem; }  .bw2-m { border-width: .25rem; }  .bw3-m { border-width: .5rem; }  .bw4-m { border-width: 1rem; }  .bw5-m { border-width: 2rem; }  .bt-0-m { border-top-width: 0; }  .br-0-m { border-right-width: 0; }  .bb-0-m { border-bottom-width: 0; }  .bl-0-m { border-left-width: 0; }}@media (--breakpoint-large) {  .bw0-l { border-width: 0; }  .bw1-l { border-width: .125rem; }  .bw2-l { border-width: .25rem; }  .bw3-l { border-width: .5rem; }  .bw4-l { border-width: 1rem; }  .bw5-l { border-width: 2rem; }  .bt-0-l { border-top-width: 0; }  .br-0-l { border-right-width: 0; }  .bb-0-l { border-bottom-width: 0; }  .bl-0-l { border-left-width: 0; }}

Border Radius

http://tachyons.io/docs/themes/border-radius/

/*   BORDER RADIUS   Base:     br   = border-radius   Modifiers:     0    = 0/none     1    = 1st step in scale     2    = 2nd step in scale     3    = 3rd step in scale     4    = 4th step in scale   Literal values:     -100 = 100%     -pill = 9999px   Media Query Extensions:     -ns = not-small     -m  = medium     -l  = large*/  .br0 {        border-radius: 0; }  .br1 {        border-radius: .125rem; }  .br2 {        border-radius: .25rem; }  .br3 {        border-radius: .5rem; }  .br4 {        border-radius: 1rem; }  .br-100 {     border-radius: 100%; }  .br-pill {    border-radius: 9999px; }  .br--bottom {      border-top-left-radius: 0;      border-top-right-radius: 0;  }  .br--top {      border-bottom-left-radius: 0;      border-bottom-right-radius: 0;  }  .br--right {      border-top-left-radius: 0;      border-bottom-left-radius: 0;  }  .br--left {      border-top-right-radius: 0;      border-bottom-right-radius: 0;  }@media (--breakpoint-not-small) {  .br0-ns {     border-radius: 0; }  .br1-ns {     border-radius: .125rem; }  .br2-ns {     border-radius: .25rem; }  .br3-ns {     border-radius: .5rem; }  .br4-ns {     border-radius: 1rem; }  .br-100-ns {  border-radius: 100%; }  .br-pill-ns { border-radius: 9999px; }  .br--bottom-ns {      border-top-left-radius: 0;      border-top-right-radius: 0;  }  .br--top-ns {      border-bottom-left-radius: 0;      border-bottom-right-radius: 0;  }  .br--right-ns {      border-top-left-radius: 0;      border-bottom-left-radius: 0;  }  .br--left-ns {      border-top-right-radius: 0;      border-bottom-right-radius: 0;  }}@media (--breakpoint-medium) {  .br0-m {     border-radius: 0; }  .br1-m {     border-radius: .125rem; }  .br2-m {     border-radius: .25rem; }  .br3-m {     border-radius: .5rem; }  .br4-m {     border-radius: 1rem; }  .br-100-m {  border-radius: 100%; }  .br-pill-m { border-radius: 9999px; }  .br--bottom-m {      border-top-left-radius: 0;      border-top-right-radius: 0;  }  .br--top-m {      border-bottom-left-radius: 0;      border-bottom-right-radius: 0;  }  .br--right-m {      border-top-left-radius: 0;      border-bottom-left-radius: 0;  }  .br--left-m {      border-top-right-radius: 0;      border-bottom-right-radius: 0;  }}@media (--breakpoint-large) {  .br0-l {     border-radius: 0; }  .br1-l {     border-radius: .125rem; }  .br2-l {     border-radius: .25rem; }  .br3-l {     border-radius: .5rem; }  .br4-l {     border-radius: 1rem; }  .br-100-l {  border-radius: 100%; }  .br-pill-l { border-radius: 9999px; }  .br--bottom-l {      border-top-left-radius: 0;      border-top-right-radius: 0;  }  .br--top-l {      border-bottom-left-radius: 0;      border-bottom-right-radius: 0;  }  .br--right-l {      border-top-left-radius: 0;      border-bottom-left-radius: 0;  }  .br--left-l {      border-top-right-radius: 0;      border-bottom-right-radius: 0;  }}

Box Shadow

http://tachyons.io/docs/themes/box-shadow/

/*  BOX-SHADOW  Media Query Extensions:   -ns = not-small   -m  = medium   -l  = large */.shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }.shadow-2 { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }.shadow-4 { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }.shadow-5 { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }@media (--breakpoint-not-small) {  .shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }  .shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }  .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }  .shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }  .shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }}@media (--breakpoint-medium) {  .shadow-1-m { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }  .shadow-2-m { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }  .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }  .shadow-4-m { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }  .shadow-5-m { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }}@media (--breakpoint-large) {  .shadow-1-l { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }  .shadow-2-l { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }  .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }  .shadow-4-l { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }  .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }}

Opacity

http://tachyons.io/docs/themes/opacity/

/*    OPACITY*/.o-100 { opacity: 1;    }.o-90  { opacity: .9;   }.o-80  { opacity: .8;   }.o-70  { opacity: .7;   }.o-60  { opacity: .6;   }.o-50  { opacity: .5;   }.o-40  { opacity: .4;   }.o-30  { opacity: .3;   }.o-20  { opacity: .2;   }.o-10  { opacity: .1;   }.o-05  { opacity: .05;  }.o-025 { opacity: .025; }.o-0   { opacity: 0; }

Images

http://tachyons.io/docs/elements/images/

http://tachyons.io/docs/elements/links/

/*   LINKS*/.link {  text-decoration: none;  transition: color .15s ease-in;}.link:link,.link:visited {  transition: color .15s ease-in;}.link:hover   {  transition: color .15s ease-in;}.link:active  {  transition: color .15s ease-in;}.link:focus   {  transition: color .15s ease-in;  outline: 1px dotted currentColor;}

List

http://tachyons.io/docs/elements/lists/

A simple reset for list-style-type to remove the default bullets.

.list {         list-style-type: none; }

Forms

http://tachyons.io/docs/elements/forms/

/*   FORMS*/.input-reset {  -webkit-appearance: none;  -moz-appearance: none;}.button-reset::-moz-focus-inner,.input-reset::-moz-focus-inner {  border: 0;  padding: 0;}

Tables

http://tachyons.io/docs/elements/tables/

/*  TABLES*/.collapse {    border-collapse: collapse;    border-spacing: 0;}.striped--light-silver:nth-child(odd) {  background-color: var(--light-silver);}.striped--moon-gray:nth-child(odd) {  background-color: var(--moon-gray);}.striped--light-gray:nth-child(odd) {  background-color: var(--light-gray);}.striped--near-white:nth-child(odd) {  background-color: var(--near-white);}.stripe-light:nth-child(odd) {  background-color: var(--white-10);}.stripe-dark:nth-child(odd) {  background-color: var(--black-10);}

Nested

https://github.com/tachyons-css/tachyons-cmshttps://github.com/tachyons-css/tachyons/blob/master/src/_nested.css

/*  NESTED  Tachyons module for styling nested elements  that are generated by a cms.*/.nested-copy-line-height p, .nested-copy-line-height ul,.nested-copy-line-height ol { line-height: 1.5; }.nested-headline-line-height h1, .nested-headline-line-height h2,.nested-headline-line-height h3, .nested-headline-line-height h4,.nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: 1.25; }.nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; }.nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; }.nested-copy-seperator p+p { margin-top: 1.5em; }.nested-img img { width: 100%; max-width: 100%; display: block; }.nested-links a { color: #357edd; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }.nested-links a:hover { color: #96ccff; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }.nested-links a:focus { color: #96ccff; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }

References

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.