Blaze UI Visibility

Blaze UI is a responsive front-end framework and a free open-source UI toolkit utilized to make sites easily. It provides us with an outstanding structure that helps us to form a strong and maintainable foundation for websites. All the components are developed keeping mobile responsiveness a priority in order that they work on any screen size. It also gives us the liberty to integrate the other framework if we’d wish to. With easy-to-use variables and mixins, it offers easy configuration of custom builds. It offers us many components like accordions, autocomplete, avatars, breadcrumbs, etc which enables us to style and build sites comfortably.

Blaze UI Visibility helps us to toggle the visibility and appearance of an element. The main goal of using these classes is to let us toggle the visibility and appearance of the elements at specific breakpoints. One of the best uses of this is to make our web page responsive. 

Display Visibility Classes:

• u-display-none: Is used to make the element disappear.
• u-display-initial: It is used to revert the display characteristics of an element to the default.
• u-display-inline: Displays an element as an inline element, no height or width property has any effect.
• u-display-inline-block: It displays an element as an inline-level block container. The element itself is presented as an inline element, but height and width values can be applied.
• u-display-block: It displays an element as a block element. It starts from a new line and takes up all the width available.
• u-display-table: Displays an element as a table element
• u-display-table-cell: Represents the element as a cell of a table or like an <td> element.
• u-display-flex: Displays the element as a block-level flex container.
• u-display-inline-flex: Displays the element as an inline-level flex container.

Visibility Classes:

• u-visible: Keeps the element visible. It is the default value.
• u-invisible: Hides the element. But the space is still occupied.
• u-visually-hidden: It is hidden on normal screens but visible on assistive technologies like screen-readers.

Syntax:

<div class="class_name">
    ... 
</div>

Responsive utility: These display classes can be used to apply these display properties at certain screen sizes. For example, u-display-none@large will hide the element when the viewport has a large or more width.

Example 1: The code below shows the usage of u-display-inline-block.

Output:

 

Example 2: The code below shows the usage of u-display-none@small to make web pages responsive.

Output:
 

 

Reference: https://www.blazeui.com/utils/visibility