Css module of single purpose classes for width percentages
| 1574 | 400 | 396 |
|---|---|---|
| bytes | selectors | declarations |
With npm
npm install --save-dev css-width-percentages
git clone https://github.com/tachyons-css/css-width-percentages
Using with PostCSS
Import the css module
@import "css-width-percentages";Then process the CSS using the tachyons-cli
$ npm i -g tachyons-cli
$ tachyons-cli path/to/css-file.css > dist/t.cssThe built CSS is located in the css directory. It contains an unminified and minified version.
You can either cut and paste that css or link to it directly in your html.
<link rel="stylesheet" href="path/to/module/css/css-width-percentages">The source CSS files can be found in the src directory.
Running $ npm start will process the source CSS and place the built CSS in the css directory.
/*
WIDTH - PERCENTAGES
*/
.wi-1 { width: 1%; }
.wi-2 { width: 2%; }
.wi-3 { width: 3%; }
.wi-4 { width: 4%; }
.wi-5 { width: 5%; }
.wi-6 { width: 6%; }
.wi-7 { width: 7%; }
.wi-8 { width: 8%; }
.wi-9 { width: 9%; }
.wi-10 { width: 10%; }
.wi-12 { width: 12%; }
.wi-13 { width: 13%; }
.wi-14 { width: 14%; }
.wi-15 { width: 15%; }
.wi-16 { width: 16%; }
.wi-17 { width: 17%; }
.wi-18 { width: 18%; }
.wi-19 { width: 19%; }
.wi-20 { width: 20%; }
.wi-21 { width: 21%; }
.wi-22 { width: 22%; }
.wi-23 { width: 23%; }
.wi-24 { width: 24%; }
.wi-25 { width: 25%; }
.wi-26 { width: 26%; }
.wi-27 { width: 27%; }
.wi-28 { width: 28%; }
.wi-29 { width: 29%; }
.wi-30 { width: 30%; }
.wi-31 { width: 31%; }
.wi-32 { width: 32%; }
.wi-33 { width: 33%; }
.wi-34 { width: 34%; }
.wi-35 { width: 35%; }
.wi-36 { width: 36%; }
.wi-37 { width: 37%; }
.wi-38 { width: 38%; }
.wi-39 { width: 39%; }
.wi-40 { width: 40%; }
.wi-41 { width: 41%; }
.wi-42 { width: 42%; }
.wi-43 { width: 43%; }
.wi-44 { width: 44%; }
.wi-45 { width: 45%; }
.wi-46 { width: 46%; }
.wi-47 { width: 47%; }
.wi-48 { width: 48%; }
.wi-49 { width: 49%; }
.wi-50 { width: 50%; }
.wi-51 { width: 51%; }
.wi-52 { width: 52%; }
.wi-53 { width: 53%; }
.wi-54 { width: 54%; }
.wi-55 { width: 55%; }
.wi-56 { width: 56%; }
.wi-57 { width: 57%; }
.wi-58 { width: 58%; }
.wi-59 { width: 59%; }
.wi-60 { width: 60%; }
.wi-61 { width: 61%; }
.wi-62 { width: 62%; }
.wi-63 { width: 63%; }
.wi-64 { width: 64%; }
.wi-65 { width: 65%; }
.wi-66 { width: 66%; }
.wi-67 { width: 67%; }
.wi-68 { width: 68%; }
.wi-69 { width: 69%; }
.wi-70 { width: 70%; }
.wi-71 { width: 71%; }
.wi-72 { width: 72%; }
.wi-73 { width: 73%; }
.wi-74 { width: 74%; }
.wi-75 { width: 75%; }
.wi-76 { width: 76%; }
.wi-77 { width: 77%; }
.wi-78 { width: 78%; }
.wi-79 { width: 79%; }
.wi-80 { width: 80%; }
.wi-81 { width: 81%; }
.wi-82 { width: 82%; }
.wi-83 { width: 83%; }
.wi-84 { width: 84%; }
.wi-85 { width: 85%; }
.wi-86 { width: 86%; }
.wi-87 { width: 87%; }
.wi-88 { width: 88%; }
.wi-89 { width: 89%; }
.wi-90 { width: 90%; }
.wi-91 { width: 91%; }
.wi-92 { width: 92%; }
.wi-93 { width: 93%; }
.wi-94 { width: 94%; }
.wi-95 { width: 95%; }
.wi-96 { width: 96%; }
.wi-97 { width: 97%; }
.wi-98 { width: 98%; }
.wi-99 { width: 99%; }
.wi-100, .wi-full { width: 100%; }
@media screen and (min-width: 48em) {
.wi-1-ns { width: 1%; }
.wi-2-ns { width: 2%; }
.wi-3-ns { width: 3%; }
.wi-4-ns { width: 4%; }
.wi-5-ns { width: 5%; }
.wi-6-ns { width: 6%; }
.wi-7-ns { width: 7%; }
.wi-8-ns { width: 8%; }
.wi-9-ns { width: 9%; }
.wi-10-ns { width: 10%; }
.wi-12-ns { width: 12%; }
.wi-13-ns { width: 13%; }
.wi-14-ns { width: 14%; }
.wi-15-ns { width: 15%; }
.wi-16-ns { width: 16%; }
.wi-17-ns { width: 17%; }
.wi-18-ns { width: 18%; }
.wi-19-ns { width: 19%; }
.wi-20-ns { width: 20%; }
.wi-21-ns { width: 21%; }
.wi-22-ns { width: 22%; }
.wi-23-ns { width: 23%; }
.wi-24-ns { width: 24%; }
.wi-25-ns { width: 25%; }
.wi-26-ns { width: 26%; }
.wi-27-ns { width: 27%; }
.wi-28-ns { width: 28%; }
.wi-29-ns { width: 29%; }
.wi-30-ns { width: 30%; }
.wi-31-ns { width: 31%; }
.wi-32-ns { width: 32%; }
.wi-33-ns { width: 33%; }
.wi-34-ns { width: 34%; }
.wi-35-ns { width: 35%; }
.wi-36-ns { width: 36%; }
.wi-37-ns { width: 37%; }
.wi-38-ns { width: 38%; }
.wi-39-ns { width: 39%; }
.wi-40-ns { width: 40%; }
.wi-41-ns { width: 41%; }
.wi-42-ns { width: 42%; }
.wi-43-ns { width: 43%; }
.wi-44-ns { width: 44%; }
.wi-45-ns { width: 45%; }
.wi-46-ns { width: 46%; }
.wi-47-ns { width: 47%; }
.wi-48-ns { width: 48%; }
.wi-49-ns { width: 49%; }
.wi-50-ns { width: 50%; }
.wi-51-ns { width: 51%; }
.wi-52-ns { width: 52%; }
.wi-53-ns { width: 53%; }
.wi-54-ns { width: 54%; }
.wi-55-ns { width: 55%; }
.wi-56-ns { width: 56%; }
.wi-57-ns { width: 57%; }
.wi-58-ns { width: 58%; }
.wi-59-ns { width: 59%; }
.wi-60-ns { width: 60%; }
.wi-61-ns { width: 61%; }
.wi-62-ns { width: 62%; }
.wi-63-ns { width: 63%; }
.wi-64-ns { width: 64%; }
.wi-65-ns { width: 65%; }
.wi-66-ns { width: 66%; }
.wi-67-ns { width: 67%; }
.wi-68-ns { width: 68%; }
.wi-69-ns { width: 69%; }
.wi-70-ns { width: 70%; }
.wi-71-ns { width: 71%; }
.wi-72-ns { width: 72%; }
.wi-73-ns { width: 73%; }
.wi-74-ns { width: 74%; }
.wi-75-ns { width: 75%; }
.wi-76-ns { width: 76%; }
.wi-77-ns { width: 77%; }
.wi-78-ns { width: 78%; }
.wi-79-ns { width: 79%; }
.wi-80-ns { width: 80%; }
.wi-81-ns { width: 81%; }
.wi-82-ns { width: 82%; }
.wi-83-ns { width: 83%; }
.wi-84-ns { width: 84%; }
.wi-85-ns { width: 85%; }
.wi-86-ns { width: 86%; }
.wi-87-ns { width: 87%; }
.wi-88-ns { width: 88%; }
.wi-89-ns { width: 89%; }
.wi-90-ns { width: 90%; }
.wi-91-ns { width: 91%; }
.wi-92-ns { width: 92%; }
.wi-93-ns { width: 93%; }
.wi-94-ns { width: 94%; }
.wi-95-ns { width: 95%; }
.wi-96-ns { width: 96%; }
.wi-97-ns { width: 97%; }
.wi-98-ns { width: 98%; }
.wi-99-ns { width: 99%; }
.wi-100, .wi-full-ns { width: 100%; }
}
@media screen and (min-width:48em) and (max-width: 64em) {
.wi-1-m { width: 1%; }
.wi-2-m { width: 2%; }
.wi-3-m { width: 3%; }
.wi-4-m { width: 4%; }
.wi-5-m { width: 5%; }
.wi-6-m { width: 6%; }
.wi-7-m { width: 7%; }
.wi-8-m { width: 8%; }
.wi-9-m { width: 9%; }
.wi-10-m { width: 10%; }
.wi-12-m { width: 12%; }
.wi-13-m { width: 13%; }
.wi-14-m { width: 14%; }
.wi-15-m { width: 15%; }
.wi-16-m { width: 16%; }
.wi-17-m { width: 17%; }
.wi-18-m { width: 18%; }
.wi-19-m { width: 19%; }
.wi-20-m { width: 20%; }
.wi-21-m { width: 21%; }
.wi-22-m { width: 22%; }
.wi-23-m { width: 23%; }
.wi-24-m { width: 24%; }
.wi-25-m { width: 25%; }
.wi-26-m { width: 26%; }
.wi-27-m { width: 27%; }
.wi-28-m { width: 28%; }
.wi-29-m { width: 29%; }
.wi-30-m { width: 30%; }
.wi-31-m { width: 31%; }
.wi-32-m { width: 32%; }
.wi-33-m { width: 33%; }
.wi-34-m { width: 34%; }
.wi-35-m { width: 35%; }
.wi-36-m { width: 36%; }
.wi-37-m { width: 37%; }
.wi-38-m { width: 38%; }
.wi-39-m { width: 39%; }
.wi-40-m { width: 40%; }
.wi-41-m { width: 41%; }
.wi-42-m { width: 42%; }
.wi-43-m { width: 43%; }
.wi-44-m { width: 44%; }
.wi-45-m { width: 45%; }
.wi-46-m { width: 46%; }
.wi-47-m { width: 47%; }
.wi-48-m { width: 48%; }
.wi-49-m { width: 49%; }
.wi-50-m { width: 50%; }
.wi-51-m { width: 51%; }
.wi-52-m { width: 52%; }
.wi-53-m { width: 53%; }
.wi-54-m { width: 54%; }
.wi-55-m { width: 55%; }
.wi-56-m { width: 56%; }
.wi-57-m { width: 57%; }
.wi-58-m { width: 58%; }
.wi-59-m { width: 59%; }
.wi-60-m { width: 60%; }
.wi-61-m { width: 61%; }
.wi-62-m { width: 62%; }
.wi-63-m { width: 63%; }
.wi-64-m { width: 64%; }
.wi-65-m { width: 65%; }
.wi-66-m { width: 66%; }
.wi-67-m { width: 67%; }
.wi-68-m { width: 68%; }
.wi-69-m { width: 69%; }
.wi-70-m { width: 70%; }
.wi-71-m { width: 71%; }
.wi-72-m { width: 72%; }
.wi-73-m { width: 73%; }
.wi-74-m { width: 74%; }
.wi-75-m { width: 75%; }
.wi-76-m { width: 76%; }
.wi-77-m { width: 77%; }
.wi-78-m { width: 78%; }
.wi-79-m { width: 79%; }
.wi-80-m { width: 80%; }
.wi-81-m { width: 81%; }
.wi-82-m { width: 82%; }
.wi-83-m { width: 83%; }
.wi-84-m { width: 84%; }
.wi-85-m { width: 85%; }
.wi-86-m { width: 86%; }
.wi-87-m { width: 87%; }
.wi-88-m { width: 88%; }
.wi-89-m { width: 89%; }
.wi-90-m { width: 90%; }
.wi-91-m { width: 91%; }
.wi-92-m { width: 92%; }
.wi-93-m { width: 93%; }
.wi-94-m { width: 94%; }
.wi-95-m { width: 95%; }
.wi-96-m { width: 96%; }
.wi-97-m { width: 97%; }
.wi-98-m { width: 98%; }
.wi-99-m { width: 99%; }
.wi-100, .wi-full-m { width: 100%; }
}
@media screen and (min-width: 64em) {
.wi-1-l { width: 1%; }
.wi-2-l { width: 2%; }
.wi-3-l { width: 3%; }
.wi-4-l { width: 4%; }
.wi-5-l { width: 5%; }
.wi-6-l { width: 6%; }
.wi-7-l { width: 7%; }
.wi-8-l { width: 8%; }
.wi-9-l { width: 9%; }
.wi-10-l { width: 10%; }
.wi-12-l { width: 12%; }
.wi-13-l { width: 13%; }
.wi-14-l { width: 14%; }
.wi-15-l { width: 15%; }
.wi-16-l { width: 16%; }
.wi-17-l { width: 17%; }
.wi-18-l { width: 18%; }
.wi-19-l { width: 19%; }
.wi-20-l { width: 20%; }
.wi-21-l { width: 21%; }
.wi-22-l { width: 22%; }
.wi-23-l { width: 23%; }
.wi-24-l { width: 24%; }
.wi-25-l { width: 25%; }
.wi-26-l { width: 26%; }
.wi-27-l { width: 27%; }
.wi-28-l { width: 28%; }
.wi-29-l { width: 29%; }
.wi-30-l { width: 30%; }
.wi-31-l { width: 31%; }
.wi-32-l { width: 32%; }
.wi-33-l { width: 33%; }
.wi-34-l { width: 34%; }
.wi-35-l { width: 35%; }
.wi-36-l { width: 36%; }
.wi-37-l { width: 37%; }
.wi-38-l { width: 38%; }
.wi-39-l { width: 39%; }
.wi-40-l { width: 40%; }
.wi-41-l { width: 41%; }
.wi-42-l { width: 42%; }
.wi-43-l { width: 43%; }
.wi-44-l { width: 44%; }
.wi-45-l { width: 45%; }
.wi-46-l { width: 46%; }
.wi-47-l { width: 47%; }
.wi-48-l { width: 48%; }
.wi-49-l { width: 49%; }
.wi-50-l { width: 50%; }
.wi-51-l { width: 51%; }
.wi-52-l { width: 52%; }
.wi-53-l { width: 53%; }
.wi-54-l { width: 54%; }
.wi-55-l { width: 55%; }
.wi-56-l { width: 56%; }
.wi-57-l { width: 57%; }
.wi-58-l { width: 58%; }
.wi-59-l { width: 59%; }
.wi-60-l { width: 60%; }
.wi-61-l { width: 61%; }
.wi-62-l { width: 62%; }
.wi-63-l { width: 63%; }
.wi-64-l { width: 64%; }
.wi-65-l { width: 65%; }
.wi-66-l { width: 66%; }
.wi-67-l { width: 67%; }
.wi-68-l { width: 68%; }
.wi-69-l { width: 69%; }
.wi-70-l { width: 70%; }
.wi-71-l { width: 71%; }
.wi-72-l { width: 72%; }
.wi-73-l { width: 73%; }
.wi-74-l { width: 74%; }
.wi-75-l { width: 75%; }
.wi-76-l { width: 76%; }
.wi-77-l { width: 77%; }
.wi-78-l { width: 78%; }
.wi-79-l { width: 79%; }
.wi-80-l { width: 80%; }
.wi-81-l { width: 81%; }
.wi-82-l { width: 82%; }
.wi-83-l { width: 83%; }
.wi-84-l { width: 84%; }
.wi-85-l { width: 85%; }
.wi-86-l { width: 86%; }
.wi-87-l { width: 87%; }
.wi-88-l { width: 88%; }
.wi-89-l { width: 89%; }
.wi-90-l { width: 90%; }
.wi-91-l { width: 91%; }
.wi-92-l { width: 92%; }
.wi-93-l { width: 93%; }
.wi-94-l { width: 94%; }
.wi-95-l { width: 95%; }
.wi-96-l { width: 96%; }
.wi-97-l { width: 97%; }
.wi-98-l { width: 98%; }
.wi-99-l { width: 99%; }
.wi-100, .wi-full-l { width: 100%; }
}- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
ISC