Open In App

Blaze UI Sizes

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

In this article, we will be seeing Blaze UI Sizes. Blaze UI provides six utility classes to control the size of an element which are listed below.

Blaze UI Sizes Classes:

  • u-xsmall: This class is used to make the size of the element extra-small.
  • u-small: This class is used to make the size of the element small.
  • u-medium: This class is used to make the size of the element medium.
  • u-large: This class is used to make the size of the element large.
  • u-xlarge: This class is used to make the size of the element extra-large.
  • u-super: This class is used to make the size of the element super, which is bigger than extra-large.

Syntax:

<div class="u-medium"> ... </div>

Example 1: This example illustrates the use of the above six size utility classes provided by Blaze UI on the button element.

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">
    <title> Blaze UI - Sizes </title>
    <link rel="stylesheet" href=
  
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }
        .wrapper{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        /* Bottom margin to separate the buttons */
        .wrapper>button{
            margin-bottom: 10px;
        }
    </style>
</head>
  
<body>
    <h2 style="color: green;"> GeeksforGeeks </h2>
    <h3> Blaze UI - Sizes </h3>
  
    <div class="u-window-box-large wrapper">
        <button type="button" class="c-button u-xsmall">
            Extra Small Button
        </button>
        <button type="button" class="c-button u-small">
            Small Button
        </button>
        <button type="button" class="c-button u-medium">
            Medium Button
        </button>
        <button type="button" class="c-button u-large">
            Large Button
        </button>
        <button type="button" class="c-button u-xlarge">
            Extra Large Button
        </button>
        <button type="button" class="c-button u-super">
            Super Sized Button
        </button>
    </div>
</body>
  
</html>


Output:

Blaze UI Sizes

Note: The size utility classes have no effect on the image element. 

Example 2: This example shows the use of size utility classes with the images.

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">
    <title> Blaze UI - Sizes </title>
    <link rel="stylesheet" href=
  
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }
        .wrapper{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        /* Bottom margin to separate the images */
        .wrapper>img{
            margin-bottom: 20px;
        }
    </style>
</head>
  
<body>
    <h2 style="color: green;"> GeeksforGeeks </h2>
    <h3> Blaze UI - Sizes </h3>
      
    <div class="u-window-box-large wrapper">
        <img class="u-small" src=
             alt="gfg_logo"
        />
  
        <img class="u-large" src=
             alt="gfg_logo"
        />
    </div>
</body>
  
</html>


Output:

Blaze UI Sizes

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



Last Updated : 05 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads