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=
"https://unpkg.com/@blaze/css@12.2.0/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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@12.2.0/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/