Introduction
Get started with Rabi UI, a framework for building responsive, mobile-first sites themed on Tagore.
Quick Start
Looking to quickly add Rabi UI to your project?
CSS
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load my CSS.
<link rel="stylesheet" href="https://rabiui.netlify.app/css/rabiui.components.css">
JS
Many of my components require the use of JavaScript to function. Place the following <script>
near the end of your pages, right before the closing </body>
tag, to enable them.
<script src="https://rabiui.netlify.app/js/rabiui.js"></script>
Starter template
Be sure to have your pages set up with the latest design and development standards. That means using an
HTML5
doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your
pages
should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Rabi CSS -->
<link rel="stylesheet" href="https://rabiui.netlify.app/css/rabiui.components.css">
<title>Rabi Everywhere</title>
</head>
<body>
<h1>Welcome to Rabi UI</h1>
<!-- Required Rabi UI script -->
<script src="https://rabiui.netlify.app/js/rabiui.js"></script>
</body>
</html>
Avatar
Avatar component comes in 5 sizes
<div class="xsm">
<img class="image round" src="/images/tagore.jpg" alt="avatar image" />
</div>
<div class="sm">
<img class="image round" src="/images/tagore.jpg" alt="avatar image" />
</div>
<div class="md">
<img class="image round" src="/images/tagore.jpg" alt="avatar image" />
</div>
<div class="lg">
<img class="image round" src="/images/tagore.jpg" alt="avatar image" />
</div>
<div class="xlg">
<img class="image round" src="/images/tagore.jpg" alt="avatar image" />
</div>
Alerts
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one
of the four required contextual classes (e.g., .success-alert)
This is a secondary alert.
<div id="alert" class="alert primary">
<p>This is a primary alert.</p>
<div id="close" class="button-close">
<i class="bi bi-x"></i>
</div>
</div>
<div id="alert" class="alert secondary">
<p>This is a secondary alert.</p>
<div id="close" class="button-close">
<i class="bi bi-x"></i>
</div>
</div>
<div id="alert" class="alert success">
<p>This is a success alert.</p>
<div id="close" class="button-close">
<i class="bi bi-x"></i>
</div>
</div>
<div id="alert" class="alert warning">
<p>This is a warning alert.</p>
<div id="close" class="button-close">
<i class="bi bi-x"></i>
</div>
</div>
Badges
Use the background utility classes to quickly change the appearance of a badge.
Primary
Secondary
Success
Warning
<span class="badge primary">Primary</span>
<span class="badge secondary">Secondary</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
Badge on Icons
<div class="badge-icon">
<i class="bi bi-cart3"></i>
<span class="badge-i">5</span>
</div>
<div class="badge-icon">
<i class="bi bi-bell-fill"></i>
<span class="badge-i">3</span>
</div>
Badge on Avatars
<div class="xsm">
<img class="image round" src="/images/tagore.jpg" alt="avatar image" />
<span class="indicator ind-xs"></span>
</div>
<div class="sm">
<img class="image round" src="/images/tagore.jpg" alt="avatar image" />
<span class="indicator ind-s"></span>
</div>
<div class="md">
<img class="image round" src="/images/tagore.jpg" alt="avatar image" />
<span class="indicator ind-m"></span>
</div>
<div class="lg">
<img class="image round" src="/images/tagore.jpg" alt="avatar image" />
<span class="indicator ind-l"></span>
</div>
<div class="xlg">
<img class="image image-round" src="/images/tagore.jpg" alt="avatar image" />
<span class="indicator ind-xl"></span>
</div>
Cards
Cards with badges
"In our desire for eternal life we pray for an eternity of our habit and comfort, forgetting that
immortality is in repeatedly transcending the definite forms of life in order to pursue the infinite truth
of life."
Legend
<div class="card">
<img src="/images/tagore.jpg" alt="image" />
<div class="card-content">
<p>
"In our desire for eternal life we pray for an eternity of our habit and
comfort, forgetting thatimmortality is in repeatedly transcending the
definite forms of life in order to pursue the infinite truth of life."
</p>
</div>
<span class="badge primary card-badge">Legend</span>
</div>
Cards with dismiss
"According to the true Indian view, our consciousness of the world, merely as the sum total of things that
exist, and as governed by laws, is imperfect. But it is perfect when our consciousness realizes all things
as spiritually one with it, and there"
Legend
<div id="card" class="card">
<img src="/images/tagore.jpg" alt="image" />
<div class="card-content">
<p>
"According to the true Indian view, our consciousness of the world,
merely as the sum total of things that exist, and as governed by
laws, is imperfect. But it is perfect when our consciousness
realizes all things as spiritually one with it, and there"
</p>
</div>
<span class="badge primary card-badge">Legend</span>
<div id="dismiss-btn" class="dismiss-btn">
<i class="bi bi-x"></i>
</div>
</div>
Cards with overlay
"Let me not pray to be sheltered from dangers, but to be fearless in facing them. Let me not beg for the
stilling of my pain, but for the heart to conquer it."
Legend
<div class="card">
<img src="/images/tagore.jpg" alt="images" />
<div class="overlay">
<div>Died on 7th August, 1941</div>
</div>
<div class="card-content">
<p>
"Let me not pray to be sheltered from dangers, but to be fearless in facing them.
Let me not beg for the stilling of my pain, but for the heart to conquer it."
</p>
</div>
<span class="badge primary card-badge">Legend</span>
</div>
Text only card
"In our desire for eternal life we pray for an eternity of our habit and comfort, forgetting that
immortality is in repeatedly transcending the definite forms of life in order to pursue the infinite truth
of life."
<div class="card">
<header class="header">
<h1>Card title</h1>
<p>Card subtitle</p>
</header>
<div class="card-content">
<p>
"In our desire for eternal life we pray for an eternity of our habit
and comfort, forgetting that immortality is in repeatedly transcending
the definite forms of life in order to pursue the infinite truth of life."
</p>
</div>
<div id="dismiss-btn" class="dismiss-btn">
<i class="bi bi-x"></i>
</div>
</div>
Horizontal card
"Love gives beauty to everything it touches. Not greed and utility; they produce offices, but not dwelling
houses. To be able to love material things, to clothe them with tender grace, and yet not be attached to
them, this is a great service. Providen"
<div class="card horizontal">
<div class="card-img-container">
<img src="/images/tagore.jpg" alt="" />
</div>
<div class="card-content">
<p>
"Love gives beauty to everything it touches. Not greed and utility;
they produce offices, but not dwelling houses. To be able to love
material things, to clothe them with tender grace, and yet not be
attached to them, this is a great service. Providen"
</p>
</div>
</div>
Cards with shadow
"Mistakes live in the neighborhood of truth and therefore delude us."
<div class="card shadow">
<img class="card-image" src="/images/tagore.jpg" alt="" />
<div class="card-content">
<p>
"Mistakes live in the neighborhood of truth and therefore delude us."
</p>
</div>
</div>
Images
Responsive images
<div>
<img class="image" src="/images/tagore.jpg" alt="" />
</div>
Round images
<div>
<img class="image round" src="/images/tagore.jpg" alt="" />
</div>
Lists
"Those who own much have much to fear"
"Faith is the bird that feels the light when the dawn is still dark."
"The fundamental desire of life is the desire to exist."
"Truth cannot afford to be tolerant where it faces positive evil."
<div class="list-item-container">
<div class="list-item">
<div class="list-avatar">
<img class="image round" src="/images/tagore.jpg" alt="avatar image" />
</div>
<p>"Those who own much have much to fear"</p>
</div>
<div class="list-item">
<div class="list-avatar">
<img class="image round" src="/images/tagore.jpg" alt="avatar image" />
</div>
<p>"Faith is the bird that feels the light when the dawn is still dark."</p>
</div>
<div class="list-item">
<div class="list-avatar">
<img class="image round" src="/images/tagore.jpg" alt="avatar image" />
</div>
<p>"The fundamental desire of life is the desire to exist."</p>
</div>
<div class="list-item">
<div class="list-avatar">
<img class="image round" src="/images/tagore.jpg" alt="avatar image" />
</div>
<p>"Truth cannot afford to be tolerant where it faces positive evil."</p>
</div>
</div>
Navigation