liser/src/modules/heights.css

functional css help to optimizing design work and building responsive websites

/* Height Scale */

.h1 {
  height: 1rem;
}
.h1s {
  height: 1.5rem;
}
.h2 {
  height: 2rem;
}
.h2s {
  height: 3rem;
}
.h3 {
  height: 4rem;
}
.h3s {
  height: 6rem;
}
.h4 {
  height: 8rem;
}
.h4s {
  height: 12rem;
}
.h5 {
  height: 16rem;
}
.h5s {
  height: 22rem;
}

/* Height Percentages - Based off of height of parent */

.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%;
}

.min-h-25 {
  min-height: 25%;
}
.min-h-50 {
  min-height: 50%;
}
.min-h-75 {
  min-height: 100%;
}
.min-h-100 {
  min-height: 100%;
}
.max-h-25 {
  max-height: 25%;
}
.max-h-50 {
  max-height: 50%;
}
.max-h-75 {
  max-height: 75%;
}
.max-h-100 {
  max-height: 100%;
}

/* Screen Height Percentage */

.vh-10 {
  height: 10vh;
}
.vh-20 {
  height: 20vh;
}
.vh-25 {
  height: 25vh;
}
.vh-30 {
  height: 30vh;
}
.vh-40 {
  height: 40vh;
}
.vh-50 {
  height: 50vh;
}
.vh-60 {
  height: 60vh;
}
.vh-70 {
  height: 70vh;
}
.vh-75 {
  height: 75vh;
}
.vh-80 {
  height: 80vh;
}
.vh-90 {
  height: 90vh;
}
.vh-100 {
  height: 100vh;
}
.min-vh-25 {
  min-height: 25vh;
}
.min-vh-50 {
  min-height: 50vh;
}
.min-vh-75 {
  min-height: 75vh;
}
.min-vh-100 {
  min-height: 100vh;
}
.max-vh-25 {
  max-height: 25vh;
}
.max-vh-50 {
  max-height: 50vh;
}
.max-vh-75 {
  max-height: 75vh;
}
.max-vh-100 {
  max-height: 100vh;
}

/* String Properties */

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

