Skip to content
Related Articles

Related Articles

Blaze UI Visibility Responsiveness

View Discussion
Improve Article
Save Article
  • Last Updated : 24 May, 2022

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit that provides great tools for building customized and scalable applications. It provides us with a structure that helps us to form a strong and maintainable foundation for websites. It can work with any framework that exists, and all the components are developed keeping mobile responsiveness a priority in order that they work on any screen size. It can adapt to any ecosystem and all designs or CSS are mobile-first hence you don’t have to worry about the screen resolution.

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 like screen resolution. One of the best uses of this is to make our web page responsive. For Example, the user interface of the web page will remain unchanged when we change the size of the screen.  

Classes Used:

  • u-display-block@small- u-large: This class is used to make the webpage responsive.

Syntax:

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

Example: The example shows the use of the class mentioned above.

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 Responsiveness</title>
</head>
<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <h3>Blaze UI Responsiveness</h3>
        <p class="u-display-none u-display-block@small" 
            style="color: rgb(207, 34, 141)">
            Hello! I'm Visible on any screen.
        </p>
  
    </center>
</body>
</html>


Output: 

 

Explanation: When you look at the above example you will notice that after changing the size of the resolution the content remains unchanged. This behavior indicates that the webpage is responsive.

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!