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/css@x.x.x/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" > w3wiki </ h1 > < h3 >A computer science portal for Beginner</ 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" > w3wiki</ div > < div class = "u-text--quiet u-small" > Welcome to Beginnerfor Beginner!! </ 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/css@x.x.x/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" > w3wiki </ h1 > < h3 >A computer science portal for Beginner</ 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" > w3wiki 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/