Tachyons

Docs

/

Layout

/

Heights

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
src/_heights.css

/*

   HEIGHTS

*/

/* Height Scale */

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

.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-bb { height: border-box; }
.h-cb { height: content-box; }
.h-mx { height: max-content; }
.h-mn { height: min-content; }
.h-av { height: available; }
.h-fc { height: fit-content; }
.h-at { height: auto; }
.h-i {  height: inherit; }

@media (--breakpoint-not-small) {
  .h-1-ns {  height: 1rem; }
  .h-2-ns {  height: 2rem; }
  .h-3-ns {  height: 4rem; }
  .h-4-ns {  height: 8rem; }
  .h-5-ns {  height: 16rem; }
  .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-bb-ns { height: border-box; }
  .h-cb-ns { height: content-box; }
  .h-mx-ns { height: max-content; }
  .h-mn-ns { height: min-content; }
  .h-av-ns { height: available; }
  .h-fc-ns { height: fit-content; }
  .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; }
  .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-bb-m {    height: border-box; }
  .h-cb-m {    height: content-box; }
  .h-mx-m {    height: max-content; }
  .h-mn-m {    height: min-content; }
  .h-av-m {    height: available; }
  .h-fc-m {    height: fit-content; }
  .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; }
  .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-bb-l {    height: border-box; }
  .h-cb-l {    height: content-box; }
  .h-mx-l {    height: max-content; }
  .h-mn-l {    height: min-content; }
  .h-av-l {    height: available; }
  .h-fc-l {    height: fit-content; }
  .h-at-l {    height: auto; }
  .h-i-l {     height: inherit; }
}