css-max-width-percentages 0.0.6
Css module of single purpose classes for max width percentages
Stats
1570 | 400 | 400 |
---|---|---|
bytes | selectors | declarations |
Installation
With npm
npm install --save-dev css-max-width-percentages
With Git
git clone https://github.com/tachyons-css/css-max-width-percentages
Usage
Using with PostCSS
Import the css module
@import "css-max-width-percentages";
Then process the CSS using the tachyons-cli
$ npm i -g tachyons-cli$ tachyons-cli path/to/css-file.css > dist/t.css
Using the CSS
The 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-max-width-percentages">
Development
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.
The CSS
/* MAX WIDTHS*/.mx-wi-1 { max-width: 1%; }.mx-wi-2 { max-width: 2%; }.mx-wi-3 { max-width: 3%; }.mx-wi-4 { max-width: 4%; }.mx-wi-5 { max-width: 5%; }.mx-wi-6 { max-width: 6%; }.mx-wi-7 { max-width: 7%; }.mx-wi-8 { max-width: 8%; }.mx-wi-9 { max-width: 9%; }.mx-wi-10 { max-width: 10%; }.mx-wi-11 { max-width: 11%; }.mx-wi-12 { max-width: 12%; }.mx-wi-13 { max-width: 13%; }.mx-wi-14 { max-width: 14%; }.mx-wi-15 { max-width: 15%; }.mx-wi-16 { max-width: 16%; }.mx-wi-17 { max-width: 17%; }.mx-wi-18 { max-width: 18%; }.mx-wi-19 { max-width: 19%; }.mx-wi-20 { max-width: 20%; }.mx-wi-21 { max-width: 21%; }.mx-wi-22 { max-width: 22%; }.mx-wi-23 { max-width: 23%; }.mx-wi-24 { max-width: 24%; }.mx-wi-25 { max-width: 25%; }.mx-wi-26 { max-width: 26%; }.mx-wi-27 { max-width: 27%; }.mx-wi-28 { max-width: 28%; }.mx-wi-29 { max-width: 29%; }.mx-wi-30 { max-width: 30%; }.mx-wi-31 { max-width: 31%; }.mx-wi-32 { max-width: 32%; }.mx-wi-33 { max-width: 33%; }.mx-wi-34 { max-width: 34%; }.mx-wi-35 { max-width: 35%; }.mx-wi-36 { max-width: 36%; }.mx-wi-37 { max-width: 37%; }.mx-wi-38 { max-width: 38%; }.mx-wi-39 { max-width: 39%; }.mx-wi-40 { max-width: 40%; }.mx-wi-41 { max-width: 41%; }.mx-wi-42 { max-width: 42%; }.mx-wi-43 { max-width: 43%; }.mx-wi-44 { max-width: 44%; }.mx-wi-45 { max-width: 45%; }.mx-wi-46 { max-width: 46%; }.mx-wi-47 { max-width: 47%; }.mx-wi-48 { max-width: 48%; }.mx-wi-49 { max-width: 49%; }.mx-wi-50 { max-width: 50%; }.mx-wi-51 { max-width: 51%; }.mx-wi-52 { max-width: 52%; }.mx-wi-53 { max-width: 53%; }.mx-wi-54 { max-width: 54%; }.mx-wi-55 { max-width: 55%; }.mx-wi-56 { max-width: 56%; }.mx-wi-57 { max-width: 57%; }.mx-wi-58 { max-width: 58%; }.mx-wi-59 { max-width: 59%; }.mx-wi-60 { max-width: 60%; }.mx-wi-61 { max-width: 61%; }.mx-wi-62 { max-width: 62%; }.mx-wi-63 { max-width: 63%; }.mx-wi-64 { max-width: 64%; }.mx-wi-65 { max-width: 65%; }.mx-wi-66 { max-width: 66%; }.mx-wi-67 { max-width: 67%; }.mx-wi-68 { max-width: 68%; }.mx-wi-69 { max-width: 69%; }.mx-wi-70 { max-width: 70%; }.mx-wi-71 { max-width: 71%; }.mx-wi-72 { max-width: 72%; }.mx-wi-73 { max-width: 73%; }.mx-wi-74 { max-width: 74%; }.mx-wi-75 { max-width: 75%; }.mx-wi-76 { max-width: 76%; }.mx-wi-77 { max-width: 77%; }.mx-wi-78 { max-width: 78%; }.mx-wi-79 { max-width: 79%; }.mx-wi-80 { max-width: 80%; }.mx-wi-81 { max-width: 81%; }.mx-wi-82 { max-width: 82%; }.mx-wi-83 { max-width: 83%; }.mx-wi-84 { max-width: 84%; }.mx-wi-85 { max-width: 85%; }.mx-wi-86 { max-width: 86%; }.mx-wi-87 { max-width: 87%; }.mx-wi-88 { max-width: 88%; }.mx-wi-89 { max-width: 89%; }.mx-wi-90 { max-width: 90%; }.mx-wi-91 { max-width: 91%; }.mx-wi-92 { max-width: 92%; }.mx-wi-93 { max-width: 93%; }.mx-wi-94 { max-width: 94%; }.mx-wi-95 { max-width: 95%; }.mx-wi-96 { max-width: 96%; }.mx-wi-97 { max-width: 97%; }.mx-wi-98 { max-width: 98%; }.mx-wi-99 { max-width: 99%; }.mx-wi-100 { max-width: 100%; }@media screen and (min-width: 48em) { .mx-wi-1-ns { max-width: 1%; } .mx-wi-2-ns { max-width: 2%; } .mx-wi-3-ns { max-width: 3%; } .mx-wi-4-ns { max-width: 4%; } .mx-wi-5-ns { max-width: 5%; } .mx-wi-6-ns { max-width: 6%; } .mx-wi-7-ns { max-width: 7%; } .mx-wi-8-ns { max-width: 8%; } .mx-wi-9-ns { max-width: 9%; } .mx-wi-10-ns { max-width: 10%; } .mx-wi-11-ns { max-width: 11%; } .mx-wi-12-ns { max-width: 12%; } .mx-wi-13-ns { max-width: 13%; } .mx-wi-14-ns { max-width: 14%; } .mx-wi-15-ns { max-width: 15%; } .mx-wi-16-ns { max-width: 16%; } .mx-wi-17-ns { max-width: 17%; } .mx-wi-18-ns { max-width: 18%; } .mx-wi-19-ns { max-width: 19%; } .mx-wi-20-ns { max-width: 20%; } .mx-wi-21-ns { max-width: 21%; } .mx-wi-22-ns { max-width: 22%; } .mx-wi-23-ns { max-width: 23%; } .mx-wi-24-ns { max-width: 24%; } .mx-wi-25-ns { max-width: 25%; } .mx-wi-26-ns { max-width: 26%; } .mx-wi-27-ns { max-width: 27%; } .mx-wi-28-ns { max-width: 28%; } .mx-wi-29-ns { max-width: 29%; } .mx-wi-30-ns { max-width: 30%; } .mx-wi-31-ns { max-width: 31%; } .mx-wi-32-ns { max-width: 32%; } .mx-wi-33-ns { max-width: 33%; } .mx-wi-34-ns { max-width: 34%; } .mx-wi-35-ns { max-width: 35%; } .mx-wi-36-ns { max-width: 36%; } .mx-wi-37-ns { max-width: 37%; } .mx-wi-38-ns { max-width: 38%; } .mx-wi-39-ns { max-width: 39%; } .mx-wi-40-ns { max-width: 40%; } .mx-wi-41-ns { max-width: 41%; } .mx-wi-42-ns { max-width: 42%; } .mx-wi-43-ns { max-width: 43%; } .mx-wi-44-ns { max-width: 44%; } .mx-wi-45-ns { max-width: 45%; } .mx-wi-46-ns { max-width: 46%; } .mx-wi-47-ns { max-width: 47%; } .mx-wi-48-ns { max-width: 48%; } .mx-wi-49-ns { max-width: 49%; } .mx-wi-50-ns { max-width: 50%; } .mx-wi-51-ns { max-width: 51%; } .mx-wi-52-ns { max-width: 52%; } .mx-wi-53-ns { max-width: 53%; } .mx-wi-54-ns { max-width: 54%; } .mx-wi-55-ns { max-width: 55%; } .mx-wi-56-ns { max-width: 56%; } .mx-wi-57-ns { max-width: 57%; } .mx-wi-58-ns { max-width: 58%; } .mx-wi-59-ns { max-width: 59%; } .mx-wi-60-ns { max-width: 60%; } .mx-wi-61-ns { max-width: 61%; } .mx-wi-62-ns { max-width: 62%; } .mx-wi-63-ns { max-width: 63%; } .mx-wi-64-ns { max-width: 64%; } .mx-wi-65-ns { max-width: 65%; } .mx-wi-66-ns { max-width: 66%; } .mx-wi-67-ns { max-width: 67%; } .mx-wi-68-ns { max-width: 68%; } .mx-wi-69-ns { max-width: 69%; } .mx-wi-70-ns { max-width: 70%; } .mx-wi-71-ns { max-width: 71%; } .mx-wi-72-ns { max-width: 72%; } .mx-wi-73-ns { max-width: 73%; } .mx-wi-74-ns { max-width: 74%; } .mx-wi-75-ns { max-width: 75%; } .mx-wi-76-ns { max-width: 76%; } .mx-wi-77-ns { max-width: 77%; } .mx-wi-78-ns { max-width: 78%; } .mx-wi-79-ns { max-width: 79%; } .mx-wi-80-ns { max-width: 80%; } .mx-wi-81-ns { max-width: 81%; } .mx-wi-82-ns { max-width: 82%; } .mx-wi-83-ns { max-width: 83%; } .mx-wi-84-ns { max-width: 84%; } .mx-wi-85-ns { max-width: 85%; } .mx-wi-86-ns { max-width: 86%; } .mx-wi-87-ns { max-width: 87%; } .mx-wi-88-ns { max-width: 88%; } .mx-wi-89-ns { max-width: 89%; } .mx-wi-90-ns { max-width: 90%; } .mx-wi-91-ns { max-width: 91%; } .mx-wi-92-ns { max-width: 92%; } .mx-wi-93-ns { max-width: 93%; } .mx-wi-94-ns { max-width: 94%; } .mx-wi-95-ns { max-width: 95%; } .mx-wi-96-ns { max-width: 96%; } .mx-wi-97-ns { max-width: 97%; } .mx-wi-98-ns { max-width: 98%; } .mx-wi-99-ns { max-width: 99%; } .mx-wi-100-ns { max-width: 100%; }}@media screen and (min-width:48em) and (max-width: 64em) { .mx-wi-1-m { max-width: 1%; } .mx-wi-2-m { max-width: 2%; } .mx-wi-3-m { max-width: 3%; } .mx-wi-4-m { max-width: 4%; } .mx-wi-5-m { max-width: 5%; } .mx-wi-6-m { max-width: 6%; } .mx-wi-7-m { max-width: 7%; } .mx-wi-8-m { max-width: 8%; } .mx-wi-9-m { max-width: 9%; } .mx-wi-10-m { max-width: 10%; } .mx-wi-11-m { max-width: 11%; } .mx-wi-12-m { max-width: 12%; } .mx-wi-13-m { max-width: 13%; } .mx-wi-14-m { max-width: 14%; } .mx-wi-15-m { max-width: 15%; } .mx-wi-16-m { max-width: 16%; } .mx-wi-17-m { max-width: 17%; } .mx-wi-18-m { max-width: 18%; } .mx-wi-19-m { max-width: 19%; } .mx-wi-20-m { max-width: 20%; } .mx-wi-21-m { max-width: 21%; } .mx-wi-22-m { max-width: 22%; } .mx-wi-23-m { max-width: 23%; } .mx-wi-24-m { max-width: 24%; } .mx-wi-25-m { max-width: 25%; } .mx-wi-26-m { max-width: 26%; } .mx-wi-27-m { max-width: 27%; } .mx-wi-28-m { max-width: 28%; } .mx-wi-29-m { max-width: 29%; } .mx-wi-30-m { max-width: 30%; } .mx-wi-31-m { max-width: 31%; } .mx-wi-32-m { max-width: 32%; } .mx-wi-33-m { max-width: 33%; } .mx-wi-34-m { max-width: 34%; } .mx-wi-35-m { max-width: 35%; } .mx-wi-36-m { max-width: 36%; } .mx-wi-37-m { max-width: 37%; } .mx-wi-38-m { max-width: 38%; } .mx-wi-39-m { max-width: 39%; } .mx-wi-40-m { max-width: 40%; } .mx-wi-41-m { max-width: 41%; } .mx-wi-42-m { max-width: 42%; } .mx-wi-43-m { max-width: 43%; } .mx-wi-44-m { max-width: 44%; } .mx-wi-45-m { max-width: 45%; } .mx-wi-46-m { max-width: 46%; } .mx-wi-47-m { max-width: 47%; } .mx-wi-48-m { max-width: 48%; } .mx-wi-49-m { max-width: 49%; } .mx-wi-50-m { max-width: 50%; } .mx-wi-51-m { max-width: 51%; } .mx-wi-52-m { max-width: 52%; } .mx-wi-53-m { max-width: 53%; } .mx-wi-54-m { max-width: 54%; } .mx-wi-55-m { max-width: 55%; } .mx-wi-56-m { max-width: 56%; } .mx-wi-57-m { max-width: 57%; } .mx-wi-58-m { max-width: 58%; } .mx-wi-59-m { max-width: 59%; } .mx-wi-60-m { max-width: 60%; } .mx-wi-61-m { max-width: 61%; } .mx-wi-62-m { max-width: 62%; } .mx-wi-63-m { max-width: 63%; } .mx-wi-64-m { max-width: 64%; } .mx-wi-65-m { max-width: 65%; } .mx-wi-66-m { max-width: 66%; } .mx-wi-67-m { max-width: 67%; } .mx-wi-68-m { max-width: 68%; } .mx-wi-69-m { max-width: 69%; } .mx-wi-70-m { max-width: 70%; } .mx-wi-71-m { max-width: 71%; } .mx-wi-72-m { max-width: 72%; } .mx-wi-73-m { max-width: 73%; } .mx-wi-74-m { max-width: 74%; } .mx-wi-75-m { max-width: 75%; } .mx-wi-76-m { max-width: 76%; } .mx-wi-77-m { max-width: 77%; } .mx-wi-78-m { max-width: 78%; } .mx-wi-79-m { max-width: 79%; } .mx-wi-80-m { max-width: 80%; } .mx-wi-81-m { max-width: 81%; } .mx-wi-82-m { max-width: 82%; } .mx-wi-83-m { max-width: 83%; } .mx-wi-84-m { max-width: 84%; } .mx-wi-85-m { max-width: 85%; } .mx-wi-86-m { max-width: 86%; } .mx-wi-87-m { max-width: 87%; } .mx-wi-88-m { max-width: 88%; } .mx-wi-89-m { max-width: 89%; } .mx-wi-90-m { max-width: 90%; } .mx-wi-91-m { max-width: 91%; } .mx-wi-92-m { max-width: 92%; } .mx-wi-93-m { max-width: 93%; } .mx-wi-94-m { max-width: 94%; } .mx-wi-95-m { max-width: 95%; } .mx-wi-96-m { max-width: 96%; } .mx-wi-97-m { max-width: 97%; } .mx-wi-98-m { max-width: 98%; } .mx-wi-99-m { max-width: 99%; } .mx-wi-100-m { max-width: 100%; }}@media screen and (min-width: 64em) { .mx-wi-1-l { max-width: 1%; } .mx-wi-2-l { max-width: 2%; } .mx-wi-3-l { max-width: 3%; } .mx-wi-4-l { max-width: 4%; } .mx-wi-5-l { max-width: 5%; } .mx-wi-6-l { max-width: 6%; } .mx-wi-7-l { max-width: 7%; } .mx-wi-8-l { max-width: 8%; } .mx-wi-9-l { max-width: 9%; } .mx-wi-10-l { max-width: 10%; } .mx-wi-11-l { max-width: 11%; } .mx-wi-12-l { max-width: 12%; } .mx-wi-13-l { max-width: 13%; } .mx-wi-14-l { max-width: 14%; } .mx-wi-15-l { max-width: 15%; } .mx-wi-16-l { max-width: 16%; } .mx-wi-17-l { max-width: 17%; } .mx-wi-18-l { max-width: 18%; } .mx-wi-19-l { max-width: 19%; } .mx-wi-20-l { max-width: 20%; } .mx-wi-21-l { max-width: 21%; } .mx-wi-22-l { max-width: 22%; } .mx-wi-23-l { max-width: 23%; } .mx-wi-24-l { max-width: 24%; } .mx-wi-25-l { max-width: 25%; } .mx-wi-26-l { max-width: 26%; } .mx-wi-27-l { max-width: 27%; } .mx-wi-28-l { max-width: 28%; } .mx-wi-29-l { max-width: 29%; } .mx-wi-30-l { max-width: 30%; } .mx-wi-31-l { max-width: 31%; } .mx-wi-32-l { max-width: 32%; } .mx-wi-33-l { max-width: 33%; } .mx-wi-34-l { max-width: 34%; } .mx-wi-35-l { max-width: 35%; } .mx-wi-36-l { max-width: 36%; } .mx-wi-37-l { max-width: 37%; } .mx-wi-38-l { max-width: 38%; } .mx-wi-39-l { max-width: 39%; } .mx-wi-40-l { max-width: 40%; } .mx-wi-41-l { max-width: 41%; } .mx-wi-42-l { max-width: 42%; } .mx-wi-43-l { max-width: 43%; } .mx-wi-44-l { max-width: 44%; } .mx-wi-45-l { max-width: 45%; } .mx-wi-46-l { max-width: 46%; } .mx-wi-47-l { max-width: 47%; } .mx-wi-48-l { max-width: 48%; } .mx-wi-49-l { max-width: 49%; } .mx-wi-50-l { max-width: 50%; } .mx-wi-51-l { max-width: 51%; } .mx-wi-52-l { max-width: 52%; } .mx-wi-53-l { max-width: 53%; } .mx-wi-54-l { max-width: 54%; } .mx-wi-55-l { max-width: 55%; } .mx-wi-56-l { max-width: 56%; } .mx-wi-57-l { max-width: 57%; } .mx-wi-58-l { max-width: 58%; } .mx-wi-59-l { max-width: 59%; } .mx-wi-60-l { max-width: 60%; } .mx-wi-61-l { max-width: 61%; } .mx-wi-62-l { max-width: 62%; } .mx-wi-63-l { max-width: 63%; } .mx-wi-64-l { max-width: 64%; } .mx-wi-65-l { max-width: 65%; } .mx-wi-66-l { max-width: 66%; } .mx-wi-67-l { max-width: 67%; } .mx-wi-68-l { max-width: 68%; } .mx-wi-69-l { max-width: 69%; } .mx-wi-70-l { max-width: 70%; } .mx-wi-71-l { max-width: 71%; } .mx-wi-72-l { max-width: 72%; } .mx-wi-73-l { max-width: 73%; } .mx-wi-74-l { max-width: 74%; } .mx-wi-75-l { max-width: 75%; } .mx-wi-76-l { max-width: 76%; } .mx-wi-77-l { max-width: 77%; } .mx-wi-78-l { max-width: 78%; } .mx-wi-79-l { max-width: 79%; } .mx-wi-80-l { max-width: 80%; } .mx-wi-81-l { max-width: 81%; } .mx-wi-82-l { max-width: 82%; } .mx-wi-83-l { max-width: 83%; } .mx-wi-84-l { max-width: 84%; } .mx-wi-85-l { max-width: 85%; } .mx-wi-86-l { max-width: 86%; } .mx-wi-87-l { max-width: 87%; } .mx-wi-88-l { max-width: 88%; } .mx-wi-89-l { max-width: 89%; } .mx-wi-90-l { max-width: 90%; } .mx-wi-91-l { max-width: 91%; } .mx-wi-92-l { max-width: 92%; } .mx-wi-93-l { max-width: 93%; } .mx-wi-94-l { max-width: 94%; } .mx-wi-95-l { max-width: 95%; } .mx-wi-96-l { max-width: 96%; } .mx-wi-97-l { max-width: 97%; } .mx-wi-98-l { max-width: 98%; } .mx-wi-99-l { max-width: 99%; } .mx-wi-100-l { max-width: 100%; }}
Contributing
- 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
Authors
License
ISC