Blaze UI Global

Last Updated : 01 Sep, 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. In this article, we will see Blaze UI Global.

All the style of Blaze UI is built on top of the generic.global.css file and it is a file that handles box-sizing and body margin. The rest of the style takes the help of Normalize.css which is a modern, HTML5-ready alternative to CSS resets.

Rendering all the elements in a consistent manner, along with following all the in-line modern standards by the browsers, can be done with the help of Normalize.css, that precisely focused on the styles that need to be normalized.

Before using the Normalize.css there are two methods to use that predefined CSS are:

By using the CDN link: We can use “https://necolas.github.io/normalize.css/latest/normalize.css” to use normalize CSS.
By downloading the normalize.css file: We can download the normalize.css file from this link and import that into your HTML file.

Example 1: This example describes the Blaze UI Global by making use of the normalize.css style.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <link rel="stylesheet" href=
"https://necolas.github.io/normalize.css/latest/normalize.css" />
</head>
 
<body style="text-align: center">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <div>
        <pre>A computer science portal for geeks</pre>
    </div>
</body>
</html>

Explanation: When you insert the normalize.css file into your webpage then it makes the font of the <pre> tag a little bigger than usual.

Output:

Example 2: This is another example that describes the Blaze UI Global making use of the normalize.css style.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <link rel="stylesheet" href=
"https://necolas.github.io/normalize.css/latest/normalize.css" />
</head>
 
<body style="text-align: center">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <button>GFG</button>
</body>
</html>