@media screen and (min-width: 30em) {
  .h1-ns {
    height: 1rem;
  }
  .h1s-ns {
    height: 1.5rem;
  }
  .h2-ns {
    height: 2rem;
  }
  .h2s-ns {
    height: 3rem;
  }
  .h3-ns {
    height: 4rem;
  }
  .h3s-ns {
    height: 6rem;
  }
  .h4-ns {
    height: 8rem;
  }
  .h4s-ns {
    height: 12rem;
  }
  .h5-ns {
    height: 16rem;
  }
  .h5s-ns {
    height: 22rem;
  }
  .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%;
  }
  .min-h-25-ns {
    min-height: 25%;
  }
  .min-h-50-ns {
    min-height: 50%;
  }
  .min-h-75-ns {
    min-height: 100%;
  }
  .min-h-100-ns {
    min-height: 100%;
  }
  .max-h-25-ns {
    max-height: 25%;
  }
  .max-h-50-ns {
    max-height: 50%;
  }
  .max-h-75-ns {
    max-height: 75%;
  }
  .max-h-100-ns {
    max-height: 100%;
  }
  .vh-10-ns {
    height: 10vh;
  }
  .vh-20-ns {
    height: 20vh;
  }
  .vh-25-ns {
    height: 25vh;
  }
  .vh-30-ns {
    height: 30vh;
  }
  .vh-40-ns {
    height: 40vh;
  }
  .vh-50-ns {
    height: 50vh;
  }
  .vh-60-ns {
    height: 60vh;
  }
  .vh-70-ns {
    height: 70vh;
  }
  .vh-75-ns {
    height: 75vh;
  }
  .vh-80-ns {
    height: 80vh;
  }
  .vh-90-ns {
    height: 90vh;
  }
  .vh-100-ns {
    height: 100vh;
  }
  .min-vh-25-ns {
    min-height: 25vh;
  }
  .min-vh-50-ns {
    min-height: 50vh;
  }
  .min-vh-75-ns {
    min-height: 75vh;
  }
  .min-vh-100-ns {
    min-height: 100vh;
  }
  .max-vh-25-ns {
    max-height: 25vh;
  }
  .max-vh-50-ns {
    max-height: 50vh;
  }
  .max-vh-75-ns {
    max-height: 75vh;
  }
  .max-vh-100-ns {
    max-height: 100vh;
  }
  .h-auto-ns {
    height: auto;
  }
  .h-inherit-ns {
    height: inherit;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .h1-m {
    height: 1rem;
  }
  .h1s-m {
    height: 1.5rem;
  }
  .h2-m {
    height: 2rem;
  }
  .h2s-m {
    height: 3rem;
  }
  .h3-m {
    height: 4rem;
  }
  .h3s-m {
    height: 6rem;
  }
  .h4-m {
    height: 8rem;
  }
  .h4s-m {
    height: 12rem;
  }
  .h5-m {
    height: 16rem;
  }
  .h5s-m {
    height: 22rem;
  }
  .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%;
  }
  .min-h-25-m {
    min-height: 25%;
  }
  .min-h-50-m {
    min-height: 50%;
  }
  .min-h-75-m {
    min-height: 100%;
  }
  .min-h-100-m {
    min-height: 100%;
  }
  .max-h-25-m {
    max-height: 25%;
  }
  .max-h-50-m {
    max-height: 50%;
  }
  .max-h-75-m {
    max-height: 75%;
  }
  .max-h-100-m {
    max-height: 100%;
  }
  .vh-10-m {
    height: 10vh;
  }
  .vh-20-m {
    height: 20vh;
  }
  .vh-25-m {
    height: 25vh;
  }
  .vh-30-m {
    height: 30vh;
  }
  .vh-40-m {
    height: 40vh;
  }
  .vh-50-m {
    height: 50vh;
  }
  .vh-60-m {
    height: 60vh;
  }
  .vh-70-m {
    height: 70vh;
  }
  .vh-75-m {
    height: 75vh;
  }
  .vh-80-m {
    height: 80vh;
  }
  .vh-90-m {
    height: 90vh;
  }
  .vh-100-m {
    height: 100vh;
  }
  .min-vh-25-m {
    min-height: 25vh;
  }
  .min-vh-50-m {
    min-height: 50vh;
  }
  .min-vh-75-m {
    min-height: 75vh;
  }
  .min-vh-100-m {
    min-height: 100vh;
  }
  .max-vh-25-m {
    max-height: 25vh;
  }
  .max-vh-50-m {
    max-height: 50vh;
  }
  .max-vh-75-m {
    max-height: 75vh;
  }
  .max-vh-100-m {
    max-height: 100vh;
  }
  .h-auto-m {
    height: auto;
  }
  .h-inherit-m {
    height: inherit;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .h1-ml {
    height: 1rem;
  }
  .h1s-ml {
    height: 1.5rem;
  }
  .h2-ml {
    height: 2rem;
  }
  .h2s-ml {
    height: 3rem;
  }
  .h3-ml {
    height: 4rem;
  }
  .h3s-ml {
    height: 6rem;
  }
  .h4-ml {
    height: 8rem;
  }
  .h4s-ml {
    height: 12rem;
  }
  .h5-ml {
    height: 16rem;
  }
  .h5s-ml {
    height: 22rem;
  }
  .h-10-ml {
    height: 10%;
  }
  .h-20-ml {
    height: 20%;
  }
  .h-25-ml {
    height: 25%;
  }
  .h-30-ml {
    height: 30%;
  }
  .h-40-ml {
    height: 40%;
  }
  .h-50-ml {
    height: 50%;
  }
  .h-60-ml {
    height: 60%;
  }
  .h-70-ml {
    height: 70%;
  }
  .h-75-ml {
    height: 75%;
  }
  .h-80-ml {
    height: 80%;
  }
  .h-90-ml {
    height: 90%;
  }
  .h-100-ml {
    height: 100%;
  }
  .min-h-25-ml {
    min-height: 25%;
  }
  .min-h-50-ml {
    min-height: 50%;
  }
  .min-h-75-ml {
    min-height: 100%;
  }
  .min-h-100-ml {
    min-height: 100%;
  }
  .max-h-25-ml {
    max-height: 25%;
  }
  .max-h-50-ml {
    max-height: 50%;
  }
  .max-h-75-ml {
    max-height: 75%;
  }
  .max-h-100-ml {
    max-height: 100%;
  }
  .vh-10-ml {
    height: 10vh;
  }
  .vh-20-ml {
    height: 20vh;
  }
  .vh-25-ml {
    height: 25vh;
  }
  .vh-30-ml {
    height: 30vh;
  }
  .vh-40-ml {
    height: 40vh;
  }
  .vh-50-ml {
    height: 50vh;
  }
  .vh-60-ml {
    height: 60vh;
  }
  .vh-70-ml {
    height: 70vh;
  }
  .vh-75-ml {
    height: 75vh;
  }
  .vh-80-ml {
    height: 80vh;
  }
  .vh-90-ml {
    height: 90vh;
  }
  .vh-100-ml {
    height: 100vh;
  }
  .min-vh-25-ml {
    min-height: 25vh;
  }
  .min-vh-50-ml {
    min-height: 50vh;
  }
  .min-vh-75-ml {
    min-height: 75vh;
  }
  .min-vh-100-ml {
    min-height: 100vh;
  }
  .max-vh-25-ml {
    max-height: 25vh;
  }
  .max-vh-50-ml {
    max-height: 50vh;
  }
  .max-vh-75-ml {
    max-height: 75vh;
  }
  .max-vh-100-ml {
    max-height: 100vh;
  }
  .h-auto-ml {
    height: auto;
  }
  .h-inherit-ml {
    height: inherit;
  }
}

