Blaze UI Utilities Complete Reference

Last Updated : 14 Sep, 2022

Blaze UI is a free & open-source (MIT License) Framework with a lightweight UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation

Blaze UI Utilities List:

Example1: In the below code, we will make use of the center alignment classes to place the element in the center.

HTML

<!DOCTYPE html>
<html>
<head>
    <script type="module" 
            src=
"https://unpkg.com/@blaze/[email protected]/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule="" 
            src=
"https://unpkg.com/@blaze/[email protected]/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <link rel="stylesheet" 
          href=
"https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css">
</head>
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <div class="u-center-block fixed-height-demo">
        <div class="u-center-block__content">
            Blaze UI Center Alignment
        </div>
    </div>
</body>
</html>

Output:

Example2: In the below code, we will make use of the vertical alignment classes to place the element in the Vertical.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
<title>Blaze UI</title>
<style>
    .demo{
    height: 500px;
    width: 500px;
    background-color: green;
    color: white;
    }
</style>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css">
</head>

<body>
<center>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <strong>Blaze UI Vertical Alignment</strong>
    <br>
    <div class="demo u-center-block">
    <div class="u-center-block__content
        u-center-block__content--vertical">
        GeeksforGeeks
    </div>
    </div>
</center>
</body>

</html>