HPUCSS Framework | Display Properties

Block

Styling attribute to define an element as a block-level element. These elements typically start on a new line and occupy the full width available to them, extending from the left edge of their containing element to the right edge: .hpu-d-block.

.hpu-d-block

HTML


<div class="hpu-d-block hpu-bg-2nd hpu-border-1st hpu-p-1"></div>
<div class="hpu-d-block hpu-bg-2nd hpu-border-1st hpu-p-1"></div>
<div class="hpu-d-block hpu-bg-2nd hpu-border-1st hpu-p-1"></div>

Responsive block property is also available:

.hpu-d-block

.hpu-d-block-sm

.hpu-d-block-md

.hpu-d-block-lg

.hpu-d-block-xl

.hpu-d-block-xxl

Inline

Styling attribute to define an element as a inline-level element. These elements typically spans only with the element width, creating a horizontal orientation layout: .hpu-d-inline.

.hpu-d-inline

HTML


<div class="hpu-d-inline hpu-bg-2nd hpu-border-1st hpu-p-2"></div>
<div class="hpu-d-inline hpu-bg-2nd hpu-border-1st hpu-p-2"></div>
<div class="hpu-d-inline hpu-bg-2nd hpu-border-1st hpu-p-2"></div>

Responsive inline property is also available:

.hpu-d-inline

.hpu-d-inline-sm

.hpu-d-inline-md

.hpu-d-inline-lg

.hpu-d-inline-xl

.hpu-d-inline-xxl

Inline Block

Flow horizontally like inline elements, allowing other elements to sit beside them on the same line, but they also retain block-level properties, such as the ability to have a width and height, margins, and padding: .hpu-d-inline-block.

.hpu-d-inline-block

.hpu-h10rem

.hpu-d-inline-block

.hpu-h10rem

.hpu-d-inline-block

.hpu-h10rem

HTML


<div class="hpu-d-inline-block hpu-h10rem hpu-bg-2nd hpu-border-1st hpu-p-2"></div>
<div class="hpu-d-inline-block hpu-h10rem hpu-bg-2nd hpu-border-1st hpu-p-2"></div>
<div class="hpu-d-inline-block hpu-h10rem hpu-bg-2nd hpu-border-1st hpu-p-2"></div>

Responsive inline-block property is also available:

.hpu-d-inline-block

.hpu-d-inline-block-sm

.hpu-d-inline-block-md

.hpu-d-inline-block-lg

.hpu-d-inline-block-xl

.hpu-d-inline-block-xxl

Flex

Enables a flex container, allowing its child elements to dynamically adjust their size and alignment within the container and create complex layouts with a high degree of flexibility and responsiveness: .hpu-d-flex. For more usage information, refer to Flexbox.

HTML


<div class="hpu-d-flex hpu-bg-gray">
    <div class="hpu-h100px hpu-w100px hpu-bg-2nd hpu-border-1st"></div>
    <div class="hpu-h100px hpu-w100px hpu-bg-2nd hpu-border-1st"></div>
    <div class="hpu-h100px hpu-w100px hpu-bg-2nd hpu-border-1st"></div>
</div>

Responsive flex property is also available:

.hpu-d-flex

.hpu-d-flex-sm

.hpu-d-flex-md

.hpu-d-flex-lg

.hpu-d-flex-xl

.hpu-d-flex-xxl

Inline Flex

Combines the inline-level and flexbox layout models. It combines the inline-level behavior of elements, allowing them to flow inline with surrounding content, with the powerful flexbox capabilities for organizing and aligning items within the container: .hpu-d-inline-flex. For more usage information, refer to Flexbox.

HTML


<div class="hpu-d-inline-flex hpu-bg-gray">
    <div class="hpu-h100px hpu-w100px hpu-bg-2nd hpu-border-1st"></div>
    <div class="hpu-h100px hpu-w100px hpu-bg-2nd hpu-border-1st"></div>
    <div class="hpu-h100px hpu-w100px hpu-bg-2nd hpu-border-1st"></div>
</div>

Responsive flex property is also available:

.hpu-d-inline-flex

.hpu-d-inline-flex-sm

.hpu-d-inline-flex-md

.hpu-d-inline-flex-lg

.hpu-d-inline-flex-xl

.hpu-d-inline-flex-xxl

Responsive Hidden Elements

For faster implementation of hiding and showing elements on a specific device. To hide elements simply use the .hpu-d-none class or one of the .hpu-d-none-{sm | md | lg |xl | xxl} classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .hpu-d-none-{sm | md | lg |xl | xxl} class with a .hpu-d-{display-element}-{screen size}. For example, .hpu-d-none .hpu-d-block-md .hpu-d-none-xl .hpu-d-none-xxl will hide the element for all screen sizes except on medium and large devices.

CURRENT SCREEN SIZE: xs sm md lg xl xxl

Class	Description	Result
.hpu-d-none	Hidden on all screens
.hpu-d-none .hpu-d-block-sm	Hidden on xs screens only
.hpu-d-none-sm .hpu-d-block-md	Hidden on sm screens only
.hpu-d-none-md .hpu-d-block-lg	Hidden on md screens only
.hpu-d-none-lg .hpu-d-block-xl	Hidden on lg screens only
.hpu-d-none-xl .hpu-d-block-xxl	Hidden on xl screens only
.hpu-d-none-xxl	Hidden on xxl screens only
.hpu-d-block (or .hpu-d-inline or .hpu-d-inline-block or .hpu-d-flex or .hpu-d-inline-flex)	Visible on all screens
.hpu-d-block .hpu-d-none-sm	Visible on xs screens only
.hpu-d-none .hpu-d-block-sm .hpu-d-none-md	Visible on sm screens only
.hpu-d-none .hpu-d-block-md .hpu-d-none-lg	Visible on md screens only
.hpu-d-none .hpu-d-block-lg .hpu-d-none-xl	Visible on lg screens only
.hpu-d-none .hpu-d-block-xl .hpu-d-none-xxl	Visible on xl screens only
.hpu-d-none .hpu-d-block-xxl	Visible on xxl screens only