Blaze UI Installation

Last Updated : 28 Apr, 2022

In this article, we’ll see how to install Blaze UI and how to use it to style the web page. Blaze UI is a free, open-source UI toolkit to build a great website. It provides you with various features like responsiveness, custom components, etc.

Now to Install the Blaze UI and use it, we can simply do it by using CDN. Using a CDN is a very easiest way to use any CSS framework like Blaze. The steps for installing the Blaze UI are given below:

Method 1:

Step 1: Install CSS: The blaze.css file contains everything you need to style your HTML components. To use Blaze UI, add the following code inside the <head> section.

<link rel=”stylesheet” href=”https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css”>

Step 2: Use the Blaze UI styles in your HTML: To use the style, just use classes in the HTML component class names. This means we have to add classes to each part of our site where we want Blaze to apply. See the below examples.

Step 3: Installing JavaScript: Add the below scripts inside the <head> section. These files will help you when you are dealing with some javascript functionalities.

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

And that’s all, now you can simply start using the Blaze UI framework. Now, let’s see some examples.

Method 2:

Install Blaze UI using Node Modules: You can run the following command on the terminal to install blaze ui. Please first install Node.js before running this command.

npm install @blaze/atoms --save

After installing the Blaze UI locally, add the below code inside the head section of the code.

<script src=”node_modules/@blaze/atoms/dist/blaze-atoms.js”></script>

Example 1: Below example demonstrates the Button in Blaze UI.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
    <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> 
</head> 
  
<body> 
    <div class="o-container o-container--xlarge"> 
        <h1>GeeksforGeeks</h1> 
        <h2>Button in Blaze UI</h2> 
        <button type="button" class="c-button c-button--success"> 
            Sign Up 
        </button> 
    </div> 
</body> 
  
</html>

Output:

Example 2: Below example demonstrates the Alert in Blaze UI.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
    <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> 
</head> 
<body> 
    <div class="o-container o-container--xlarge"> 
        <h1>GeeksforGeeks</h1>   
  
        <h2>Alert in Blaze UI</h2> 
        <div role="alert" class="c-alert c-alert--error"> 
            <button class="c-button c-button--close">× 
            </button> 
            Error 
          </div> 
    </div> 
</body> 
</html>