Blaze UI Introduction
Last Updated :
06 May, 2022
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.
The Blaze UI facilitates the effortless designs by utilizing the different Components, Objects, and Utilities that help to make the overall website attractive & enhance the interactivity of the website.
There are 2 different ways the Blaze UI can be utilized in the project:
- By implementing through 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: Add the 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
The Blaze UI can also provide different customization options that can be used to change the variables and mixins and also build the toolkit with different design options by using the Components, Objects, and Utilities.
Example 1: This example describes the implementation of Blaze UI by specifying an unordered unstyled list with a large heading.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3> Blaze UI Example</h3>
<p class="c-heading u-large"> Unordered unstyled list</p>
<ul class="c-list c-list--unstyled">
<li class="c-list__item">Data Structure</li>
<li class="c-list__item">Algorithm</li>
<li class="c-list__item">Web Technologies</li>
</ul>
</body>
</html>
|
Output:
Example 2: This example describes the implementation of Blaze UI by specifying the active button with a rounded input group.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3> Blaze UI Example</h3>
<div class="u-window-box-xsmall">
<h4>
Active Buttons with Input Group Rounded
</h4>
<div class="c-input-group c-input-group--rounded-left">
<button class="c-button
c-button--success c-button--active">
GeeksforGeeks
</button>
<div class="o-field">
<input class="c-field"
name="mInput"
placeholder="Email_Id">
</div>
<button class="c-button c-button--brand">
Submit
</button>
</div>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...