Introduction
CrystalUi
is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
Installation Guide
To use CrystalUi in your web interfaces , copy the following link and paste it in
tag of your main HTML file.
<link rel="stylesheet" href="https://crystal-ui.netlify.app/components.css" />
Colors
CrystalUi
comes with pre-defined color, which can be used directly in your css.
We can use these colors for background of elements or on text-colors. We have losts of varients for colors as well as their weights.
Colors of Library
Color pallete of CrystalUi
Colors
Colors CrystalUi provides.
Avatar
The Avatar
component is used to represent a user, and
displays the profile picture, we have avatar in different sizes
and shapes. You have to add ct-avatar
class in
img
tag to use it as avatar. By default the avatar
size is 32px.
Round Avatar Sizes
You have to apply ct-avatar, ct-round
class to use
round avatar, which has four different sizes
ct-sm | 32px, ct-md | 40px, ct-lg | 64px, ct-xlg | 96px
.
<img class="ct-avatar ct-round ct-sm" src="image-url" alt="avatar"/>
<img class="ct-avatar ct-round ct-md" src="image-url" alt="avatar"/>
<img class="ct-avatar ct-round ct-lg" src="image-url" alt="avatar"/>
<img class="ct-avatar ct-round ct-xlg" src="image-url" alt="avatar"/>
Squared Avatar
Use ct-square
class to add Squared avatar. Which also
has all the four sizes.
<img class="ct-avatar ct-square ct-sm" src="image-url" alt="avatar"/>
<img class="ct-avatar ct-square ct-md" src="image-url" alt="avatar"/>
<img class="ct-avatar ct-square ct-lg" src="image-url" alt="avatar"/>
<img class="ct-avatar ct-square ct-xlg" src="image-url" alt="avatar"/>
Fallback Avatar
You can use fallback avatar if the user has not given any image or
removed it. put ct-fallback
.
<img class="ct-fallback ct-sm" src="image-url" alt="avatar"/>
<img class="ct-fallback ct-md" src="image-url" alt="avatar"/>
<img class="ct-fallback ct-lg" src="image-url" alt="avatar"/>
<img class="ct-fallback ct-xlg" src="image-url" alt="avatar"/>
Alert
Alerts are use to show a state to user that something affected to
a system, feature or page. We have four types of alerts with icons
and button, which can you use adding class
ct-alert
in it.
Status Alert
Use ct-error
for Error alert,
ct-update
for success, ct-report
for
report, ct-info
for information.
<div class="ct-error ct-alert"> <span class="material-icons"> error </span>
There was an error processing your request </div>
<div class="ct-update ct-alert"> <span class="material-icons"> check_circle </span>
Data uploaded to the server. Fire on! </div>
<div class="ct-report ct-alert"> <span class="material-icons"> report </span>
Seems your account is about expire, upgrade now </div>
<div class="ct-info ct-alert"> <span class="material-icons"> lightbulb </span>
Mangalyaan is going live on 5 November 2013. Get ready! </div>
Status Alert with Border
Add ct-error-bd, ct-update-bd...
etc classes to add
outer border alert. -bd
stands for border.
<div class="ct-error-bd ct-alert"> <span class="material-icons"> error </span>
There was an error processing your request </div>
<div class="ct-update-bd ct-alert"> <span class="material-icons"> check_circle </span>
Data uploaded to the server. Fire on! </div>
<div class="ct-report-bd ct-alert"> <span class="material-icons"> report </span>
Seems your account is about expire, upgrade now </div>
<div class="ct-info-bd ct-alert"> <span class="material-icons"> lightbulb </span>
Mangalyaan is going live on 5 November 2013. Get ready! </div>
Alert with Button
We have close button in this alert type. You can use both default and outer alert types in it using those classes.
<div class="ct-error ct-alert"> <span class="material-icons"> error </span>
There was an error processing your request <span class="material-icons"> close </span>
</div>
<div class="ct-update-bd ct-alert"> <span class="material-icons">check_circle </span>
There was an error processing your request <span class="material-icons"> close </span>
</div>
Badge
Badges can be usefull in showing notification pop-up, user is online or not, on CTA buttons. we have badges on icons, buttons and avatar also.
Badge on Icons
Badge on icons has basic-badge
class, inside that we
have badge-pop
class which is a badge and includes
four colors by default it has blue color but you can add these
classes to make it different,
ct-green, ct-red, ct-violet
.
<div class="basic-badge">
<img src="img.svg-url" alt="mail" /> <span class="badge-pop">4</span>
</div>
<div class="basic-badge">
<img src="img.svg-url" alt="mail" /> <span class="badge-pop ct-green">4</span>
</div>
<div class="basic-badge">
<img src="img.svg-url" alt="favorite" /> <span class="badge-pop ct-red">4</span>
</div>
<div class="basic-badge">
<img src="img.svg-url" alt="cart" /> <span class="badge-pop ct-violet">4</span>
</div>
Large Badge
Large badge which is mostly usefull in larger viewports. to use
simply add large-badge
class in component.
<div class="large-badge"> <img src="img.svt-url" alt="mail" />
<span class="large-pop">4</span> </div>
<div class="large-badge"> <img src="img.svt-url" alt="favorite" />
<span class="large-pop ct-red">4</span> </div>
Badge on Button
Badge for CTA buttons in your web app. add
btn-badge
class to use.
<div class="basic-badge">
<button class="btn-badge">Action</button>
<span class="badge-pop">4</span>
</div>
Badge on Avatar
Badge on avatar is used to check wether the user in online or offline.
<div class="basic-badge"> <img src="img-url" alt="" class="ct-avatar ct-lg" />
<span class="plane-badge"></span>
</div>
<div class="basic-badge"> <img src="img-url" alt="" class="ct-avatar ct-lg" />
<span class="plane-badge"></span>
</div>
Button
Buttons are most important component of a web page also term as CTA(call to action). We have different types of button to give user simple and clean experience.
Primary Button
Primary buttons are the main buttons or CTA of the page. use
ct-btn
class to use primary button. it also has four
colors which can you use adding respective classes.
ct-red, ct-blue, ct-green, ct-gray
<button class="ct-btn ct-red">Primary</button>
<button class="ct-btn ct-blue">Primary</button>
<button class="ct-btn ct-green">Primary</button>
<button class="ct-btn ct-gray">Primary</button>
Link Button
Link buttons are usefull to link other pages like social media
handles or wiki of some terms. Add
ct-red-bd, ...
classes to watch in action.
<button class="ct-btn ct-red-bd">Link</button>
<button class="ct-btn ct-blue-bd">Link</button>
<button class="ct-btn ct-green-bd">Link</button>
<button class="ct-btn ct-gray-bd">Link</button>
Icon Button
Buttons with icons also very usefull for the people who don't understands a language or can't read. We have four types of icon buttons shown below to use add respective classes.
<button class="ct-btn ct-addcart">
<span class="material-icons">shopping_cart</span>
ADD TO CART
</button>
<button class="ct-btn ct-wishlist">
<span class="material-icons">favorite</span>
WISHLIST
</button>
<button class="ct-btn ct-pay">
<span class="material-icons">attach_money</span>
PAYMENT
</button>
<button class="ct-btn ct-store">
<span class="material-icons">store</span>
STORE
</button>
Floating Button
Floating buttons to show a list on button click or it can be use for search bar.
<button class="ct-btn">
<span class="material-icons ct-float">search</span></button>
<button class="ct-btn"><span class="material-icons ct-float">add</span>
</button>
<button class="ct-btn">
<span class="material-icons ct-float">save</span>
</button>
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.
Basic input
Basic input field with label. Include ct-input
class
to use.
<div class="ct-input-div">
<label for="ct-input">Label*</label>
<input type="text" id="ct-input" class="ct-input" placeholder="Basic input" />
</div>
Input with Icon
Input with icons, we have two types 1. input with error 2. input with success
<div class="ct-input-error">
<input type="text" class="ct-error-icon" name="input" placeholder="input text"/>
<span class="material-icons">warning_amber</span>
</div>
<div class="ct-input-check">
<input type="text" class="ct-check-icon" name="input" placeholder="input text"/>
<span class="material-icons">done</span>
</div>
Input types
Checkbox and radio buttons are use to make a choice. to agree a policy, and choose the gender.
<div class="ct-wrapper">
<input type="checkbox" checked id="checkbox1" class="ct-checkbox"/>
<label for="checkbox1">Checked</label> </div>
<div class="ct-wrapper">
<input type="checkbox" id="checkbox2" class="ct-checkbox" disabled/>
<label for="checkbox2">Checkbox</label> </div>
<div class="ct-wrapper">
<input type="radio" name="radio" id="radio1" class="ct-radio" />
<label for="radio1">Male</label> </div>
<div class="ct-wrapper">
<input type="radio" class="ct-radio" name="radio" id="radio2" />
<label for="radio2">Female</label> </div>
Input form
Every site has a form to get data of user it can be usefull in different ways. You can directly use below form dy copy and pasting into your page.
<form class="ct-form"> <h2>Sign up</h2> <div class="ct-input-div">
<input type="text" class="ct-input" placeholder="Enter name..." required /> </div>
<div class="ct-input-error">
<input type="email" class="ct-error-icon" placeholder="Email..." required />
<span class="material-icons">warning_amber</span> </div>
<div class="ct-input-check">
<input type="tel" class="ct-check-icon" placeholder="Phone No..." required />
<span class="material-icons">done</span> </div>
<div class="ct-checkbox-div">
<input type="checkbox" id="checkbox3" required class="ct-checkbox" />
<label for="checkbox3">Privacy</label> </div>
<div class="ct-radio-div">
<input type="radio" id="radio3" required class="ct-radio" />
<label for="radio3">Male</label> </div>
<div class="ct-radio-div"> <input type="radio" id="radio4" class="ct-radio" required />
<label for="radio4">Female</label> </div>
<button class="ct-form-btn" type="submit">SUBMIT</button>
</form>
Image
Image Components are used to dsiplay Images on websites, which are screen responsive. They expand upto the width of the container they are in.
Image in size
This are default square images with three sizes.
ct-img-sm | small, ct-img-md | medium, ct-img-lg | large.
<img src="img-url" lass="ct-img-sm" alt="fish"/>
<img src="img-url" class="ct-img-md" alt="fish"/>
<img src="img-url" class="ct-img-lg" alt="fish"/>
Round image
Round images are used as profile or logo also.
<img src="image-url" alt="fish" class="ct-img-round ct-img-sm" />
<img src="image-url" alt="fish" class="ct-img-round ct-img-md" />
<img src="image-url" alt="fish" class="ct-img-round ct-img-lg" />
Responsive image
Responsive images are much important because it can response to
the viewport, and we don't need to add styles for different
viewports. we have below example of responsive image which adjust
its width
and height
respect to its
parent element.
<div class="ct-landing-div">
<img src="your-img-url" alt="fish" class="ct-img" />
</div>
Card
Cards are boxes that display content and actions. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
Cards with buttons, badges, icons and Text overlay
Cards are the important component in e-commerce site. We can show our product, its stats and price in single card.
Product name
Product by DevLorem ipsum dolor sit, amet consectetur adipisicing.
Product name
Product by DevLorem ipsum dolor sit amet, consectetur adipisicing.
Product name
Product by DevLorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium, blanditiis!
Simple card
<a class="ct-basic-card">
<img src="your-img-url" alt="fish" class="ct-card-img" />
<div class="ct-product-stats"> <h3>Product name</h3> <small>Product by Dev</small>
<p class="ct-product-info"> Lorem ipsum dolor sit, amet consectetur adipisicing.</p>
<div class="ct-card-btns"> <button class="ct-btn ct-gray-bd">ADD TO CART</button>
<button class="ct-btn ct-blue">BUY NOW</button> </div> </div>
</a>
Card with badge and buttons
<a class="ct-basic-card ct-card-badge-div">
<span class="titled-badge ct-violet ct-card-badge">NEW</span>
<span class="material-icons ct-card-wish">favorite</span>
<img src="your-img-url" alt="fist" class="ct-card-img"/>
<div class="ct-product-stats"><h3>Product name</h3><small>Product by Dev</small>
<p class="ct-product-info">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<div class="ct-card-btns"><button class="ct-btn ct-ebtn ct-addcart">
<span class="material-icons">shopping_cart</span>ADD TO CART</button>
<button class="ct-btn ct-ebtn ct-pay"><span class="material-icons">attach_money
</span>BUY</button></div></div>
</a>
Card on Text overlay
<a class="ct-basic-card">
<img src="your-img-url" alt="fish" class="ct-card-img"/>
<div class="ct-product-stats"> <div class="product-title">
<h3>Product name</h3> <small>Product by Dev</small> </div>
<p class="ct-product-info"> Lorem, ipsum dolor sit
amet consectetur adipisicing elit. Laudantium, blanditiis! </p>
<div class="ct-card-btns"> <button class="ct-btn ct-gray-bd">ADD TO CART</button>
<button class="ct-btn ct-blue">BUY NOW</button> </div> </div>
</a>
Horizontal card/ Text card
Horizontal card and Text only cards to inform user about your new idea.
Product name
Product by DevLorem ipsum dolor sit amet consectetur adipisicing.
Thank you for visiting!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit quod mollitia explicabo quo iusto
Horizontal card
<a class="ct-horizontal-card ct-card-badge-div">
<span class="material-icons ct-card-close">close</span>
<img src="your-img-url" class="ct-card-img ct-img-lg" alt="product"/>
<div class="ct-product-stats"><h3>Product name</h3>
<small>Product by Dev</small><p class="ct-product-info">
Lorem ipsum dolor sit amet consectetur adipisicing. </p>
<div class="ct-card-btns"><button class="ct-btn ct-gray-bd">THANKS</button>
<button class="ct-btn"><span class="material-icons wishlist-btn">favorite</span>
<span class="material-icons share-btn">share</span> </button> </div> </div>
</a>
Text only card
<a class="ct-basic-card text-card">
<span class="material-icons ct-card-close">close</span>
<div class="text-container"> <h2>Thank you for visiting!</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit quod mollitia explicabo quo iusto
</p> </div> <div class="text-card-btn">
<span class="material-icons wishlist-btn">favorite</span>
<span class="material-icons share-btn">share</span> </div>
</a>
Text Utilities
Text component is the used to render text and paragraphs within an interface. It renders all paragraph, Headings tag by default.
Text Headings
Text Utilities for Headings only, we have six heading types with
different font sizes. just add a classes to use
ct-h6, ct-h5, ct-h4, ct-h3, ct-h2, ct-h1
.
h6. "this" this is a javascript joke
h5. "this" this is a javascript joke
h4. "this" this is a javascript joke
h3. "this" this is a javascript joke
h2. "this" this is a javascript joke
h1. "this" this is a javascript joke
<div class="ct-text-headings">
<h6 class="ct-h6">h6. "this" this is a javascript joke</h6>
<h5 class="ct-h5">h5. "this" this is a javascript joke</h5>
<h4 class="ct-h4">h4. "this" this is a javascript joke</h4>
<h3 class="ct-h3">h3. "this" this is a javascript joke</h3>
<h2 class="ct-h2">h2. "this" this is a javascript joke</h2>
<h1 class="ct-h1">h1. "this" this is a javascript joke</h1>
</div>
Text alignments
Three types of text alignments, use
ct-text-start
class for align text at start,
ct-text-center
for center,
ct-text-end
for end.
"this" this is a javascript joke
"this" this is a javascript joke
"this" this is a javascript joke
<p class="ct-text-start">"this" this is a javascript joke</p>
<p class="ct-text-center">"this" this is a javascript joke</p>
<p class="ct-text-end">"this" this is a javascript joke</p>
Gray Text
Gray text for better reading experience. add
ct-text-gray
class.
"this" this is a javascript joke.
<p class="ct-text-gray">"this" this is a javascript joke.</p>
Lists
List component is used to display list items. It renders a unorder-lists by default. But we also have some ordered as well as icons with list also.
Simple lists
Simple list components ordered and unorder. use respective classes.
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
<ul class="ct-ul-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ol class="ct-ol-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
Icon lists
List with icons good to use for better UX to user. add respective classes to ul element.
<ul class="ct-icon-list">
<li><span class="material-icons">check_circle</span>Item</li>
<li><span class="material-icons">check_circle</span>Item</li>
<li><span class="material-icons">check_circle</span>Item</li>
<li><span class="material-icons">info</span>Item</li>
</ul>
Stacked lists
Stacked lists are also usefull to display list of users with name, avatar, and status. In that case use our stacked list.
-
User name
Online -
User name
Offline -
User name
Online -
User name
Online
<ul class="ct-stacked-list">
<li>
<img src="img-url" class="ct-round ct-md" alt="fallback"/>
<div class="ct-list-item"><h4>User name</h4><small>Online</small></div>
</li>
<li>
<img src="img-url" class="ct-round ct-md" alt="fallback"/>
<div class="ct-list-item"><h4>User name</h4><small>Offline</small></div>
</li>
<li>
<img src="img-url" class="ct-round ct-md" alt="fallback"/>
<div class="ct-list-item"><h4>User name</h4><small>Offline</small></div>
</li>
<li>
<img src="img-url" class="ct-round ct-md" alt="fallback"/>
<div class="ct-list-item"><h4>User name</h4><small>Offline</small></div>
</li>
</ul>
Navbar
Navigation bar is first and most important component of any website. Without navbar user will not know which brand is it, where to look more and to connect with brand.
Navbar
We are providing the navbar for e-commerce site you can make changes on your own, for your personal use cases. Make sure to copy and check all the classes are same.
-
Link 1
-
Link 2
<nav class="nav-bar">
<div class="ct-nav-logo"> <h1>Navbar</h1> </div>
<div class="ct-right-nav"> <div class="nav-searchbar">
<input type="search" placeholder="Search..." class="ct-input" />
<button class="ct-btn ct-gray">Search</button>
</div>
<div class="ct-nav-user"> <div class="ct-nav-icons"> <div class="basic-badge">
<span class="material-icons"> shopping_cart </span>
<span class="badge-pop ct-blue">4</span>
</div> Cart </div>
<div class="ct-nav-icons"> <div class="basic-badge">
<span class="material-icons"> person </span>
</div> Sign in </div> </div> </div>
</nav>
Modal
Modals are a variant of dialog used to present critical information or request user input needed to complete a user’s workflow.
Demo Modal
Below is a modal body we are Crafted for you.
Modal title
Modal body text goes here.
<div class="ct-modal">
<div class="ct-modal-header">
<h2>Modal title</h2>
<span class="material-icons">close</span>
</div>
<div class="ct-modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="ct-modal-footer">
<button class="ct-btn ct-blue">Save</button>
<button class="ct-btn ct-gray">Close</button>
</div>
</div>
Live Modal
Click on button to watch modal in action. Make sure when you use this modal its position must be absolute to the body.
Modal title
Modal body text goes here.
<button class="ct-btn ct-blue ct-modal-btn" id="modal-btn"> Launch Demo Modal </button> ---------------------------------------------------------- <div class="ct-modal-dialog"> <div class="ct-modal ct-modal-action" id="ct-modal"> <div class="ct-modal-header"> <h2>Modal title</h2> <span class="material-icons modal-close">close</span> </div> <div class="ct-modal-body"> <p>Modal body text goes here.</p> </div> <div class="ct-modal-footer"> <button class="ct-btn ct-blue">Save</button> <button class="ct-btn ct-gray">Close</button> </div> </div> </div>
JS of component- const modalBtn = document.querySelector("#modal-btn"); const ctModal = document.querySelector("#ct-modal"); const ctModalParent = document.querySelector(".ct-modal-dialog"); const modalClose = document.querySelector(".modal-close"); const body = document.querySelector("body"); modalBtn.addEventListener("click", () => { ctModal.classList.add("ct-modal-active"); ctModalParent.classList.add("ct-dialog-active"); }); modalClose.addEventListener("click", () => { ctModal.classList.remove("ct-modal-active"); ctModalParent.classList.remove("ct-dialog-active"); });
Rating.
Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.
<div class="ct-rating"> <a class="ct-star"> <span class="material-icons">grade</span></a> <a class="ct-star"> <span class="material-icons">grade</span></a> <a class="ct-star"> <span class="material-icons">grade</span></a> <a class="ct-star"> <span class="material-icons">grade</span></a> <a class="ct-star"> <span class="material-icons">grade</span></a> </div>
Js code for component - const ctRating = document.querySelector(".ct-rating"); const ctStar = document.querySelectorAll(".ct-star"); ctStar.forEach((star, index) => { star.addEventListener("click", (e) => { e.preventDefault(); ctRating.classList.add("disabled"); ctStar.forEach((newStar, newIndex) => { if (newIndex <= index) { newStar.classList.add("active"); } }); }); });
Toast.
Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
Simple & Icon toast
Below we have simple toast and toast with icons to use make sure to add classes respectively.
Your draft has been discarded.
Your draft has been archived.
<div class="ct-toast">
<p>Your draft has been discarded.</p>
</div>
<div class="ct-toast-undo">
<p>Your draft has been archived.</p>
<button class="ct-undo">
<span class="material-icons">unarchive</span>
</button>
</div>
Toast in action
Make sure to check class names and Javascript file when you are using it in your site.
<button class="ct-btn ct-blue" id="ct-toast-btn">Show Toast</button> <div class="ct-toast-undo ct-toast-action"> <p>Message has been sent to your Ex.</p> <a id="ct-undo" class="ct-undo"> <span class="material-icons">close</span> </a> </div>
Js code for component - const toastBtn = document.querySelector("#ct-toast-btn"); const toast = document.querySelector(".ct-toast-action"); const undoBtn = document.querySelector("#ct-undo"); toastBtn.addEventListener("click", () => { toast.classList.add("ct-toast-active"); }); undoBtn.addEventListener("click", () => { toast.classList.remove("ct-toast-active"); });
Grids
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
Two col grid
The ct-grid
class makes the elements display : grid, and
the ct-grid-2
class adds two columns which takes 50%, 50%
width of parent element.
<main class="ct-grid-2 ct-grid">
<section class="ct-child-1 ct-child">Col-1</section>
<section class="ct-child-2 ct-child">Col-2</section>
</main>
Three col grid
The ct-grid
class makes the elements display : grid, and
the ct-grid-3
class adds three columns which takes equal
width of parent element.
<main class="ct-grid-3 ct-grid">
<section class="ct-child-1 ct-child">Col-1</section>
<section class="ct-child-2 ct-child">Col-2</section>
<section class="ct-child-3 ct-child">Col-3</section>
</main>
Slider
Sliders allow users to make selections from a range of values.
Two Way slider
Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, prices, brightness, or applying image filters. Just copy the below code to use it.
Slider
<main class="ct-slider-wrapper">
<header class="ct-slider-header">
<h1>Slider</h1>
</header>
<div class="ct-slider-price">
<div class="ct-slider-field">
<span>Min</span>
<input type="number" value="1000" class="ct-slider-input">
</div>
<span class="ct-slider-field-saperator">-</span>
<div class="ct-slider-field">
<span>Max</span>
<input type="number" value="10000" class="ct-slider-input">
</div>
</div>
<div class="ct-slider-body">
<div class="ct-slider-progress"></div>
</div>
<div class="ct-slider-range">
<input type="range" class="ct-range-min ct-range" min="0" max="10000" value="1000" step="100">
<input type="range" class="ct-range-max ct-range" min="0" max="10000" value="9000" step="100">
</div>
</main>