Blaze UI

  • Last Updated : 19 Apr, 2023

Blaze UI is a free & open-source (MIT Licence) Framework with a lightweight 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.

Blaze UI

Why Blaze UI?

  • Accessibility: It allows to educate its importance & make enables the website from accessible to everyone via Accessible selectors.
  • Responsive: It allows us to build a mobile-first design that can be accessible to all the screen size-device.
  • Custom builds: It implements the concept of variables and mixins, that facilitate us to customize our components.
  • Opt-in: Blaze UI allows us to control any of our designs that we want it to & is not controlled automatically by the Blaze.

Installation of Blaze UI: There are 2 different ways the Blaze UI can be utilized in the project:

  • By using the CDN Links
  • By installing the Node Modules

We will explore both the option for using the Blaze UI & understand it through the implementation.

By implementing through CDN Link: The Blaze UI toolkit can be used via CDN links i.e. for CSS & JavaScript, which is described below:

Step 1: For CSS & JavaScript Components: We need to add the following link inside the <head> tag:

CSS Component:

<link rel=”stylesheet” href=”https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css”>

JavaScript Component:

<script type=”module” src=”https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js”></script>
<script nomodule=”” src=”https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js”></script>

Step 2: Add the specific component by implementing the particular class:

<button class="c-button" type="button">Button</button>

By installing the Node Modules: We can use the Blaze UI by installing the Node Modules. The steps for installation are given below:

Step 1: Run the below command to install the Blaze UI:

npm install @blaze/atoms --save

 

Step 2: Add the below <script> tag inside the <head> section in the index.html file:

<script src=”node_modules/@blaze/atoms/dist/blaze-atoms.js”></script>

Step 3: Add the particular class to implement the specific component:

<p class="u-centered" style="color:violet">Content</p>

Step 4: Run the following command to execute the application:

npm run test

Example: This example describes the implementation of Blaze UI by specifying the required CDN links.

HTML

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

<head>
    <title>Blaze UI</title>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>

<body>
    <center>
        <h1 style="color:green" 
            class="c-heading u-super">
            GeeksforGeeks
        </h1>
        <strong class="c-heading u-xlarge">
            Blaze UI Example
        </strong>
    </center>

    <div role="tree" class="c-tree">
        <button role="treeitem" aria-expanded="false" 
            class="c-tree__item">
            HTML
        </button>
        <button role="treeitem" aria-expanded="true" 
            class="c-tree__item">
            CSS
        </button>
        <div role="tree" class="c-tree">
            <span role="treeitem" class="c-tree__item">
                Bootstrap
            </span>
            <span role="treeitem" class="c-tree__item">
                Foundation
            </span>
            <span role="treeitem" class="c-tree__item">
                Semantic UI
            </span>
            <span role="treeitem" class="c-tree__item">
                Pure CSS
            </span>
        </div>
        <button role="treeitem" aria-expanded="true" 
            class="c-tree__item">
            JavaScript
        </button>
        <span role="treeitem" class="c-tree__item">
            FabricJS
        </span>
        <span role="treeitem" class="c-tree__item">
            NodeJS
        </span>
        <span role="treeitem" class="c-tree__item">
            BackboneJS
        </span>
        <span role="treeitem" class="c-tree__item">
            ExpressJS
        </span>
    </div>
</body>

</html>

Output:

 

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above

My Personal Notes arrow_drop_up