Blaze UI is a free open-source 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 an example basket. A basket is a collection of small information like a payment tab, cart, or wishlist.
Classes Used:
- o-container: This class is used to provide a container.
- o-container--medium: This class is used to create a medium-sized container.
- o-grid: This class is used to create a grids.
- o-grid__cell: This class is used to create the cells of the grid.
- o-grid__cell--width-65: This class is used to create the grid cell of width 65px.
- c-card: This class is used to create the card.
- u-high: This class is used to give minimum elevation to an element.
- c-card__header: This class is used to create the header of the card.
- u-xlarge: This class is used to make extra-large headings approx size 1.5em
- c-heading: This class is used to create the heading.
- c-heading__sub: This class is used to create the sub-heading.
- c-card__body: This class is used to create the body of the card.
- c-paragraph: This class is used to create the paragraph.
- o-fieldset: This class is used to create the fieldset on the card.
- o-grid--wrap: This class is used to define the grid.
- c-label: This class is used to create the label.
- o-form-element: This class is used to create the form element.
- c-field: This class is used to create the field.
- c-button: This class is used to create the button.
- c-button-block: This class is used to create the button block.
- c-button--success: This class is used to provide the color green to the button.
Example 1: In the below code, we will make use of the above classes to show the demonstration of baskets using Blaze UI.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@12.2.0/dist/blaze/blaze.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js">
</script>
<style>
body {
margin-bottom: 10px;
}
</style>
</head>
<body>
<center>
<div class="o-container o-container--medium">
<h2 style="color:green">
GeeksforGeeks
</h2>
</div>
<div style="margin-left:210px;" class="o-grid">
<div class="o-grid__cell o-grid__cell--width-65">
<div class="c-card u-high">
<header class="c-card__header">
<h3 class="c-heading u-xlarge">
Blaze UI basket
</h3>
</header>
<div class="c-card__body">
<fieldset class="o-fieldset">
<div class="o-grid o-grid--wrap">
<div class="o-grid__cell o-grid__cell--width-100">
<label class="c-label o-form-element">
User Name
<input placeholder="Santosh"
class="c-field">
</label>
</div>
<div class="o-grid__cell o-grid__cell--width-100">
<label class="c-label o-form-element">
Password
<input placeholder="****"
class="c-field">
</label>
</div>
<div class="o-grid__cell o-grid__cell--width-100">
<label class="c-label o-form-element">
<button class="c-button c-button-block
c-button--success">
Login
</button>
</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
Output:
Example 2: In the below code, we will make use of the above classes to show the demonstration of baskets using Blaze UI.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@12.2.0/dist/blaze/blaze.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js">
</script>
</head>
<body>
<div class="o-container o-container--medium">
<h2 style="color:green">
GeeksforGeeks
</h2>
</div>
<div class="o-grid__cell">
<blaze-sticky class="hydrated">
<div style="width:266px; height:446px; ">
<div style="top:140px; left:210px; width:267px;">
<div style="background-color:lightgreen;"
class="c-card u-high">
<div role="separator"
class="c-card__item c-card__item--divider">
Basket
</div>
<div class="c-card__item o-media">
<div class="o-media__image">
<img class="o-image u-rounded"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"
alt="GFG image">
</div>
<div class="o-media__body">
<h3 class="c-heading">
Course
<div class="c-heading__sub">
11,999
</div>
</h3>
<p class="c-paragraph">
This product is good for GATE aspirants.
</p>
</div>
</div>
<div class="c-card__item o-media">
<div class="o-media__image">
<img class="o-image u-rounded"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</div>
<div class="o-media__body">
<h3 class="c-heading">
Another Course
<div class="c-heading__sub">
12,999
</div>
</h3>
<p class="c-paragraph">
This Course is good for ISRO aspirants.
</p>
</div>
</div>
<div class="c-card__item">
<button class="c-button c-button--block
c-button--brand">
Continue shopping
</button>
</div>
</div>
</div>
</div>
</blaze-sticky>
</div>
</body>
</html>
Output:
Reference: https://www.blazeui.com/examples/basket/