Tachyons

Docs

/

Layout

/

Widths

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

The widths module contains both a five-step width scale based on powers of two as well as a series of percentage values that can be combined with floats for an infinitely nestable and fully responsive grid system.

Class name structure is as follows:

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%
  -33  = literal value 33%
  -34  = literal value 34%
  -40  = literal value 40%
  -50  = literal value 50%
  -60  = literal value 60%
  -75  = literal value 75%
  -80  = literal value 80%
  -100 = literal value 100%

  -auto  = string value auto


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

Examples

Width Scale

.w1
.w2
.w3
.w4
.w5

Width Percentages

w-10
w-20
w-25
w-33
w-34
w-40
w-50
w-60
w-75
w-80
w-100

Previous

Display

Next

Max Widths
src/_widths.css

<%= srcCSS  %>

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