Blaze UI Introduction
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.
<link rel=”stylesheet” href=”https://unpkg.com/@email@example.com/dist/blaze/blaze.css”>
<script type=”module” src=”https://unpkg.com/@firstname.lastname@example.org/dist/blaze-atoms/blaze-atoms.esm.js”></script>
<script nomodule=”” src=”https://unpkg.com/@email@example.com/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:
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.
Example 2: This example describes the implementation of Blaze UI by specifying the active button with a rounded input group.