Tachyons

Docs

/

Layout

/

Max Widths

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 max-widths module contains both a ten-step scale based on powers of two as well as a series of percentage values that can prove useful. Max widths can be combined with widths to ensure that your content doesn't get too wide on larger monitors, which are also important to consider when designing for the web.

Class name structure is as follows:

Base:
  mw = 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  = 6th step in width scale
  7  = 7th step in width scale
  8  = 8th step in width scale
  9  = 9th step in width scale
  10 = 10th step in width scale

  -25   = literal value 10%
  -50   = literal value 20%
  -75   = literal value 25%
  -100  = literal value 33%

  -none  = none
  -max   = max-content
  -min   = min-content
  -fit   = fit-content
  -fill  = fill-available

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

Examples

Max Width Scale

.mw1
Lorem
.mw2
Lorem
.mw3
Lorem ipsum dolor sit amet, consetetur sadipscing
.mw4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
.mw5
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
.mw6
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Max Width Percentages

w-25
w-50
mw-75
mw-100

Previous

Widths

Next

Heights

Reference

MDN - Max Width
src/_max-widths.css

<%= srcCSS  %>

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