Horje
Blaze UI Example Chat

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 the example of chat. Chat is a conversation between two people, for example, a WhatsApp chat box.

Classes Used:

  • o-grid: The classes under this type are used to wrap the elements in a grid manner.
  • o-grid–no-gutter: This class can be used to turn off all the gutters for the specific container cells.
  • o-grid__cell: This class is used to add width to the cells.
  • o-grid__cell–width-40: This class is used to add width to the cells.
  • c-card: This class is used to create a card.
  • c-card__item: This class is used to create the item of the card. 
  • c-card__item–divider: This class is used to create the divider between the card item.
  • o-field: This class is used to create the field.
  • o-field–icon-left: This class is used to create the field with an icon on the left side.
  • u-small: This class is used to create the small heading
  • fas: This class is used to include icons into that element.
  • fa-search: This class is used to include a search icon in that element.
  • c-icon: This class is used to add an icon with the input component. 
  • c-field: This class is used to add a field with the input component. 
  • c-avatar: This class is used to add an avatar with the input component. 
  • c-avatar__img: This class is used to add an avatar image with the input component. 
  • u-text–loud: This class is used to add a loud or dark-colored emphasized text.
  • u-text–quiet: This class is used to add a quiet or light-colored emphasized text.
  • u-right: This class is used to position the element at the right position.

Example 1: In the below code, we will use the above classes to demonstrate what the inbox of chat looks like.

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>
    <center>
        <div class="o-container o-container--medium">
            <center>
                <h1 style="color: green">
                    GeeksforGeeks
                </h1>
  
                <h3>A computer science portal for geeks</h3>
            </center>
  
            <div style="margin-left:195px; width:750px;" 
                 class="o-grid o-grid--no-gutter">
                <div class="o-grid__cell 
                            o-grid__cell--width-40">
                    <div class="c-card">
                        <div role="separator" 
                             class="c-card__item 
                                    c-card__item--divider">
                            <div class="o-field o-field--icon-left 
                                        u-small">
                                <i class="fas fa-search c-icon"></i>
                                <input class="c-field" 
                                       type="text" />
                            </div>
                        </div>
                        <div class="o-grid o-grid--no-gutter c-card__item">
  
                            <div class="o-grid__cell">
                                <div class="u-text--loud">
                                  GeeksforGeeks</div>
                                <div class="u-text--quiet u-small">
                                    Welcome to Geeksfor Geeks!!
                                </div>
                            </div>
                            <div class="o-grid__cell o-grid__cell--width-25">
                                <div class="u-text--quiet u-small u-right">
                                    10:07
                                </div>
                            </div>
                        </div>
                        <div class="o-grid o-grid--no-gutter 
                                    c-card__item c-card__item--success">
  
                            <div class="o-grid__cell">
                                <div class="u-text--loud">MOM</div>
                                <div class="u-text--quiet u-small">
                                    Where are you?!!
                                </div>
                            </div>
                            <div class="o-grid__cell o-grid__cell--width-25">
                                <div class="u-text--quiet u-small u-right">
                                    00:05
                                </div>
                            </div>
                        </div>
                        <div class="o-grid o-grid--no-gutter c-card__item">
  
                            <div class="o-grid__cell">
                                <div class="u-text--loud">Natasha</div>
                                <div class="u-text--quiet u-small">
                                    We should go out tonight...
                                </div>
                            </div>
                            <div class="o-grid__cell o-grid__cell--width-25">
                                <div class="u-text--quiet u-small u-right">
                                    Yesterday
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
  
</html>

Output:

 

Example2: In the below code, we will see what the conversation between two mates looks like.

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>
    <center>
        <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__cell o-grid__cell--width-60">
                <div class="o-grid">
                    <div class="o-grid__cell o-grid__cell--width-50">
                        <div class="c-card">
                            <div class="c-card__item">
                                Hello Krishna, How can i help you?</div>
                        </div>
                    </div>
                </div>
  
                <div class="o-grid">
                    <div class="o-grid__cell o-grid__cell--width-50 
                                o-grid__cell--offset-50">
                        <div class="c-card">
                            <div class="c-card__item c-card__item--success">
                                I need to know about the courses you offer?
                            </div>
                        </div>
                    </div>
                </div>
                <div class="o-grid">
                    <div class="o-grid__cell o-grid__cell--width-50">
                        <div class="c-card">
                            <div class="c-card__item">
                                GeeksforGeeks offers many useful courses
                                like DSA, CIP, CP and
                                many more.</div>
                        </div>
                    </div>
                </div>
                <div class="o-grid">
                    <div class="o-grid__cell o-grid__cell--width-50 
                                o-grid__cell--offset-50">
                        <div class="c-card">
                            <div class="c-card__item c-card__item--success">
                                Thank you so much for sharing the information.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c-input-group u-letter-box-medium">
                    <div class="o-field o-field--icon-right">
                        <input class="c-field" placeholder="Message" />
                        <i class="fa-fw far fa-smile c-icon"></i>
                    </div>
                    <button class="c-button c-button--brand" 
                            aria-label="Send message">
                        <i class="fa-fw far fa-paper-plane"></i>
                    </button>
                </div>
            </div>
  
        </div>
    </center>
</body>
  
</html>

Output:

 

Reference: https://www.blazeui.com/examples/chat/


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
Blaze UI Example Email Blaze UI Example Email
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

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



 

Horje