@media screen and (min-width: 60em) {
  .h1-l {
    height: 1rem;
  }
  .h1s-l {
    height: 1.5rem;
  }
  .h2-l {
    height: 2rem;
  }
  .h2s-l {
    height: 3rem;
  }
  .h3-l {
    height: 4rem;
  }
  .h3s-l {
    height: 6rem;
  }
  .h4-l {
    height: 8rem;
  }
  .h4s-l {
    height: 12rem;
  }
  .h5-l {
    height: 16rem;
  }
  .h5s-l {
    height: 22rem;
  }
  .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%;
  }
  .min-h-25-l {
    min-height: 25%;
  }
  .min-h-50-l {
    min-height: 50%;
  }
  .min-h-75-l {
    min-height: 100%;
  }
  .min-h-100-l {
    min-height: 100%;
  }
  .max-h-25-l {
    max-height: 25%;
  }
  .max-h-50-l {
    max-height: 50%;
  }
  .max-h-75-l {
    max-height: 75%;
  }
  .max-h-100-l {
    max-height: 100%;
  }
  .vh-10-l {
    height: 10vh;
  }
  .vh-20-l {
    height: 20vh;
  }
  .vh-25-l {
    height: 25vh;
  }
  .vh-30-l {
    height: 30vh;
  }
  .vh-40-l {
    height: 40vh;
  }
  .vh-50-l {
    height: 50vh;
  }
  .vh-60-l {
    height: 60vh;
  }
  .vh-70-l {
    height: 70vh;
  }
  .vh-75-l {
    height: 75vh;
  }
  .vh-80-l {
    height: 80vh;
  }
  .vh-90-l {
    height: 90vh;
  }
  .vh-100-l {
    height: 100vh;
  }
  .min-vh-25-l {
    min-height: 25vh;
  }
  .min-vh-50-l {
    min-height: 50vh;
  }
  .min-vh-75-l {
    min-height: 75vh;
  }
  .min-vh-100-l {
    min-height: 100vh;
  }
  .max-vh-25-l {
    max-height: 25vh;
  }
  .max-vh-50-l {
    max-height: 50vh;
  }
  .max-vh-75-l {
    max-height: 75vh;
  }
  .max-vh-100-l {
    max-height: 100vh;
  }
  .h-auto-l {
    height: auto;
  }
  .h-inherit-l {
    height: inherit;
  }
}