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.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<script src=
</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.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<script src=
</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=
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=
</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/