Blaze UI

Last Updated : 16 Jun, 2024

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.

Why Blaze UI?

Accessibility: It allows us 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 devices.
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 Steps

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="n/https://www.geeksforgeeks.org/blaze-ui/ode_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:

Blaze UI Introduction

hardiksm73

Improve

Article Tags :

Blaze UI

Why Blaze UI?

Installation Steps

By implementing through CDN Link

By installing the Node Modules

Similar Reads

Blaze UI Objects

Blaze UI Components

Blaze UI Utilities

Thank You!

What kind of Experience do you want to share?