Simple Scss Utilities

Height

Heights get the same utility classes as widths, and although not quite as useful, at least they're consistant.

Height Rem Values

These are useful enough when something needs an explicit height, usually there's a value in here that's pretty close. If you need another value, I'd just add it to the _variables.scss mapping so it can be a utility class. See more info about this file in the (customze)[/customize/] section. Like widths, all height classes also come with a min, or max prefix as well respond to the responsive breakpoints:

Class	CSS rule
.h-1	height: 1rem;
.h-2	height: 2rem;
.h-3	height: 3rem;
.h-4	height: 4rem;
.h-5	height: 5rem;
.h-6	height: 6rem;
.h-7	height: 7rem;
.h-8	height: 8rem;
.h-10	height: 10rem;
.h-12	height: 12rem;
.h-16	height: 16rem;
.h-20	height: 20rem;
.h-24	height: 24rem;
.h-30	height: 30rem;
.h-36	height: 36rem;
.h-42	height: 42rem;
.h-48	height: 48rem;
.h-56	height: 56rem;
.h-64	height: 64rem;
.h-72	height: 72rem;
.h-80	height: 80rem;

Examples

I like these the most because they don't depend on the explicit height of the container. Usage is pretty straightforward:

.h-4

.h-24

HTML

<div class="display-flex items-end justify-around text-white h-24">
  <div class="w-4 h-4 pb-sm center-bottom sizing-border  bg-blue">
    <p>.h-4</p>
  </div>

  <div class="w-4 h-8 pb-sm  center-bottom sizing-border  bg-blue">
    <p>.h-4</p>
  </div>

  <div class="w-4 h-12 pb-sm  center-bottom sizing-border  bg-blue">
    <p>.h-4</p>
  </div>

  <div class="w-4 h-16 pb-sm  center-bottom sizing-border  bg-blue">
    <p>.h-4</p>
  </div>

  <div class="w-4 h-20 pb-sm  center-bottom sizing-border  bg-blue">
    <p>.h-4</p>
  </div>

  <div class="w-4 h-24 pb-sm  center-bottom sizing-border  bg-blue">
    <p>.h-24</p>
  </div>
</div>

Min, max, and Responsive examples

Every width value can be prefixed with min-, max-, and responsive prefixes:

.h-16

.max-h-4

.h-4

.min-h-8

.h-4

.tab:h-8

.scr:h-12

.lg:h-16

.max-scr:h-12

.h-20

In the first example, the div has a class of .h-16 but the .max-h-4 class limits it to the max-height. The second div has .h-4 but the .min-h-8 class liminits the mininmum height to 8 rem. The third div changes heights according to the tab, scr, and lg default breakpoints, and the fourth div has a height of 12 rem up until the max: breakpoint, where it then jumps to 20 rem.

HTML

<div class="display-flex items-end justify-around text-white h-20 mb-xl">
  <div class="w-6 h-16 max-h-4 pb-sm flex-col center-end sizing-border bg-blue">
    <p>.h-16</p>
    <p>.max-h-4</p>
  </div>

  <div class="w-6 h-4 min-h-8 pb-sm flex-col center-end sizing-border bg-blue">
    <p>.h-4</p>
    <p>.min-h-8</p>
  </div>

  <div
    class="w-6 h-4 tab:h-8 scr:h-12 lg:h-16 pb-sm flex-col center-end sizing-border bg-blue"
  >
    <p>.h-4</p>
    <p>.tab:h-8</p>
    <p>.scr:h-12</p>
    <p>.lg:h-16</p>
  </div>

  <div
    class="w-8 h-20 max-scr:h-12 pb-sm flex-col center-end sizing-border bg-blue"
  >
    <p>.max-scr:h-12</p>
    <p>.h-20</p>
  </div>
</div>

Height Percentage Values

With height, the parent elements have to have a well-defined height for percents to work. So, if your percents aren't working, make sure the browser can give the parent element some type of well-defined height!

.h-1/5

.h-1/4

.h-1/3

.h-1/2

.h-7/10

.h-19/20

HTML

<div class="display-flex items-baseline justify-around text-white h-24">
  <div
    class="w-4 h-24 flex-col center-end 
      bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed"
  >
    <div class="w-4 h-1/5 pb-sm pb-s flex-col center-end sizing-border bg-blue">
      <p class="text-white">.h-1/5</p>
    </div>
  </div>

  <div
    class="w-4 h-24 flex-col center-end 
      bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed"
  >
    <div class="w-4 h-1/4 pb-sm pb-s flex-col center-end sizing-border bg-blue">
      <p class="text-white">.h-1/4</p>
    </div>
  </div>

  <div
    class="w-4 h-24 flex-col center-end 
      bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed"
  >
    <div class="w-4 h-1/3 pb-sm pb-s flex-col center-end sizing-border bg-blue">
      <p class="text-white">.h-1/3</p>
    </div>
  </div>

  <div
    class="w-4 h-24 flex-col center-end 
      bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed"
  >
    <div class="w-4 h-1/2 pb-sm pb-s flex-col center-end sizing-border bg-blue">
      <p class="text-white">.h-1/2</p>
    </div>
  </div>

  <div
    class="w-4 h-24 flex-col center-end 
      bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed"
  >
    <div
      class="w-4 h-7/10 pb-sm pb-s flex-col center-end sizing-border bg-blue"
    >
      <p class="text-white">.h-7/10</p>
    </div>
  </div>

  <div
    class="w-4 h-24 flex-col center-end 
      bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed"
  >
    <div
      class="w-4 h-19/20 pb-sm pb-s flex-col center-end sizing-border bg-blue"
    >
      <p class="text-white">.h-19/20</p>
    </div>
  </div>
