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/[email protected]/dist/blaze/blaze.css">

JavaScript Component:

<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>

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/[email protected]/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