Dimensions

How It Works

• HPU height and width dimensions cover a broad range of values. For percentages (%) and viewport (vh or vw) units, the range goes from 1 to 100. For pixel (px) and rem units, it spans from 1 to 1000. This wide spectrum allows for creating flexible and precise layouts. These values also support the development of low-level utility classes, giving you fine-grained control over the height and width of elements on a webpage.
• To apply dimensions on any element, the format will be .hpu-{type}{dimension}{unit}
  • Where the type is either h for height or w for width.
  • Where the dimension is the following range of dimension values:
    • For percentages and viewport units, 1 to 100
    • For pixels and rem units, 1 to 1000
  • Where the unit is one of the following units:
    • pc for percent (%)
    • px for pixels
    • rem for rem units
    • vp for viewport height or width
• The auto dimension is also available for both height and width values: .hpu-{type}-auto. The unit must not be defined, since the dimension is auto.

Width and Height

Below are the examples of different width and height dimension units.

<div class="hpu-bg-2nd hpu-border-1st hpu-h4rem hpu-w15rem">
    <p class="hpu-m-1">Width: 15rem</p>
</div>

<div class="hpu-bg-2nd hpu-border-1st hpu-h4rem hpu-w450px">
    <p class="hpu-m-1">Width: 450px</p>
</div>

<div class="hpu-bg-2nd hpu-border-1st hpu-h4rem hpu-w30vp">
    <p class="hpu-m-1">Width: 30vw</p>
</div>

<div class="hpu-bg-2nd hpu-border-1st hpu-h4rem hpu-w100pc">
    <p class="hpu-m-1">Width: 100%</p>
</div>

<div class="hpu-bg-2nd hpu-border-1st hpu-h4rem hpu-w-auto">
    <p class="hpu-m-1">Width: Auto</p>
</div>

<div class="hpu-row no-gap hpu-h35vp">
    <div class="col">
        <div class="hpu-bg-2nd hpu-border-1st hpu-d-inline-block hpu-h-auto hpu-w100pc">
            <p class="hpu-m-1">Height: Auto</p>
        </div>
    </div>

    <div class="col">
        <div class="hpu-bg-2nd hpu-border-1st hpu-d-inline-block hpu-h7rem hpu-w100pc">
            <p class="hpu-m-1">Height: 7rem</p>
        </div>
    </div>

    <div class="col">
        <div class="hpu-bg-2nd hpu-border-1st hpu-d-inline-block hpu-h175px hpu-w100pc">
            <p class="hpu-m-1">Height: 175px</p>
        </div>
    </div>

    <div class="col">
        <div class="hpu-bg-2nd hpu-border-1st hpu-d-inline-block hpu-h25vp hpu-w100pc">
            <p class="hpu-m-1">Height: 25vh</p>
        </div>
    </div>

    <div class="col">
        <div class="hpu-bg-2nd hpu-border-1st hpu-d-inline-block hpu-h100pc hpu-w100pc">
            <p class="hpu-m-1">Height: 100%</p>
        </div>
    </div>
</div>

Max Width and Max Height

Max width and height also applies to all the units of dimensions mentioned above: .hpu-max-{w | h}{size}{unit}. The examples below use pc (%) unit.

<div class="hpu-bg-2nd hpu-h10rem hpu-w100pc">
    <p class="hpu-p-1">Wrapper Width: 100%</p>

    <div class="hpu-bg-1st hpu-h4rem hpu-max-w25pc">
        <p class="hpu-p-1 hpu-text-white">Max Width: 25%</p>
    </div>
</div>

<div class="hpu-bg-2nd hpu-h20rem hpu-w100pc hpu-d-flex">
    <p class="hpu-p-1">Wrapper Height: 20rem</p>

    <div class="hpu-bg-1st hpu-max-h75pc hpu-w10rem">
        <p class="hpu-p-1 hpu-text-white">Max Height: 75%</p>
    </div>
</div>

Responsive Dimensions

Responsive variations are also available for both width and height dimensions, auto dimensions, and max width and height:

• .hpu-{w | h}-auto-{screen}
• .hpu-{w | h}{dimension}{unit}-{screen}
• .hpu-max-{w | h}{dimension}{unit}-{screen}
• Where screen is one of:
  • screen sizes: sm, md, lg, xl, xxl

CURRENT SCREEN SIZE: xs sm md lg xl xxl

<div class="hpu-bg-2nd hpu-py-2 hpu-w100pc">
    <p class="hpu-mb-1 hpu-text-center">Wrapper Width: 100%</p>

    <div class="hpu-bg-1st hpu-mx-auto hpu-p-1 hpu-w250px hpu-w25pc-sm hpu-w35pc-md hpu-w50pc-lg hpu-w75pc-xl hpu-w85pc-xxl">
        ...
    </div>
</div>

CURRENT SCREEN SIZE: xs sm md lg xl xxl

<div class="hpu-bg-2nd hpu-h350px hpu-d-flex">
    <p class="hpu-p-1">Wrapper Height: 350px</p>

    <div class="hpu-bg-1st hpu-p-1 hpu-h50px hpu-h25pc-sm hpu-h35pc-md hpu-h50pc-lg hpu-h75pc-xl hpu-h85pc-xxl">
        ...
    </div>
</div>