Introduction
Colorant UI is a free, open-source modern CSS library that provides ready-to-use frontend components that you can easily combine to build responsive interface. Colorant UI helps you to quickly build your projects, by focusing much on functionality and not worring about your designs.
Installation Guide
Copy and paste the stylesheet
<link>
in the
<head>
tag of your html document. So that you can style your components by just adding class names to your html
elements.
<link rel="stylesheet" href="https://colorant-ui.netlify.app/CSS/main.css">
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Simple Alert
To use this alert just use class name alert-box and also add class according to alert type - alert-primary, alert-secondary, alert-danger, alert-success, alert-warning. (e.g class="alert-box alert-primary").
<!-- Primary Alert -->
<div class="alert-box alert-primary">
<strong>Primary!</strong> This is a primary alert!
</div>
<!-- Error Alert -->
<div class="alert-box error-alert">
<strong>Error!</strong> This is a error alert!
</div>
<!-- Success Alert -->
<div class="alert-box success-alert">
<strong>Success!</strong> This is a success alert!
</div>
<!-- Warning Alert -->
<div class="alert-box warning-alert">
<strong>Warning!</strong> This is a warning alert!
</div>
Outline Alert
To use outline alert just use class name alert-box and also add class according to outline alert type - alert-outline-primary, alert-outline-secondary, alert-outline-danger, alert-outline-success, alert-outline-warning. (e.g class="alert-box alert-outline-primary").
<!-- Primary outline Alert -->
<div class="alert-box alert-outline-primary">
<strong>Primary!</strong> This is a primary alert!
</div>
<!-- Error outline Alert -->
<div class="alert-box error-outline-alert">
<strong>Error!</strong> This is a error alert!
</div>
<!-- Success outline Alert -->
<div class="alert-box success-outline-alert">
<strong>Success!</strong> This is a success alert!
</div>
<!-- Warning outline Alert -->
<div class="alert-box warning-outline-alert">
<strong>Warning!</strong> This is a warning alert!
</div>
Avatar
Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items.
Image Avatar
Avatar is available in 4 different sizes. You can use image in Avatar. You need to include class avatar in img tag and for size add class according to size avatar-lg-size, avatar-md-size, avatar-sm-size, avatar-xs-size (e.g. class="avatar avatar-lg-size").
<!-- Avatar large size -->
<img src="./components/Images/avatar.png" alt="avatar" class="avatar avatar-lg-size">
<!-- Avatar medium size -->
<img src="./components/Images/avatar.png" alt="avatar" class="avatar avatar-md-size">
<!-- Avatar small size -->
<img src="./components/Images/avatar.png" alt="avatar" class="avatar avatar-sm-size">
<!-- Avatar extra small size -->
<img src="./components/Images/avatar.png" alt="avatar" class="avatar avatar-xs-size">
Text Avatar
You can use initial letters of user in Avatar as well. You need to include class avatar-text along with avatar and size class. (e.g. class="avatar avatar-lg-size avatar-text")
<!-- Large text avatar -->
<div class="avatar avatar-lg-size avatar-text" role="img">AM</div>
<!-- Medium text avatar -->
<div class="avatar avatar-md-size avatar-text" role="img">AM</div>
<!-- Small text avatar -->
<div class="avatar avatar-sm-size avatar-text" role="img">AM</div>
<!-- Extra small text avatar -->
<div class="avatar avatar-xs-size avatar-text" role="img">AM</div>
Badge
Badges are being used to display a notification count or status information.
Avatar Badge
You can use avatar badge to show the current status of a user (e.g. online, offline, do not disturb ). Check code below to copy the html part as is.
<!-- Use "badge-container" as parent class and variant status class on child -->
<div class="badge-container">
<img src="./components/Images/avatar.png" alt="avatar-badge" class="avatar avatar-md-size">
<div class="status-badge online"></div>
</div>
<div class="badge-container">
<img src="./components/Images/avatar.png" alt="avatar-badge" class="avatar avatar-md-size">
<div class="status-badge offline"></div>
</div>
<div class="badge-container">
<img src="./components/Images/avatar.png" alt="avatar-badge" class="avatar avatar-md-size">
<div class="status-badge dnd"></div>
</div>
Icon Badge
You can show cart or notification count by using badge on icons.
<!-- Use "badge-container" as parent class and "icon-badge-number" class on child -->
<div class="badge-container">
<i class='badge-container-icon bx bxs-cart'></i>
<div class="icon-badge-number">20</div>
</div>
<div class="badge-container">
<i class='badge-container-icon bx bxs-envelope'></i>
<div class="icon-badge-number dnd">10</div>
</div>
Button
Buttons are also called as call to action. Buttons allow users to take actions, and make choices, with a single tap.
Primary Button
Whenever you want your user to click on a link or button, use primary style buttons.
<button class="btn primary-solid-btn">Primary-solid</button>
<button class="btn secondary-solid-btn">Secondary-solid</button>
<button class="btn primary-outline-btn">Primary-outline</button>
<button class="btn secondary-outline-btn">Secondary-outline</button>
<button class="btn primary-error-btn">Error</button>
<button class="btn primary-success-btn">Success</button>
Link Button
You can attach a link action like button just by adding the link in the href attribute of an anchor tag.
<a href="#">
<button class="btn primary-solid-btn">Link</button>
</a>
<a href="#">
<button class="btn primary-outline-btn">Outline Link</button>
</a>
<a href="#" class="primary-link">Primary Link</a>
<a href="#" class="secondary-link">Secondary Link</a>
Icon Button
You can create icon button just by adding "btn-icon" as child class name and "primary-btn-text-icon" to parent class name.
<button class="btn primary-outline-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-cart'></i>Add to cart
</button>
<button class="btn primary-solid-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-bolt'></i>Buy Now
</button>
Floating Action Button
A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. You can use FAB by adding "btn-fab" as child class name inside anchor parent tag.
<a href="#">
<i class='btn-fab bx bx-up-arrow-alt'></i>
</a>
<a href="#">
<span class="btn-fab">+</span>
</a>
<a href="#">
<span class="btn-fab">-</span>
</a>
Card
Cards are used to show user related data collectively, like product details.
Text only card
Use text card component in places where you want to show a title and description related to that title. Copy below code and put your desired text and you are good to go.
<div class="card">
<div class="card-header">
<div class="card-title">Card Title</div>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat deleniti ab hic ipsa quasi harum?
</div>
</div>
Card with dismiss
You can add close icon button into your card to close the card. Just by adding below given classes.
<div class="card">
<div class="card-header">
<div class="card-title">Card Title</div>
<i class='close bx bx-x'></i>
</div>
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat deleniti ab hic ipsa quasi harum?
</div>
</div>
Vertical card
To use vertical card with image, add class "vertical-card". Copy below code and put your desired text and image and you are good to go.
<div class="vertical-card">
<div class="card-header">
<div class="card-img-container">
<img class="card-img" src="./components/Images/card-man-img.jpeg" alt="men-shacket">
<i class='card-wishlist-icon bx bx-heart'></i>
</div>
</div>
<div class="card-body">
<div class="item-price">Rs. 5,999</div>
<div class="card-description">Men's grey shacket</div>
</div>
<div class="card-footer">
<button class="btn card-btn primary-outline-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-cart'></i>Add to cart
</button>
<button class="btn card-btn primary-solid-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-bolt'></i>Buy Now
</button>
</div>
</div>
<div class="vertical-card">
<div class="card-header">
<div class="card-img-container">
<img class="card-img" src="./components/Images/card-woman-img.jpeg" alt="men-shacket">
<i class='card-wishlist-icon bx bx-heart'></i>
</div>
</div>
<div class="card-body">
<div class="item-price">Rs. 1,999</div>
<div class="card-description">Women's black top</div>
</div>
<div class="card-footer">
<button class="btn card-btn primary-outline-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-cart'></i>Add to cart
</button>
<button class="btn card-btn primary-solid-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-bolt'></i>Buy Now
</button>
</div>
</div>
Horizontal card
To use horizontal card with image, add class "card-horizontal" with "card" class. Copy below code and put your desired text and image and you are good to go.
<div class="card card-horizontal">
<div class="card-img-container">
<img class="card-img" src="./components/Images/card-man-img.jpeg" alt="men-shacket">
<i class='card-wishlist-icon bx bx-heart'></i>
</div>
<div class="card-horizontal-details">
<div class="item-price">Rs. 5,999</div>
<div class="card-description">Men's grey shacket</div>
<div class="card-horizontal-button">
<button class="btn card-btn primary-outline-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-cart'></i>Add to cart
</button>
<button class="btn card-btn primary-solid-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-bolt'></i>Buy Now
</button>
</div>
</div>
</div>
Card with badge
To get badge on card, add class "card-badge" to child element of "card" class. Copy below code and put your desired badge text and image and you are good to go.
<div class="card">
<span class="card-badge">TRENDING</span>
<div class="card-header">
<div class="card-img-container">
<img class="card-img" src="./components/Images/card-man-img.jpeg" alt="men-shacket">
<i class='card-wishlist-icon bx bx-heart'></i>
</div>
</div>
<div class="card-body">
<div class="item-price">Rs. 5,999</div>
<div class="card-description">Men's grey shacket</div>
</div>
<div class="card-footer">
<button class="btn card-btn primary-outline-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-cart'></i>Add to cart
</button>
<button class="btn card-btn primary-solid-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-bolt'></i>Buy Now
</button>
</div>
</div>
Card with text overlay
To get card with text overlay, add two classes "overlay-container" and "overlay-text" to children elements of "card" class. Copy below code and put your desired overlay text and image and you are good to go.
<div class="card">
<div class="overlay-container">
<div class="card-header">
<div class="card-img-container">
<img class="card-img" src="./components/Images/card-man-img.jpeg" alt="men-shacket">
<i class='card-wishlist-icon bx bx-heart'></i>
</div>
</div>
<div class="card-body">
<div class="item-price">Rs. 5,999</div>
<div class="card-description">Men's grey shacket</div>
</div>
<div class="card-footer">
<button class="btn card-btn primary-outline-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-cart'></i>Add to cart
</button>
<button class="btn card-btn primary-solid-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-bolt'></i>Buy Now
</button>
</div>
</div>
<div class="overlay-text">OUT OF STOCK</div>
</div>
Card with shadow
To get shadow effect on card, add class "shadow" with "card" class. Copy below code and put your card details and you are good to go.
<div class="card shadow">
<div class="card-header">
<div class="card-img-container">
<img class="card-img" src="./components/Images/card-man-img.jpeg" alt="men-shacket">
<i class='card-wishlist-icon bx bx-heart'></i>
</div>
</div>
<div class="card-body">
<div class="item-price">Rs. 5,999</div>
<div class="card-description">Men's grey shacket</div>
</div>
<div class="card-footer">
<button class="btn card-btn primary-outline-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-cart'></i>Add to cart
</button>
<button class="btn card-btn primary-solid-btn primary-btn-text-icon">
<i class='btn-icon bx bxs-bolt'></i>Buy Now
</button>
</div>
</div>
Grid Simplified
CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web.
Grid auto fit
By adding class "grid" and "grid-auto". Itmes will automatically fit inside parent conatiner with minimum width of 320px.
<div class="grid grid-auto">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
Two columns grid
You can layout your page in 2 columns by adding class
<div class="grid grid-cl-2">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
Three columns grid
You can layout your page in 3 columns by adding class
<div class="grid grid-cl-3">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
Image
Images can be responsive to fit the parent's width, and also can be customised to be round shaped
Responsive Image
You can add class "img-responsive" to make your image fit the width of container. It's height will get adjusted by keeping the aspect ratio same. If you want to change the aspect ratio, you will have to crop the image.
<img src="./components/Images/fruits.jpeg" alt="fruits" class="img-responsive">
Round Image
You can add class "img-round" to make your image round shaped.
<img src="./components/Images/memoji.png" alt="memoji" class="img-round">
Input
Inputs are necessary for user interaction with the website. Inputs are used to take information from the user, and then save the data to the server, accordingly.
Textbox basic input
Basic inputs are the heart of user interaction when we need to get input from the user.
<form>
<label for="username-input">Username :</label>
<input type="text" id="username-input" class="input-box input-default" placeholder="Enter your username">
<label for="user-password">Password : </label>
<input type="text" id="user-password" class="input-box input-default" placeholder="Enter your password">
</form>
Input with validations
You can add class "input-default, input-success, input-error, input-warning" with class "input-box" to get input box with validations.
<label for="default">Default</label>
<input type="text" class="input-box input-default" placeholder="Default state">
<label for="success">Success</label>
<input type="text" id="success" class="input-box input-success" placeholder="Success state">
<label for="error">Error</label>
<input type="text" id="error" class="input-box input-error" placeholder="Error state">
<label for="warning">Warning</label>
<input type="text" id="warning" class="input-box input-warning" placeholder="Warning state">
<label for="disabled">Disable</label>
<input type="text" id="disabled" disabled class="input-box input-disabled" placeholder="Disabled state">
Lists
Lists can be used at so many places, navigation bar, stacked notifications, article pages, etc.
Normal List
To get a list, add class "list".
- Apple
- Mango
- Avocado
- Banana
- Orange
<ul class="list">
<div class="list-heading">Fruits</div>
<li>Apple</li>
<li>Mango</li>
<li>Avocado</li>
<li>Banana</li>
<li>Orange</li>
</ul>
Stacked List
To get stacked list, add class "stacked-list" with "list".
- Notification 1
- Notification 2
- Notification 3
- Notification 4
- Notification 5
- Notification 6
<ul class="list stacked-list">
<li>Notification 1</li>
<li>Notification 2</li>
<li>Notification 3</li>
<li>Notification 4</li>
<li>Notification 5</li>
<li>Notification 6</li>
</ul>
Modal
The modal component provides a solid foundation for creating dialogs, popovers, lightboxes.
Standard Modal
You can use modal component by simply adding "modal" class. Check below code and copy paste.
Click here for live demo.
HTML Code:
<div class="modal">
<div class="modal-header">
<div class="modal-title">Modal Title</div>
<i class='modal-close bx bx-x'></i>
</div>
<div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam temporibus mollitia provident a? Illo saepe libero voluptas pariatur est beatae!</div>
<div class="modal-footer">
<button class="btn secondary-solid-btn">Close</button>
<button class="btn primary-solid-btn">Save Chnages</button>
</div>
</div>
JavaScript Code:
const modalLiveDemo = document.querySelector('#modal-live-demo');
const modalCloseButton = document.querySelector('.modal-close');
const modalDemoClick = document.querySelector('.modal-demo-click');
modalCloseButton.addEventListener('click', () => {
modalLiveDemo.classList.remove('active-modal');
})
modalDemoClick.addEventListener('click', () => {
modalLiveDemo.classList.add('active-modal');
})
Navigation
Navigation bar is used to navigate through the web apps or websites. This navigation component is responsive.
Simple Navbar for Desktop
To get navbar, add class "nav-bar". Check below code and copy paste.
<nav class="nav-bar shadow">
<div class="left-nav">
<a class="h2 primary-text-color" href="#">LOGO</a>
</div>
<ul class="right-nav">
<li><a class="nav-pills" href="#">Link 1</a></li>
<li><a class="nav-pills" href="#">Link 2</a></li>
<li><a class="nav-pills" href="#">Link 3</a></li>
</ul>
</nav>
Navbar for mobile (Hamburger Icon)
To get the hamburger icon in mobile view. Copy below code.
HTML code:
<nav class="nav-bar z-index-0 shadow">
<div class="left-nav">
<a class="h2 primary-text-color" href="#">LOGO</a>
</div>
<ul class="right-nav">
<li><a class="nav-pills" href="#">Link 1</a></li>
<li><a class="nav-pills" href="#">Link 2</a></li>
<li><a class="nav-pills" href="#">Link 3</a></li>
</ul>
<!-- Hamburger Menu for smaller display -->
<i class='hamburger-icon bx bx-menu'></i>
<div class="hamburger-menu">
<i class='hamburger-close bx bx-x'></i>
<ul class="hamburger-list">
<li class="hamburger-link"><a href="#">Home</a></li>
<li class="hamburger-link"><a href="#">Docs</a></li>
<li class="hamburger-link"><a href="#">GitHub</a></li>
<li class="hamburger-link"><a href="#">Installation</a></li>
</ul>
</div>
</nav>
JavaScript code:
const hamburgerIcon = document.querySelector('.hamburger-icon');
const hamburgerMenu = document.querySelector('.hamburger-menu');
const hamburgerClose = document.querySelector('.hamburger-close');
const hamburgerLink = document.querySelectorAll('.hamburger-link');
hamburgerIcon.addEventListener('click', () => {
hamburgerMenu.classList.add('hamburger-menu-open');
});
hamburgerClose.addEventListener('click', () => {
hamburgerMenu.classList.remove('hamburger-menu-open');
});
hamburgerLink.forEach(link => {
link.addEventListener('click', () => {
hamburgerMenu.classList.remove('hamburger-menu-open');
});
});
Rating
Ratings are used to display user responses for and particular product.
Standard Rating
You can use rating component by adding "rating" on parent element and "rating-star" on children elements.
HTML Code:
<div class="rating">
<i class='rating-star bx bx-star'></i>
<i class='rating-star bx bx-star'></i>
<i class='rating-star bx bx-star'></i>
<i class='rating-star bx bx-star'></i>
<i class='rating-star bx bx-star'></i>
</div>
JavaScript Code:
const starRating = document.querySelectorAll('.rating-star');
starRating.forEach((star, index) => {
star.addEventListener('click', () => {
for(let i=0; i < 5; i++) {
starRating[i].classList.remove('bxs-star');
}
for(let i=0; i <= index; i++) {
starRating[i].classList.add('bxs-star');
}
});
});
Slider
Sliders allow the users to make selections from a range of values.
Basic Slider
You can use slider component by adding "slider" class.
<input class="slider" type="range" min="0" max="500" value="50">
Toast
Snackbar is to used show messages, notifications, or some actions that need users attention.
Simple Toast
You can use toast component by adding "toast" class.
Can't send photo. Retry in 5 seconds. RETRY
<div class="p-4 my-2 radius-5 container-flex-justify-center component-example">
<div class="toast">
<p>
Can't send photo. Retry in 5 seconds.
<a class="primary-text-color pl-2" href="#">RETRY</a>
<div class="close-toast">X</div>
</p>
</div>
</div>
Primary Toast
You can use primary toast component by adding "toast-primary" class with "toast" class.
Primary Toast
<div class="toast toast-primary">
<p>
Primary Toast
<div class="close-toast">X</div>
</p>
</div>
Success Toast
You can use success toast component by adding "toast-success" class with "toast" class.
Success Toast
<div class="toast toast-success">
<p>
Success Toast
<div class="close-toast">X</div>
</p>
</div>
Danger Toast
You can use danger toast component by adding "toast-danger" class with "toast" class.
Danger Toast
<div class="toast toast-danger">
<p>
Danger Toast
<div class="close-toast">X</div>
</p>
</div>
Warning Toast
You can use warning toast component by adding "toast-danger" class with "toast" class.
Warning Toast
Typography
Check out below text utilities.
Headings
For heading you can use h1, h2, h3, h4, h5, h6 elements. The same font-styling is present for class names h1, h2, h3, h4, h5, h6 class. You can add one of these classes to style the text.
H1 - Heading
H2 - Heading
H3 - Heading
H4 - Heading
H5 - Heading
H6 - Heading
<h1 class="h1">H1 - Heading</h1>
<h2 class="h2">H2 - Heading</h2>
<h3 class="h3">H3 - Heading</h3>
<h4 class="h4">H4 - Heading</h4>
<h5 class="h5">H5 - Heading</h5>
<h6 class="h6">H6 - Heading</h6>
Small Text
For small text you can use class "small-text"
<div class="small-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore voluptates numquam officia nostrum! Voluptatum id modi quam asperiores perspiciatis perferendis.
</div>
Grey Text
To use grey text color, add class "grey-text-color".
<div class="grey-text-color">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore laudantium aspernatur eveniet culpa numquam accusamus ducimus in qui? Culpa, commodi.
</div>
Center Text
To center a text, add class "text-center".
<div class="text-center">Lorem ipsum dolor sit, amet consectetur adipisicing.</div>