css-height-percentages 1.0.6
Css module of single purpose classes for height percentages
Stats
1590 | 400 | 400 |
---|---|---|
bytes | selectors | declarations |
Installation
With npm
npm install --save-dev css-height-percentages
Learn more about using css installed with npm:
With Git
http:
git clone https://github.com/tachyons-css/css-height-percentages
ssh:
git clone git@github.com:tachyons-css/css-height-percentages.git
Usage
Using with Postcss
Import the css module
@import "css-height-percentages";
Then process the css using the tachyons-cli
$ npm i -g tachyons-cli$ tachyons path/to/css-file.css > dist/t.css
Using the css
CDN
The easiest and most simple way to use the css is to use the cdn hosted version. Include it in the head of your html with:
<link rel="stylesheet" href="http://unpkg.com/css-height-percentages@1.0.6/css/css-height-percentages.min.css" />
Locally
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-height-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
/* HEIGHT - PERCENTAGES*/.ht-1 { height: 1%; }.ht-2 { height: 2%; }.ht-3 { height: 3%; }.ht-4 { height: 4%; }.ht-5 { height: 5%; }.ht-6 { height: 6%; }.ht-7 { height: 7%; }.ht-8 { height: 8%; }.ht-9 { height: 9%; }.ht-10 { height: 10%; }.ht-11 { height: 11%; }.ht-12 { height: 12%; }.ht-13 { height: 13%; }.ht-14 { height: 14%; }.ht-15 { height: 15%; }.ht-16 { height: 16%; }.ht-17 { height: 17%; }.ht-18 { height: 18%; }.ht-19 { height: 19%; }.ht-20 { height: 20%; }.ht-21 { height: 21%; }.ht-22 { height: 22%; }.ht-23 { height: 23%; }.ht-24 { height: 24%; }.ht-25 { height: 25%; }.ht-26 { height: 26%; }.ht-27 { height: 27%; }.ht-28 { height: 28%; }.ht-29 { height: 29%; }.ht-30 { height: 30%; }.ht-31 { height: 31%; }.ht-32 { height: 32%; }.ht-33 { height: 33%; }.ht-34 { height: 34%; }.ht-35 { height: 35%; }.ht-36 { height: 36%; }.ht-37 { height: 37%; }.ht-38 { height: 38%; }.ht-39 { height: 39%; }.ht-40 { height: 40%; }.ht-41 { height: 41%; }.ht-42 { height: 42%; }.ht-43 { height: 43%; }.ht-44 { height: 44%; }.ht-45 { height: 45%; }.ht-46 { height: 46%; }.ht-47 { height: 47%; }.ht-48 { height: 48%; }.ht-49 { height: 49%; }.ht-50 { height: 50%; }.ht-51 { height: 51%; }.ht-52 { height: 52%; }.ht-53 { height: 53%; }.ht-54 { height: 54%; }.ht-55 { height: 55%; }.ht-56 { height: 56%; }.ht-57 { height: 57%; }.ht-58 { height: 58%; }.ht-59 { height: 59%; }.ht-60 { height: 60%; }.ht-61 { height: 61%; }.ht-62 { height: 62%; }.ht-63 { height: 63%; }.ht-64 { height: 64%; }.ht-65 { height: 65%; }.ht-66 { height: 66%; }.ht-67 { height: 67%; }.ht-68 { height: 68%; }.ht-69 { height: 69%; }.ht-70 { height: 70%; }.ht-71 { height: 71%; }.ht-72 { height: 72%; }.ht-73 { height: 73%; }.ht-74 { height: 74%; }.ht-75 { height: 75%; }.ht-76 { height: 76%; }.ht-77 { height: 77%; }.ht-78 { height: 78%; }.ht-79 { height: 79%; }.ht-80 { height: 80%; }.ht-81 { height: 81%; }.ht-82 { height: 82%; }.ht-83 { height: 83%; }.ht-84 { height: 84%; }.ht-85 { height: 85%; }.ht-86 { height: 86%; }.ht-87 { height: 87%; }.ht-88 { height: 88%; }.ht-89 { height: 89%; }.ht-90 { height: 90%; }.ht-91 { height: 91%; }.ht-92 { height: 92%; }.ht-93 { height: 93%; }.ht-94 { height: 94%; }.ht-95 { height: 95%; }.ht-96 { height: 96%; }.ht-97 { height: 97%; }.ht-98 { height: 98%; }.ht-99 { height: 99%; }.ht-100 { height: 100%; }@media screen and (min-width: 48em) { .ht-1-ns { height: 1%; } .ht-2-ns { height: 2%; } .ht-3-ns { height: 3%; } .ht-4-ns { height: 4%; } .ht-5-ns { height: 5%; } .ht-6-ns { height: 6%; } .ht-7-ns { height: 7%; } .ht-8-ns { height: 8%; } .ht-9-ns { height: 9%; } .ht-10-ns { height: 10%; } .ht-11-ns { height: 11%; } .ht-12-ns { height: 12%; } .ht-13-ns { height: 13%; } .ht-14-ns { height: 14%; } .ht-15-ns { height: 15%; } .ht-16-ns { height: 16%; } .ht-17-ns { height: 17%; } .ht-18-ns { height: 18%; } .ht-19-ns { height: 19%; } .ht-20-ns { height: 20%; } .ht-21-ns { height: 21%; } .ht-22-ns { height: 22%; } .ht-23-ns { height: 23%; } .ht-24-ns { height: 24%; } .ht-25-ns { height: 25%; } .ht-26-ns { height: 26%; } .ht-27-ns { height: 27%; } .ht-28-ns { height: 28%; } .ht-29-ns { height: 29%; } .ht-30-ns { height: 30%; } .ht-31-ns { height: 31%; } .ht-32-ns { height: 32%; } .ht-33-ns { height: 33%; } .ht-34-ns { height: 34%; } .ht-35-ns { height: 35%; } .ht-36-ns { height: 36%; } .ht-37-ns { height: 37%; } .ht-38-ns { height: 38%; } .ht-39-ns { height: 39%; } .ht-40-ns { height: 40%; } .ht-41-ns { height: 41%; } .ht-42-ns { height: 42%; } .ht-43-ns { height: 43%; } .ht-44-ns { height: 44%; } .ht-45-ns { height: 45%; } .ht-46-ns { height: 46%; } .ht-47-ns { height: 47%; } .ht-48-ns { height: 48%; } .ht-49-ns { height: 49%; } .ht-50-ns { height: 50%; } .ht-51-ns { height: 51%; } .ht-52-ns { height: 52%; } .ht-53-ns { height: 53%; } .ht-54-ns { height: 54%; } .ht-55-ns { height: 55%; } .ht-56-ns { height: 56%; } .ht-57-ns { height: 57%; } .ht-58-ns { height: 58%; } .ht-59-ns { height: 59%; } .ht-60-ns { height: 60%; } .ht-61-ns { height: 61%; } .ht-62-ns { height: 62%; } .ht-63-ns { height: 63%; } .ht-64-ns { height: 64%; } .ht-65-ns { height: 65%; } .ht-66-ns { height: 66%; } .ht-67-ns { height: 67%; } .ht-68-ns { height: 68%; } .ht-69-ns { height: 69%; } .ht-70-ns { height: 70%; } .ht-71-ns { height: 71%; } .ht-72-ns { height: 72%; } .ht-73-ns { height: 73%; } .ht-74-ns { height: 74%; } .ht-75-ns { height: 75%; } .ht-76-ns { height: 76%; } .ht-77-ns { height: 77%; } .ht-78-ns { height: 78%; } .ht-79-ns { height: 79%; } .ht-80-ns { height: 80%; } .ht-81-ns { height: 81%; } .ht-82-ns { height: 82%; } .ht-83-ns { height: 83%; } .ht-84-ns { height: 84%; } .ht-85-ns { height: 85%; } .ht-86-ns { height: 86%; } .ht-87-ns { height: 87%; } .ht-88-ns { height: 88%; } .ht-89-ns { height: 89%; } .ht-90-ns { height: 90%; } .ht-91-ns { height: 91%; } .ht-92-ns { height: 92%; } .ht-93-ns { height: 93%; } .ht-94-ns { height: 94%; } .ht-95-ns { height: 95%; } .ht-96-ns { height: 96%; } .ht-97-ns { height: 97%; } .ht-98-ns { height: 98%; } .ht-99-ns { height: 99%; } .ht-100-ns { height: 100%; }}@media screen and (min-width:48em) and (max-width: 64em) { .ht-1-m { height: 1%; } .ht-2-m { height: 2%; } .ht-3-m { height: 3%; } .ht-4-m { height: 4%; } .ht-5-m { height: 5%; } .ht-6-m { height: 6%; } .ht-7-m { height: 7%; } .ht-8-m { height: 8%; } .ht-9-m { height: 9%; } .ht-10-m { height: 10%; } .ht-11-m { height: 11%; } .ht-12-m { height: 12%; } .ht-13-m { height: 13%; } .ht-14-m { height: 14%; } .ht-15-m { height: 15%; } .ht-16-m { height: 16%; } .ht-17-m { height: 17%; } .ht-18-m { height: 18%; } .ht-19-m { height: 19%; } .ht-20-m { height: 20%; } .ht-21-m { height: 21%; } .ht-22-m { height: 22%; } .ht-23-m { height: 23%; } .ht-24-m { height: 24%; } .ht-25-m { height: 25%; } .ht-26-m { height: 26%; } .ht-27-m { height: 27%; } .ht-28-m { height: 28%; } .ht-29-m { height: 29%; } .ht-30-m { height: 30%; } .ht-31-m { height: 31%; } .ht-32-m { height: 32%; } .ht-33-m { height: 33%; } .ht-34-m { height: 34%; } .ht-35-m { height: 35%; } .ht-36-m { height: 36%; } .ht-37-m { height: 37%; } .ht-38-m { height: 38%; } .ht-39-m { height: 39%; } .ht-40-m { height: 40%; } .ht-41-m { height: 41%; } .ht-42-m { height: 42%; } .ht-43-m { height: 43%; } .ht-44-m { height: 44%; } .ht-45-m { height: 45%; } .ht-46-m { height: 46%; } .ht-47-m { height: 47%; } .ht-48-m { height: 48%; } .ht-49-m { height: 49%; } .ht-50-m { height: 50%; } .ht-51-m { height: 51%; } .ht-52-m { height: 52%; } .ht-53-m { height: 53%; } .ht-54-m { height: 54%; } .ht-55-m { height: 55%; } .ht-56-m { height: 56%; } .ht-57-m { height: 57%; } .ht-58-m { height: 58%; } .ht-59-m { height: 59%; } .ht-60-m { height: 60%; } .ht-61-m { height: 61%; } .ht-62-m { height: 62%; } .ht-63-m { height: 63%; } .ht-64-m { height: 64%; } .ht-65-m { height: 65%; } .ht-66-m { height: 66%; } .ht-67-m { height: 67%; } .ht-68-m { height: 68%; } .ht-69-m { height: 69%; } .ht-70-m { height: 70%; } .ht-71-m { height: 71%; } .ht-72-m { height: 72%; } .ht-73-m { height: 73%; } .ht-74-m { height: 74%; } .ht-75-m { height: 75%; } .ht-76-m { height: 76%; } .ht-77-m { height: 77%; } .ht-78-m { height: 78%; } .ht-79-m { height: 79%; } .ht-80-m { height: 80%; } .ht-81-m { height: 81%; } .ht-82-m { height: 82%; } .ht-83-m { height: 83%; } .ht-84-m { height: 84%; } .ht-85-m { height: 85%; } .ht-86-m { height: 86%; } .ht-87-m { height: 87%; } .ht-88-m { height: 88%; } .ht-89-m { height: 89%; } .ht-90-m { height: 90%; } .ht-91-m { height: 91%; } .ht-92-m { height: 92%; } .ht-93-m { height: 93%; } .ht-94-m { height: 94%; } .ht-95-m { height: 95%; } .ht-96-m { height: 96%; } .ht-97-m { height: 97%; } .ht-98-m { height: 98%; } .ht-99-m { height: 99%; } .ht-100-m { height: 100%; }}@media screen and (min-width: 64em) { .ht-1-l { height: 1%; } .ht-2-l { height: 2%; } .ht-3-l { height: 3%; } .ht-4-l { height: 4%; } .ht-5-l { height: 5%; } .ht-6-l { height: 6%; } .ht-7-l { height: 7%; } .ht-8-l { height: 8%; } .ht-9-l { height: 9%; } .ht-10-l { height: 10%; } .ht-11-l { height: 11%; } .ht-12-l { height: 12%; } .ht-13-l { height: 13%; } .ht-14-l { height: 14%; } .ht-15-l { height: 15%; } .ht-16-l { height: 16%; } .ht-17-l { height: 17%; } .ht-18-l { height: 18%; } .ht-19-l { height: 19%; } .ht-20-l { height: 20%; } .ht-21-l { height: 21%; } .ht-22-l { height: 22%; } .ht-23-l { height: 23%; } .ht-24-l { height: 24%; } .ht-25-l { height: 25%; } .ht-26-l { height: 26%; } .ht-27-l { height: 27%; } .ht-28-l { height: 28%; } .ht-29-l { height: 29%; } .ht-30-l { height: 30%; } .ht-31-l { height: 31%; } .ht-32-l { height: 32%; } .ht-33-l { height: 33%; } .ht-34-l { height: 34%; } .ht-35-l { height: 35%; } .ht-36-l { height: 36%; } .ht-37-l { height: 37%; } .ht-38-l { height: 38%; } .ht-39-l { height: 39%; } .ht-40-l { height: 40%; } .ht-41-l { height: 41%; } .ht-42-l { height: 42%; } .ht-43-l { height: 43%; } .ht-44-l { height: 44%; } .ht-45-l { height: 45%; } .ht-46-l { height: 46%; } .ht-47-l { height: 47%; } .ht-48-l { height: 48%; } .ht-49-l { height: 49%; } .ht-50-l { height: 50%; } .ht-51-l { height: 51%; } .ht-52-l { height: 52%; } .ht-53-l { height: 53%; } .ht-54-l { height: 54%; } .ht-55-l { height: 55%; } .ht-56-l { height: 56%; } .ht-57-l { height: 57%; } .ht-58-l { height: 58%; } .ht-59-l { height: 59%; } .ht-60-l { height: 60%; } .ht-61-l { height: 61%; } .ht-62-l { height: 62%; } .ht-63-l { height: 63%; } .ht-64-l { height: 64%; } .ht-65-l { height: 65%; } .ht-66-l { height: 66%; } .ht-67-l { height: 67%; } .ht-68-l { height: 68%; } .ht-69-l { height: 69%; } .ht-70-l { height: 70%; } .ht-71-l { height: 71%; } .ht-72-l { height: 72%; } .ht-73-l { height: 73%; } .ht-74-l { height: 74%; } .ht-75-l { height: 75%; } .ht-76-l { height: 76%; } .ht-77-l { height: 77%; } .ht-78-l { height: 78%; } .ht-79-l { height: 79%; } .ht-80-l { height: 80%; } .ht-81-l { height: 81%; } .ht-82-l { height: 82%; } .ht-83-l { height: 83%; } .ht-84-l { height: 84%; } .ht-85-l { height: 85%; } .ht-86-l { height: 86%; } .ht-87-l { height: 87%; } .ht-88-l { height: 88%; } .ht-89-l { height: 89%; } .ht-90-l { height: 90%; } .ht-91-l { height: 91%; } .ht-92-l { height: 92%; } .ht-93-l { height: 93%; } .ht-94-l { height: 94%; } .ht-95-l { height: 95%; } .ht-96-l { height: 96%; } .ht-97-l { height: 97%; } .ht-98-l { height: 98%; } .ht-99-l { height: 99%; } .ht-100-l { height: 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