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:

• https://webpack.github.io/docs/stylesheets.html
• https://github.com/defunctzombie/npm-css

With Git

http:

git clone https://github.com/tachyons-css/css-height-percentages

ssh:

git clone [email protected]: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/[email protected]/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

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Authors

• mrmrs
• johno

License

ISC