Tachyons

Docs

/

Layout

/

Heights

Version
<%= moduleVersion %>
Filesize
<%= moduleSize %>
Declarations
<%= moduleObj.declarations.total %>
Selectors
<%= moduleObj.selectors.total %>
Max. Specificity Score
<%= moduleObj.selectors.specificity.max %>
Size of Avg. Rule
<%= moduleObj.rules.size.average %>

The heights module contains both a five-step width scale based on powers of two as well as a series of percentage values that can be used within elements that have a declared height.

Class name structure is as follows:

Base:
  h = height

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
  -20
  -25
  -30
  -40
  -50
  -60
  -70
  -75
  -80
  -90
  -100

  -auto  = string value auto

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

Examples

Height Scale

.h1
.h2
.h3
.h4
.h5

Height Percentages

h-10
h-20
h-25
h-30
h-40
h-50
h-60
h-70
h-75
h-80
h-90
h-100

Previous

Max Width

Next

Position

Reference

MDN - Height
src/_heights.css

<%= srcCSS  %>

<%= navDocs %>
<%= siteFooter %>