Tachyons
v4.12.0
Debugging Debug Grid Box sizing Spacing Floats Clearfix Display Widths Basic Grid Flexbox Max Widths Heights Position

Widths

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%
  -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  = calc(100% / 3)
  -two-thirds  = calc(100% / 1.5)
  -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-30
w-33
w-third
w-34
w-40
w-50
w-60
w-two-thirds
w-75
w-80
w-90
w-100

Previous

Display

Next

Max Widths

Reference

MDN - Width property

tachyons-widths

v5.2.1 394 B
Declarations
88
Selectors
88
Max. Specificity Score
10
Size of Avg. Rule
1
src/_widths.css 

/*

   WIDTHS
   Docs: http://tachyons.io/docs/layout/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; }
}