Horje
Blaze UI Basket Example

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=
"https://unpkg.com/@blaze/[email protected]/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.

HTML

<!DOCTYPE html>
  
<html>
  
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/[email protected]/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/


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
Bulma Button Variables Bulma Button Variables
Pure CSS Regular Grid vs Responsive Grid Pure CSS Regular Grid vs Responsive Grid
Bulma Container Variables Bulma Container Variables
Bulma File Variables Bulma File Variables
Bulma Input Variables Bulma Input Variables

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 11



 

Horje