Blaze UI is a framework-free, open-source UI toolkit that provides a strong foundation for quickly building websites with a scalable and stable foundation. It is responsive because all of the components were built to operate on any screen size.
We’re utilizing the Blaze UI framework to create a dashboard that will display all of our data on our website. It has a responsive design and is simple to create using the Blaze UI frameworks’ classes.
Blaze UI Example Dashboard Classes:
- c-card: This class of Blaze UI comes under the cards category of the libraries which is used to create cards on our web page.
- o-grid: This class of Blaze UI comes under the grid category of the libraries which is used to create grids to set the element of the page in the right order and responsive.
- u-gradient-text: This class is used to create a horizontal color gradient in the text.
- o-grid__cell: It’s another category of the grid that is used to fix the width of a grid in a row.
- u-xlarge: These classes are heading classes which makes the text bold and larger in the font.
- c-table: This class of Blaze UI comes under the Table category of the libraries which is used to create tables on our web page.
Syntax:
<div class="c-card">
<div class="o-grid ...">
<div class="o-grid__cell ...">
....
</div>
</div>
</div>
<div class="o-grid ...">
<div class="o-grid__cell ...">
<div class="c-card ...">
....
</div>
</div>
<div class="o-grid__cell ...">
<div class="c-card ...">
...
</div>
<div class="c-card ...">
....
</div>
</div>
</div>Example 1: The following code demonstrates the Blaze UI Example Dashboard :
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>DashBoard</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="c-card">
<div class="o-grid o-grid--no-gutter
o-grid--small-full c-card__body">
<div class="o-grid__cell o-grid__cell--width
u-centered">
<div class="u-gradient-text
u-gradient-text--success u-large">
GeeksForGeeks
</div>
<div class="c-card__item c-card__item--success">
DashBoard
</div>
</div>
</div>
</div>
<div class="o-grid o-grid--wrap o-grid--small-full
u-letter-box-medium">
<div class="o-grid__cell o-grid__cell--width-50">
<div class="c-card c-card--accordion">
<button role="heading" aria-expanded="true"
class="c-card__control">
Most Popular Posts
</button>
<section class="c-card__item c-card__item--pane">
<br>
<div class="o-grid o-grid--not-gutter
o-grid--center">
<a hre class="o-grid__cell">
<span
class="u-xlarge">
</span>
</a>
<div class="o-grid__cell u-right
u-gradient-text u-gradient-text--warning">
1
</div>
</div>
<br>
<div class="o-grid o-grid--not-gutter o-grid--center">
<a hre class="o-grid__cell">
<span class="u-xlarge">
</span>
</a>
<div class="o-grid__cell u-right u-gradient-text
u-gradient-text--warning">
2
</div>
</div>
<br>
<div class="o-grid o-grid--not-gutter o-grid--center">
<a hre class="o-grid__cell">
<span class="u-xlarge">
</span>
</a>
<div class="o-grid__cell u-right u-gradient-text
u-gradient-text--warning">
3
</div>
</div>
<br>
</section>
</div>
</div>
<div class="o-grid__cell o-grid__cell--width-50">
<div class="c-card c-card--accordion">
<button role="heading" aria-expanded="true"
class="c-card__control">
Status of Posts
</button>
<section class="c-card__item c-card__item--pane">
<table class="c-table c-table--stripped">
<tbody class="c-table__body">
<tr class="c-table__row">
<td class="c-table__cell">
Data Structure
</td>
<td class="c-table__cell">
100+ posts
</td>
<td class="c-table__cell">
<span class="u-gradient-text
u-gradient-text--error">
100+ Contributor
</span>
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">
Algorithm
</td>
<td class="c-table__cell">
100+ posts
</td>
<td class="c-table__cell">
50+ Contributor
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">
Interview Experience
</td>
<td class="c-table__cell">
30+ posts
</td>
<td class="c-table__cell">
40+ contributor
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="c-card c-card--accordion">
<button role="heading" aria-expanded="true"
class="c-card__control">
Top Contests
</button>
<section class="c-card__item c-card__item--pane">
<div class="c-card u-small">
<div class="c-card__item c-card__item--success">
<h2 class="c-heading u-centered">
DSA Internship Hiring Challenge
For Freshers By GeeksforGeeks
</h2>
</div>
</div>
<div class="c-card u-small">
<div class="c-card__item c-card__item--success">
<h2 class="c-heading u-centered">
DSA Placement Hiring Challenge
For Freshers By GeeksforGeeks</h2>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
|
Output:
Dashboard Example
Example 2: The following code demonstrates the Blaze UI Example Dashboard with mobile frame
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>DashBoard</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="c-card">
<div class="o-grid o-grid--no-gutter
o-grid--small-full c-card__body">
<div class="o-grid__cell o-grid__cell--width
u-centered">
<div class="u-gradient-text
u-gradient-text--warning u-large">
GeeksForGeeks
</div>
<div class="c-card__item c-card__item--light">
DashBoard
</div>
</div>
</div>
</div>
<div class="o-grid o-grid--wrap o-grid--small-full
u-letter-box-medium">
<div class="o-grid__cell o-grid__cell--width-50">
<div class="c-card c-card--accordion">
<button role="heading" aria-expanded="true"
class="c-card__control">
Most Popular Questions
</button>
<section class="c-card__item c-card__item--pane">
<br>
<div class="o-grid o-grid--not-gutter
o-grid--center">
<a hre class="o-grid__cell">
<span class="u-xlarge">
bipartite-graph
</span>
</a>
<div class="o-grid__cell u-right u-gradient-text
u-gradient-text--warning">
1
</div>
</div>
<br>
<div class="o-grid o-grid--not-gutter
o-grid--center">
<a hre class="o-grid__cell">
<span class="u-xlarge">
check-for-bst
</span>
</a>
<div class="o-grid__cell u-right
u-gradient-text u-gradient-text--warning">
2
</div>
</div>
<br>
</section>
</div>
<br>
</div>
<div class="o-grid__cell o-grid__cell--width-50">
<div class="c-card c-card--accordion">
<button role="heading" aria-expanded="true"
class="c-card__control">
Data
</button>
<section class="c-card__item c-card__item--pane">
<table class="c-table c-table--stripped">
<tbody class="c-table__body">
<tr class="c-table__row">
<td class="c-table__cell">
Interviews
</td>
<td class="c-table__cell">
100+
</td>
<td class="c-table__cell">
<span class="u-gradient-text
u-gradient-text--error">
1000+ Contributor
</span>
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">
Submissions
</td>
<td class="c-table__cell">
10000+
</td>
<td class="c-table__cell">
50+ Contributor
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">
Correct Submissions
</td>
<td class="c-table__cell">
3000+
</td>
<td class="c-table__cell">
40+ Contributor
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">
Runtime Error
</td>
<td class="c-table__cell">
10000+
</td>
<td class="c-table__cell">
<span class="u-gradient-text
u-gradient-text--error">
50+ Contributor
</span>
</td>
</tr>
<tr class="c-table__row">
<td class="c-table__cell">
Compile time error
</td>
<td class="c-table__cell">
1000+
</td>
<td class="c-table__cell">
<span class="u-gradient-text
u-gradient-text--error">
100+ Contributor
</span>
</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
<div class="o-grid__cell o-grid__cell--width-100">
<div class="c-card c-card--accordion">
<button role="heading" aria-expanded="true"
class="c-card__control">
Top Contests
</button>
<section class="c-card__item c-card__item--pane">
<div class="c-card u-small">
<div class="c-card__item
c-card__item--warning">
<h2 class="c-heading u-centered">
DSA Contest Lists
</h2>
</div>
</div>
<div class="c-card u-small">
<div class="c-card__item
c-card__item--warning">
<h2 class="c-heading u-centered">
Algorithm Contest Lists
</h2>
</div>
</div>
<div class="c-card u-small">
<div class="c-card__item
c-card__item--warning">
<h2 class="c-heading u-centered">
Top Hackethons
</h2>
</div>
</div>
<div class="c-card u-small">
<div class="c-card__item
c-card__item--warning">
<h2 class="c-heading u-centered">
Webinars
</h2>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/examples/dashboard/