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.
Blaze UI
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