Sircus

height

<div class="t-height1of12">...</div>
<div class="t-height2of12">...</div>
<div class="t-height3of12">...</div>
<div class="t-height4of12">...</div>
<div class="t-height5of12">...</div>
<div class="t-height6of12">...</div>
<div class="t-heightHalf">...</div>
<div class="t-height7of12">...</div>
<div class="t-height8of12">...</div>
<div class="t-height9of12">...</div>
<div class="t-height10of12">...</div>
<div class="t-height11of12">...</div>
<div class="t-heightFull">...</div>

Install

npm install sircus-tools-height sircus-variables

CSS import

@import "sircus-tools-height";
@import "sircus-tools-height/responsive";
@import "sircus-variables";

CSS

/*
 * sircus-tools-height
 ================================================== */
.t-height1of12  { height: calc((1 / 12) * 100)vh !important; }
.t-height2of12  { height: calc((2 / 12) * 100)vh !important; }
.t-height3of12  { height: calc((3 / 12) * 100)vh !important; }
.t-height4of12  { height: calc((4 / 12) * 100)vh !important; }
.t-height5of12  { height: calc((5 / 12) * 100)vh !important; }
.t-height6of12,
.t-heightHalf   { height: calc((6 / 12) * 100)vh !important; }
.t-height7of12  { height: calc((7 / 12) * 100)vh !important; }
.t-height8of12  { height: calc((8 / 12) * 100)vh !important; }
.t-height9of12  { height: calc((9 / 12) * 100)vh !important; }
.t-height10of12 { height: calc((10 / 12) * 100)vh !important; }
.t-height11of12 { height: calc((11 / 12) * 100)vh !important; }
.t-height12of12,
.t-heightFull   { height: calc((12 / 12) * 100)vh !important; }

Responsive CSS

@media (--viewport-sm) {
  .t-sm-height1of12  { height: calc((1 / 12) * 100)vh !important; }
  .t-sm-height2of12  { height: calc((2 / 12) * 100)vh !important; }
  .t-sm-height3of12  { height: calc((3 / 12) * 100)vh !important; }
  .t-sm-height4of12  { height: calc((4 / 12) * 100)vh !important; }
  .t-sm-height5of12  { height: calc((5 / 12) * 100)vh !important; }
  .t-sm-height6of12,
  .t-sm-heightHalf   { height: calc((6 / 12) * 100)vh !important; }
  .t-sm-height7of12  { height: calc((7 / 12) * 100)vh !important; }
  .t-sm-height8of12  { height: calc((8 / 12) * 100)vh !important; }
  .t-sm-height9of12  { height: calc((9 / 12) * 100)vh !important; }
  .t-sm-height10of12 { height: calc((10 / 12) * 100)vh !important; }
  .t-sm-height11of12 { height: calc((11 / 12) * 100)vh !important; }
  .t-sm-height12of12,
  .t-sm-heightFull   { height: calc((12 / 12) * 100)vh !important; }
}

@media (--viewport-md) {
  .t-md-height1of12  { height: calc((1 / 12) * 100)vh !important; }
  .t-md-height2of12  { height: calc((2 / 12) * 100)vh !important; }
  .t-md-height3of12  { height: calc((3 / 12) * 100)vh !important; }
  .t-md-height4of12  { height: calc((4 / 12) * 100)vh !important; }
  .t-md-height5of12  { height: calc((5 / 12) * 100)vh !important; }
  .t-md-height6of12,
  .t-md-heightHalf   { height: calc((6 / 12) * 100)vh !important; }
  .t-md-height7of12  { height: calc((7 / 12) * 100)vh !important; }
  .t-md-height8of12  { height: calc((8 / 12) * 100)vh !important; }
  .t-md-height9of12  { height: calc((9 / 12) * 100)vh !important; }
  .t-md-height10of12 { height: calc((10 / 12) * 100)vh !important; }
  .t-md-height11of12 { height: calc((11 / 12) * 100)vh !important; }
  .t-md-height12of12,
  .t-md-heightFull   { height: calc((12 / 12) * 100)vh !important; }
}

@media (--viewport-lg) {
  .t-lg-height1of12  { height: calc((1 / 12) * 100)vh !important; }
  .t-lg-height2of12  { height: calc((2 / 12) * 100)vh !important; }
  .t-lg-height3of12  { height: calc((3 / 12) * 100)vh !important; }
  .t-lg-height4of12  { height: calc((4 / 12) * 100)vh !important; }
  .t-lg-height5of12  { height: calc((5 / 12) * 100)vh !important; }
  .t-lg-height6of12,
  .t-lg-heightHalf   { height: calc((6 / 12) * 100)vh !important; }
  .t-lg-height7of12  { height: calc((7 / 12) * 100)vh !important; }
  .t-lg-height8of12  { height: calc((8 / 12) * 100)vh !important; }
  .t-lg-height9of12  { height: calc((9 / 12) * 100)vh !important; }
  .t-lg-height10of12 { height: calc((10 / 12) * 100)vh !important; }
  .t-lg-height11of12 { height: calc((11 / 12) * 100)vh !important; }
  .t-lg-height12of12,
  .t-lg-heightFull   { height: calc((12 / 12) * 100)vh !important; }
}