Tachyons

Docs

/

Layout

/

Heights

Version
2.1.0
Filesize
361 B
Declarations
76
Selectors
76
Max. Specificity Score
10
Size of Avg. Rule
1

The heights module contains both a five-step width scale based on powers of two as well as a series of percentage values that can be used within elements that have a declared height.

Class name structure is as follows:

Base:
  h = height

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
  -20
  -25
  -30
  -40
  -50
  -60
  -70
  -75
  -80
  -90
  -100

  -auto  = string value auto

Media Query Extensions:
  -ns = not-small
  -m  = medium
  -l  = large

Examples

Height Scale

.h1
.h2
.h3
.h4
.h5

Height Percentages

h-10
h-20
h-25
h-30
h-40
h-50
h-60
h-70
h-75
h-80
h-90
h-100

Previous

Max Width

Next

Position

Reference

MDN - Height
src/_heights.css

/*

   HEIGHTS

*/

/* Height Scale */

.h1 {  height: 1rem; }
.h2 {  height: 2rem; }
.h3 {  height: 4rem; }
.h4 {  height: 8rem; }
.h5 {  height: 16rem; }
.h6 {  height: 32rem; }

/* Height Percentages */

.h-10 { height:  10%; }
.h-20 { height:  20%; }
.h-25 { height:  25%; }
.h-30 { height:  30%; }
.h-40 { height:  40%; }
.h-50 { height:  50%; }
.h-60 { height:  60%; }
.h-70 { height:  70%; }
.h-75 { height:  75%; }
.h-80 { height:  80%; }
.h-90 { height:  90%; }
.h-100 { height: 100%; }

/* String Properties */

.h-at { height: auto; }
.h-i {  height: inherit; }

@media (--breakpoint-not-small) {
  .h1-ns {  height: 1rem; }
  .h2-ns {  height: 2rem; }
  .h3-ns {  height: 4rem; }
  .h4-ns {  height: 8rem; }
  .h5-ns {  height: 16rem; }
  .h6-ns {  height: 32rem; }
  .h-10-ns  { height: 10%; }
  .h-20-ns  { height: 20%; }
  .h-25-ns  { height: 25%; }
  .h-30-ns  { height: 30%; }
  .h-40-ns  { height: 40%; }
  .h-50-ns  { height: 50%; }
  .h-60-ns  { height: 60%; }
  .h-70-ns  { height: 70%; }
  .h-75-ns  { height: 75%; }
  .h-80-ns  { height: 80%; }
  .h-90-ns  { height: 90%; }
  .h-100-ns { height: 100%; }
  .h-at-ns { height: auto; }
  .h-i-ns {  height: inherit; }
}

@media (--breakpoint-medium) {
  .h1-m {      height: 1rem; }
  .h2-m {      height: 2rem; }
  .h3-m {      height: 4rem; }
  .h4-m {      height: 8rem; }
  .h5-m {      height: 16rem; }
  .h6-m {      height: 32rem; }
  .h-10-m  { height: 10%; }
  .h-20-m  { height: 20%; }
  .h-25-m  { height: 25%; }
  .h-30-m  { height: 30%; }
  .h-40-m  { height: 40%; }
  .h-50-m  { height: 50%; }
  .h-60-m  { height: 60%; }
  .h-70-m  { height: 70%; }
  .h-75-m  { height: 75%; }
  .h-80-m  { height: 80%; }
  .h-90-m  { height: 90%; }
  .h-100-m { height: 100%; }
  .h-at-m {    height: auto; }
  .h-i-m {     height: inherit; }
}

@media (--breakpoint-large) {
  .h1-l {      height: 1rem; }
  .h2-l {      height: 2rem; }
  .h3-l {      height: 4rem; }
  .h4-l {      height: 8rem; }
  .h5-l {      height: 16rem; }
  .h6-l {      height: 32rem; }
  .h-10-l  { height: 10%; }
  .h-20-l  { height: 20%; }
  .h-25-l  { height: 25%; }
  .h-30-l  { height: 30%; }
  .h-40-l  { height: 40%; }
  .h-50-l  { height: 50%; }
  .h-60-l  { height: 60%; }
  .h-70-l  { height: 70%; }
  .h-75-l  { height: 75%; }
  .h-80-l  { height: 80%; }
  .h-90-l  { height: 90%; }
  .h-100-l { height: 100%; }
  .h-at-l {    height: auto; }
  .h-i-l {     height: inherit; }
}


Docs

General

Debugging Images