Open In App

Blaze UI Example Chat

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    <script src=
    </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=
  
    <script src=
    </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/



Last Updated : 24 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads