Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
tachyons-widths
Advanced tools
tachyons-widths - npm Package Compare versions
Comparing version 2.0.0 to 3.0.1
| { | ||
| "name": "tachyons-widths", | ||
| "version": "2.0.0", | ||
| "version": "3.0.1", | ||
| "style": "tachyons-widths.css", | ||
@@ -5,0 +5,0 @@ "homepage": "http://github.com/mrmrs/tachyons-widths", |
194
README.md
| # TACHYONS-WIDTHS | ||
| A CSS module of single purpose width classes. | ||
| http://tachyons.io | ||
| Work In Progress. Pull requests and open issues welcome. | ||
| ## Install | ||
@@ -16,3 +16,3 @@ ``` | ||
| @custom-media --breakpoint-not-small screen and (max-width: 48em); | ||
| @custom-media --breakpoint-not-small screen and (min-width: 48em); | ||
| @custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em); | ||
@@ -25,2 +25,32 @@ @custom-media --breakpoint-large screen and (min-width: 64em); | ||
| 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 | ||
| */ | ||
@@ -30,102 +60,80 @@ | ||
| .wi1 { width: 1rem; } | ||
| .wi2 { width: 2rem; } | ||
| .wi3 { width: 4rem; } | ||
| .wi4 { width: 8rem; } | ||
| .wi5 { width: 16rem; } | ||
| .w1 { width: 1rem; } | ||
| .w2 { width: 2rem; } | ||
| .w3 { width: 4rem; } | ||
| .w4 { width: 8rem; } | ||
| .w5 { width: 16rem; } | ||
| .wi-10 { width: 10%; } | ||
| .wi-20 { width: 20%; } | ||
| .wi-25 { width: 25%; } | ||
| .wi-40 { width: 40%; } | ||
| .wi-50 { width: 50%; } | ||
| .wi-60 { width: 60%; } | ||
| .wi-75 { width: 75%; } | ||
| .wi-80 { width: 80%; } | ||
| .wi-100 { width: 100%; } | ||
| .w-10 { width: 10%; } | ||
| .w-20 { width: 20%; } | ||
| .w-25 { width: 25%; } | ||
| .w-33 { width: 33%; } | ||
| .w-34 { width: 34%; } | ||
| .w-40 { width: 40%; } | ||
| .w-50 { width: 50%; } | ||
| .w-60 { width: 60%; } | ||
| .w-75 { width: 75%; } | ||
| .w-80 { width: 80%; } | ||
| .w-100 { width: 100%; } | ||
| /* Width String Properties */ | ||
| .w-auto { width: auto; } | ||
| .wi-bb { width: border-box; } | ||
| .wi-cb { width: content-box; } | ||
| .wi-mx { width: max-content; } | ||
| .wi-mn { width: min-content; } | ||
| .wi-av { width: available; } | ||
| .wi-fc { width: fit-content; } | ||
| .wi-at { width: auto; } | ||
| .wi-i { width: inherit; } | ||
| @media (--breakpoint-not-small) { | ||
| .wi1-ns { width: 1rem; } | ||
| .wi2-ns { width: 2rem; } | ||
| .wi3-ns { width: 4rem; } | ||
| .wi4-ns { width: 8rem; } | ||
| .wi5-ns { width: 16rem; } | ||
| .wi-10-ns { width: 10%; } | ||
| .wi-20-ns { width: 20%; } | ||
| .wi-25-ns { width: 25%; } | ||
| .wi-40-ns { width: 40%; } | ||
| .wi-50-ns { width: 50%; } | ||
| .wi-60-ns { width: 60%; } | ||
| .wi-75-ns { width: 75%; } | ||
| .wi-80-ns { width: 80%; } | ||
| .wi-100-ns { width: 100%; } | ||
| .wi-bb-ns { width: border-box; } | ||
| .wi-cb-ns { width: content-box; } | ||
| .wi-mx-ns { width: max-content; } | ||
| .wi-mn-ns { width: min-content; } | ||
| .wi-av-ns { width: available; } | ||
| .wi-fc-ns { width: fit-content; } | ||
| .wi-at-ns { width: auto; } | ||
| .wi-i-ns { width: inherit; } | ||
| .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-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-75-ns { width: 75%; } | ||
| .w-80-ns { width: 80%; } | ||
| .w-100-ns { width: 100%; } | ||
| .w-auto-ns { width: auto; } | ||
| } | ||
| @media (--breakpoint-medium) { | ||
| .wi1-m { width: 1rem; } | ||
| .wi2-m { width: 2rem; } | ||
| .wi3-m { width: 4rem; } | ||
| .wi4-m { width: 8rem; } | ||
| .wi5-m { width: 16rem; } | ||
| .wi-10-m { width: 10%; } | ||
| .wi-20-m { width: 20%; } | ||
| .wi-25-m { width: 25%; } | ||
| .wi-40-m { width: 40%; } | ||
| .wi-50-m { width: 50%; } | ||
| .wi-60-m { width: 60%; } | ||
| .wi-75-m { width: 75%; } | ||
| .wi-80-m { width: 80%; } | ||
| .wi-100-m { width: 100%; } | ||
| .wi-bb-m { width: border-box; } | ||
| .wi-cb-m { width: content-box; } | ||
| .wi-mx-m { width: max-content; } | ||
| .wi-mn-m { width: min-content; } | ||
| .wi-av-m { width: available; } | ||
| .wi-fc-m { width: fit-content; } | ||
| .wi-at-m { width: auto; } | ||
| .wi-i-m { width: inherit; } | ||
| .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-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-75-m { width: 75%; } | ||
| .w-80-m { width: 80%; } | ||
| .w-100-m { width: 100%; } | ||
| .w-auto-m { width: auto; } | ||
| } | ||
| @media (--breakpoint-large) { | ||
| .wi1-l { width: 1rem; } | ||
| .wi2-l { width: 2rem; } | ||
| .wi3-l { width: 4rem; } | ||
| .wi4-l { width: 8rem; } | ||
| .wi5-l { width: 16rem; } | ||
| .wi-10-l { width: 10%; } | ||
| .wi-20-l { width: 20%; } | ||
| .wi-25-l { width: 25%; } | ||
| .wi-40-l { width: 40%; } | ||
| .wi-50-l { width: 50%; } | ||
| .wi-60-l { width: 60%; } | ||
| .wi-75-l { width: 75%; } | ||
| .wi-80-l { width: 80%; } | ||
| .wi-100-l { width: 100%; } | ||
| .wi-bb-l { width: border-box; } | ||
| .wi-cb-l { width: content-box; } | ||
| .wi-mx-l { width: max-content; } | ||
| .wi-mn-l { width: min-content; } | ||
| .wi-av-l { width: available; } | ||
| .wi-fc-l { width: fit-content; } | ||
| .wi-at-l { width: auto; } | ||
| .wi-i-l { width: inherit; } | ||
| .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-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-75-l { width: 75%; } | ||
| .w-80-l { width: 80%; } | ||
| .w-100-l { width: 100%; } | ||
| .w-auto-l { width: auto; } | ||
| } | ||
@@ -132,0 +140,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by5%
168
Worsened metrics
- Total package byte prevSize
- decreased by-9.34%
22602
- Lines of code
- decreased by-13.62%
368
No dependency changes