Horje
Blaze UI Example Email

Blaze UI is a framework-free open-source UI toolkit that uses JavaScript components to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.

In this article, we will create two email pages with different classes. This page is used to provide inbox, sent junk, bin, archive, and starred buttons which will help you to navigate through the main page.

Classes Used:

  • o-grid: This class is used to create the grid.
  • o-grid–no-gutter: This class can be used to turn off all the gutters for the specific container cells.
  • u-high: This class is used to give minimum elevation to an element.
  • o-grid__cell: This class is used to provide a grid with fixed cells
  • o-grid__cell–width-100: This class is used to provide a cell with a width of 100%.
  • c-nav: This class is used to provide a nav bar on the web page.
  • c-nav__item: This class is used to provide items in the nav bar.
  • c-nav__item–brand: This class is used to provide item brand into the navbar.
  • fa-inbox: This class is used to provide an icon of the index.
  • fas: This class is used to create icons on the web page.
  • u-pillar-box-small: It has smaller padding than medium.
  • c-badge: this class is used to create the badge.
  • c-badge–rounded: This class is used to create the rounded badge.
  • c-badge–info: This class is used to create the information badge.
  • c-badge–warning: This class is used to create the warning badge.
  • c-nav__item–active: This class is used to create the active nav item.
  • fa-dumpster: This class is used to create the icon of a dumpster.
  • fa-trash-alt: This class is used to create the trash icon.
  • fa-archive: This class is used to create the archive icon.

Example1: In this example, we will create the basic nav bar of the email page from where you can navigate through the page very easily.

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">
        <center>
            <h1 style="color: green">
                GeeksforGeeks
            </h1>
  
            <h3>A computer science portal for geeks</h3>
        </center>
  
        <div class="o-grid o-grid--no-gutter u-high ">
            <nav class="o-grid__cell o-grid__cell--width-100 c-nav">
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-inbox"></i>
                    <span class="u-pillar-box-small">Inbox</span>
                    <span class="c-badge c-badge--rounded c-badge--info">
                        1,409
                    </span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--active 
                                   c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-flag"></i>
                    <span class="u-pillar-box-small">starred</span>
                    <span class="c-badge c-badge--rounded c-badge--warning">
                        7
                    </span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-paper-plane"></i>
                    <span class="u-pillar-box-small">Sent</span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-dumpster"></i>
                    <span class="u-pillar-box-small">Junk</span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-trash-alt"></i>
                    <span class="u-pillar-box-small">Bin</span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-archive"></i>
                    <span class="u-pillar-box-small">Archive</span>
                </a>
            </nav>
        </div>
  
    </div>
</body>
  
</html>

Output:

 

Example2: In this example, we will create a newsletter that will help you to keep an eye on world news.

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">
        <center>
            <h1 style="color: green">
                GeeksforGeeks
            </h1>
  
            <h3>A computer science portal for geeks</h3>
        </center>
  
  
        <div class="o-grid o-grid--no-gutter u-high ">
            <nav class="o-grid__cell o-grid__cell--width-100 c-nav">
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-inbox"></i>
                    <span class="u-pillar-box-small">Inbox</span>
                    <span class="c-badge c-badge--rounded c-badge--info">
                        1,409
                    </span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--active 
                    c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-flag"></i>
                    <span class="u-pillar-box-small">starred</span>
                    <span class="c-badge c-badge--rounded c-badge--warning">
                        7
                    </span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-paper-plane"></i>
                    <span class="u-pillar-box-small">Sent</span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-dumpster"></i>
                    <span class="u-pillar-box-small">Junk</span>
                </a>
                <a href="#" class="c-nav__item c-nav__item--brand">
                    <i aria-hidden="" class="fas fa-trash-alt"></i>
                    <span class="u-pillar-box-small">Bin</span>
                </a>
            </nav>
  
  
            <br><br>
  
            <div class="o-grid__cell o-grid__cell--width-50
                         u-pillar-box-medium">
                <div class="o-grid o-grid--no-gutter">
  
                    <div class="o-grid__cell o-grid__cell--width-15">
                        <div class="c-avatar">
                            <img class="c-avatar__img" alt="placeholder"
                                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"
                                alt="GFG image">
                        </div>
                    </div>
  
                    <div class="o-grid__cell">
                        <h1 class="c-heading u-medium u-letter-box-small">
                            GeeksforGeeks</h1>
                    </div>
  
                </div>
                <h2 class="c-heading u-xlarge u-letter-box-none">
                    GeeksforGeeks News</h2>
                <section class="u-letter-box-small">
                    <p class="c-paragraph">
                        Geeks News is a one-stop platform where
                        you can access all the latest news stories
                        and enriching blogs from various domains
                        including technology, finance, business,
                        and more.
                    </p>
  
                </section>
            </div>
        </div>
    </div>
</body>
  
</html>

Output:

 


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
Primer CSS Introduction and Installation Primer CSS Introduction and Installation
Foundation CSS JavaScript Foundation CSS JavaScript
Blaze UI Input Images Blaze UI Input Images
Tachyons Layout Clearfix Tachyons Layout Clearfix
Tachyons Layout Debugging Tachyons Layout Debugging

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



 

Horje