Skip to content
Related Articles

Related Articles

Blaze UI Visibility

View Discussion
Improve Article
Save Article
  • Last Updated : 26 Apr, 2022
View Discussion
Improve Article
Save Article

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.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
    <title>Blaze UI Visibility</title>
</head>
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Blaze UI Visibility</h3>
    <div class="u-display-inline-block u-large" 
        style="background: grey; height: 3rem; 
            padding: 0.7rem; margin: 2rem">
        <span style="background: green; width: 3rem; 
            color: white">Geeks</span>
        <span class="" style="background: green; 
            width: 3rem; color: white">for</span>
        <span class="" style="background: green; 
            width: 3rem; color: white">Geeks</span>
    </div>
    <div class="u-display-inline-block u-large" 
        style="background: grey; height: 3rem; 
            padding: 0.7rem; margin: 2rem">
        <span style="background: green; width: 3rem; 
            color: white">Geeks</span>
        <span style="background: green; width: 3rem; 
            color: white">for</span>
        <span style="background: green; width: 3rem; 
            color: white">Geeks</span>
    </div>
    <div class="u-display-flex u-large" 
        style="background: grey; height: 3rem; 
            padding: 0.7rem; margin: 2rem">
        <span style="background: green; width: 3rem; 
            color: white">Geeks</span>
        <span style="background: green; width: 3rem; 
            color: white">for</span>
        <span style="background: green; width: 3rem; 
            color: white">Geeks</span>
    </div>
    <div class="u-display-flex u-large" 
        style="background: grey; height: 3rem; 
            padding: 0.7rem; margin: 2rem">
        <span style="background: green; width: 3rem; 
            color: white">Geeks</span>
        <span style="background: green; width: 3rem; 
            color: white">for</span>
        <span style="background: green; width: 3rem; 
            color: white">Geeks</span>
    </div>
</body>
</html>


Output:

 

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

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
    <title>Blaze UI Visibility</title>
</head>
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Blaze UI Visibility</h3>
    <p class="u-display-none u-display-block@medium u-large" 
        style="color: blue">
        Hello! I'm Visible on screens 
        bigger than medium size.
    </p>
  
    <p class="u-display-none u-display-block@large u-large" 
        style="color: olive">
        Hello! I'm Visible on large screen.
    </p>
  
</body>
</html>


Output:
 

 

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!