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.
<!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.
<!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/