</div>

Min, max, and Responsive examples

.h-1/2

.max-h-1/5

.h-1/5

.min-h-1/2

.h-1/4

.tab:h-1/3

.scr:h-2/3

.lg:h-4/5

.h-2/3

.max-scr:h-1/3

Like the Rem height example, here the first div's h-1/2 class is overridden by max-h-1/5, the 2nd div's h-1/2 class is overridden by .min-h-1/2 class, as you can see in the html below. The 3rd dive has responslive classes for all the breakpoints, and you can resize the window if you're in a browser. The 4th div has a height of 1/3 up to the max-scr 1024px breakpoint, where it then jumps to 2/3.

HTML

<div class="display-flex items-end justify-around h-20 mb-xl">
  <div
    class="w-6 h-16 flex-col center-end 
      bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed"
  >
    <div
      class="w-6 h-1/2 max-h-1/5 text-white 
        pb-sm flex-col center-end sizing-border bg-blue"
    >
      <p>.h-1/2</p>
      <p>.max-h-1/5</p>
    </div>
  </div>

  <div
    class="w-6 h-16 flex-col center-end 
      bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed"
  >
    <div
      class="w-6 h-1/5 min-h-1/2 text-white 
        pb-sm flex-col center-end sizing-border bg-blue"
    >
      <p>.h-1/5</p>
      <p>.min-h-1/2</p>
    </div>
  </div>

  <div
    class="w-6 h-16 flex-col center-end
      bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed"
  >
    <div
      class="w-6 h-1/4 tab:h-1/3 scr:h-2/3 lg:h-4/5 
        text-white pb-sm flex-col center-end sizing-border bg-blue"
    >
      <p>.h-1/4</p>
      <p>.tab:h-1/3</p>
      <p>.scr:h-2/3</p>
      <p>.lg:h-4/5</p>
    </div>
  </div>

  <div
    class="w-6 h-16 flex-col center-end
      bg-background-dkr border-lg border-dark-mode-only-ltr border-dashed"
  >
    <div
      class="w-6 h-2/3 max-scr:h-1/3 text-white 
        pb-sm flex-col center-end sizing-border bg-blue"
    >
      <p>.h-2/3</p>
      <p class="w-5">.max-scr:h-1/3</p>
    </div>
  </div>
</div>

Screen Based Heights

Like widths, there are utiltiy classes for screen based heights. Like the other values, you can also use max, min, and responsive breakpoints.

Class	CSS rule
.h-1/4-screen	height: 25vh;
.h-1/3-screen	height: 33vh
.h-1/2-screen	height: 50vh;
.h-screen	height: 100vw;

Just a single example is probably ok. This single dive will be 1/4 the height of whatever your screen is:

.h-1/4-screen

After the lengthy examples above it feels good to do a short and quick example:

HTML

<div className="center">
  <div className="center-bottom w-1/4-screen h-1/4-screen bg-blue pb-sm">
    <p className="text-white">.h-1/4-screen</p>
  </div>
</div>

XS - XL Heights

And like widths, heights also have the same classes xs-xl that work for paddings and margins. They also work with all the min-, max- and responsive prefixes. I don't know how useful they are, but I threw 'em in anyway:

Class	CSS rule
.h-xxs	height: 0.125rem;
.h-xs	height: 0.25rem;
.h-sm	height: 0.5rem;
.h-md	height: 0.75rem;
.h-base	height: 1rem;
.h-lg	height: 1.25rem;
.h-xl	height: 1.5rem;
.h-2xl	height: 2rem;
.h-3xl	height: 3rem;
.h-4xl	height: 4rem;
.h-5xl	height: 5rem;

They're pretty straight forward to use. Here's a little div with a height of 3xl..of course these classses were made for margins and paddings, and when it comes to heights it doesn't look very extra large .. but hey, it is what it is.

.h-3xl

Here's the HTML:

HTML

<div className="center mb-lg">
  <div className="center-bottom w-4 h-3xl bg-blue pb-sm sizing-border">
    <p className="text-white">.h-3xl</p>
  </div>
</div>

That does it for heights examples. Happy Coding!