Drift.css

It is a light-weight and responsive open source CSS library.

There are 2 ways to get started with Drift CSS library in your projects. You can either install manually, or from CDN.

⚬ Install manually

Include drift.css located in /dist in your website or Web app. 

						
<link rel="stylesheet" href="drift.min.css">

⚬ Install from CDN

Use the following CDN link to include driftcss in your project. 

						
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/duhbhavesh/driftcss@main/css/minified/drift.min.css">

Note: Driftcss uses fontawesome library for the icons, kindly import them it into your files before using driftcss.

Alerts

Alerts can be used to provide feedback messages to users. Different types of alerts are available for different types of messages.

Default alert

This is a default alert

Primary alert

This is a primary alert

Success alert

This is a success alert

Warning alert

This is a warning alert

Error alert

This is a error alert

Different alerts background color can be used by changing the status of alert.
Example: .alert-warning to .alert-success 

						
<div class="alert alert-warning"> 
	<h4 class="alert-heading"> 
		<span><i class="far fa-check-circle"></i></span> Warning alert 
	</h4> 
	<p>This is a warning alert</p> 
</div>

<div class="alert alert-success"> 
	<h4 class="alert-heading"> 
		<span><i class="far fa-check-circle"></i></span> Success alert 
	</h4> 
	<p>This is a success alert</p> 
</div>

Avatars

Avatars are user profile pictures.

⚬ Avatar Image

Use avatar-1, avatar-2, avatar-3 & avatar-4 in img src for different avatars below. 

						
<img 
	class="avatar avatar-1" 
	src="https://res.cloudinary.com/duhbhavesh/image/upload/v1615884024/driftcss/static/avatar-1.png" 
	alt="" 
/>

<img 
	class="avatar avatar-2" 
	src="https://res.cloudinary.com/duhbhavesh/image/upload/v1615884024/driftcss/static/avatar-2.png" 
	alt="" 
/> 

<img 
	class="avatar avatar-3" 
	src="https://res.cloudinary.com/duhbhavesh/image/upload/v1615884024/driftcss/static/avatar-3.png" 
	alt="" 
/> 

<img 
	class="avatar avatar-4" 
	src="https://res.cloudinary.com/duhbhavesh/image/upload/v1615884024/driftcss/static/avatar-4.png" 
	alt="" 
/>

⚬ Avatar Background

Use background-color and color to change avatar colors

avatar
avatar
avatar
avatar 
						
<div class="avatar-bg avatar-bg-1"> 
	<span class="avatar-bg-text">avatar</span> 
</div>

<div class="avatar-bg avatar-bg-2"> 
	<span class="avatar-bg-text">avatar</span> 
</div>

<div class="avatar-bg avatar-bg-3"> 
	<span class="avatar-bg-text">avatar</span> 
</div>

<div class="avatar-bg avatar-bg-4"> 
	<span class="avatar-bg-text">avatar</span> 
</div>
						
					
						
.avatar-bg-1 {
	background-color: red;
}

.avatar-bg-2 {
	background-color: cyan;
}

Badges

Badges can be used for labeling components. Different types of badges are available for different types of labeling.

Default Primary Success Secondary Error

⚬ Badges Pill

The class .badge-pill can be used to create round, pill-like badges.

Default Primary Success Secondary Error 
						
<!-- Badges default --> 
<span class="badge badge-default">Default</span> 
<span class="badge badge-primary">Primary</span> 
<span class="badge badge-success">Success</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-error">Error</span>


<!-- Badges pill --> 
<span class="badge badge-default badge-pill">Default</span> 
<span class="badge badge-primary badge-pill">Primary</span> 
<span class="badge badge-success badge-pill">Success</span>
<span class="badge badge-secondary badge-pill">Secondary</span>
<span class="badge badge-error badge-pill">Error</span>

Buttons

Buttons include simple button styles for actions in different types and sizes.

⚬ Buttons default

Link 
						
<!-- Common Buttons --> 
<button class="btn" type="button">Default</button> 
<button class="btn btn-primary" type="button">Primary</button> 
<button class="btn btn-secondary" type="button">Secondary</button> 
<button class="btn btn-error" type="button">Error</button> 
<a href="#" class="btn btn-link" role="button">Link</a>

⚬ Buttons pill

The class .btn-pill can be used to create round, pill-like Buttons.

Link 
						
<!-- Pill Buttons --> 
<button class="btn btn-pill" type="button">Default</button> 
<button class="btn btn-primary btn-pill" type="button">Primary</button> 
<button class="btn btn-secondary btn-pill" type="button">Secondary</button> 
<button class="btn btn-error btn-pill" type="button">Error</button> 
<a href="#" class="btn btn-link btn-pill" role="button">Link</a>

⚬ Button icons

Icon like buttons.

For top right button use .btn-top-right by giving position: relative to the parent element. 

						
<!-- Button icons --> 
<button class="btn btn-square" type="button">&times;</button> 
<button class="btn btn-square btn-primary" type="button">&plus;</button> 
<button class="btn btn-square btn-circle" type="button"> &times;</button> 
<button class="btn btn-square btn-primary btn-circle" type="button">&plus;</button>

⚬ Floating Action Buttons

A floating action button (FAB) performs the primary, or most common, action on a screen. 

						
<!-- Floating Action Buttons --> 
<button class="btn btn-square btn-primary btn-circle btn-fab btn-fab-edit" >
 <i class="fas fa-pen"></i> 
</button>

<button class="btn btn-square btn-primary btn-circle btn-fab btn-fab-arrow" > 
 <i class="fas fa-angle-double-up"></i> 
</button>

Cards

A card is a self-contained, replicable type.

10th Mar, 2021

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, distinctio. amet consectetur adipisicing elit...

10th Mar, 2021

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, distinctio. amet consectetur adipisicing elit...

Sweatshirt Relaxed Fit

₹649 ₹1299

4.5/5.0

MacBook Air

Our thinnest, lightest notebook, completely transformed by the Apple M1 chip. CPU speeds up to 3.5x faster.

₹92900 ₹1,20,999

4.5/5.0 
						
<!-- Card badge --> 
<div class="card card-badge"> 
	<img class="card-img" src="https://res.cloudinary.com/duhbhavesh/image/upload/v1615908702/driftcss/static/card-1.jpg" alt="" /> 
	<span class="badge badge-default">10th Mar, 2021</span> 
	<p class="card-para"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, distinctio. amet consectetur adipisicing elit... </p> 
	<button class="btn btn-primary btn-pill" type="button">Read More</button> 
</div>


<!-- Card dismiss --> 
<div class="card card-dismiss"> 
	<img class="card-img" src="https://res.cloudinary.com/duhbhavesh/image/upload/v1615911023/driftcss/static/card-3.jpg" alt="" /> 
	<button class="btn btn-square btn-circle btn-top-right" type="button" > &times; </button> 
	<span class="badge badge-default">10th Mar, 2021</span> <p class="card-para"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, distinctio. amet consectetur adipisicing elit... </p> 
	<button class="btn btn-primary btn-pill" type="button">Read More</button> 
</div>


<!-- Card Product --> 
<div class="card product product-card"> 
	<button class="btn btn-square btn-circle btn-top-right" type="button" > 
	<i class="far fa-heart"></i> </button> <div class="product-image"> 
	<img class="card-img" src="/static/hoodie.jfif" alt="" /> </div> 
	<div class="product-details"> 
		<h3 class="product-heading"> 
		<a id="product-title" href="#">Sweatshirt Relaxed Fit</a> 
		</h3> 
		<div class="product-price"> 
			<p class="new-price"> ₹649 <span class="old-price">₹1299</span> </p> 
		</div> 
	</div> 
	<div class="product-details"> 
		<div class="rating"> 
			<span><i class="fas fa-star"></i></span> 
			<span><strong>4.5</strong>/5.0</span> 
		</div> 
		<div class="cart"> 
		<button class="btn btn-primary btn-cart" type="button"> Add to Cart </button> 
		</div> 
	</div> 
</div>


<!-- Card overlay --> 
<div class="card card-overlay"> 
	<img class="card-img overlay-img" src="https://res.cloudinary.com/duhbhavesh/image/upload/v1616150651/driftcss/static/card-img-4.jpg" alt="" /> 
	<div class="overlay-text"> 
		<h2 class="overlay-heading">MacBook Air</h2> 
		<p class="card-para card-content"> Our thinnest, lightest notebook, completely transformed by the Apple M1 chip. CPU speeds up to 3.5x faster. </p> 
	<div class="product-price"> 
		<p class="new-price"> ₹92900 
			<span class="old-price">₹1,20,999</span> 
		</p> 
	</div> 
</div> 
	<div class="product-details overlay-details"> 
		<div class="product-rating"> 
			<span><i class="fas fa-star"></i></span> 
			<span><strong>4.5</strong>/5.0</span> 
		</div> 
		<div class="product-cart"> 
			<button class="btn btn-primary btn-pill btn-cart" type="button"> Add to Cart </button> 
		</div> 
	</div> 
</div>

Images

Images can be made responsive using the .img-responsive class,

⚬ Image Responsive

Mountain Image

⚬ Image Rounded & Thumbnail

Mountain Image Mountain Image 
							
<!-- Responsive Image -->
<img class="img-responsive" src="/img.jpg" alt="..." /> 

<!-- Image Rounded --> 
<img class="img-responsive img-rounded" src="/img.jpg" alt="..." /> 

<!-- Image Thumbnail --> 
<img class="img-responsive img-thumbnail" src="/img.jpg" alt="..." />

Inputs

Simple text form elements

⚬ Input Defaults

							
<!-- Input Default --> 
<div class="input-group"> 
	<label class="input-label" for="input-example-1">Name</label> 
	<input class="input-box" type="text" id="input-example-1" placeholder="Name" /> 
</div> 

<div class="input-group"> 
	<label class="input-label" for="input-example-2">E-mail</label> 
	<input class="input-box" type="email" id="input-example-2" placeholder="E-mail" /> 
</div>

⚬ Input Validation

The name is valid.

Password must be at least 8 characters. 

							
<!-- Input Validation --> 
<div class="input-group"> 
	<label class="input-label" for="input-example-1">Name</label> 
	<input class="input-box is-success" type="text" id="input-example-1" placeholder="..." required /> 
	<p class="input-hint input-hint-success">The name is valid.</p> 
</div> 

<div class="input-group"> 
	<label class="input-label" for="input-example-2">Password</label> 
	<input class="input-box is-error" type="password" id="input-example-2" placeholder="..." required /> 
	<p class="input-hint input-hint-error"> Password must be at least 8 characters. </p> 
</div>

Lists

The List is a very versatile and common way to display items.

⚬ List Default

  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.

⚬ List Stack

  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
						
<!-- List Default --> 
<ul class="list list-default"> 
	<li class="list-item"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li> 
	<li class="list-item"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li> 
	<li class="list-item"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li> 
	<li class="list-item"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li> 
</ul>


<!-- List Stack --> 
<ul class="list list-stack"> 
	<li class="list-item"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li> 
	<li class="list-item"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li> 
	<li class="list-item"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li> 
	<li class="list-item"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. </li> 
</ul>

Modals

Modals are flexible dialog prompts.

						
<!-- Modal --> 
<div class="modal" id="modal"> 
	<h3 class="modal-title">This is a modal</h3> 
	<p class="modal-para"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae, tempore? </p> 
	<button class="btn btn-square btn-circle btn-top-right" id="close-modal-btn-icon" type="button" > &times; </button> 
	<button class="btn btn-primary" type="button" id="close-modal-btn"> Close Modal </button> 
</div>

Ratings

Ratins allow the users to share their opinion about the product, documentation page, photo and more.

4.5/5.0 
						
<!-- Rating --> 
<div class="rating"> 
	<span><i class="fas fa-star"></i></span> 
	<span><strong>4.5</strong>/5.0</span> 
</div>


<div class="rating"> 
	<span><i class="fas fa-star"></i></span> 
	<span><i class="fas fa-star"></i></span> 
	<span><i class="fas fa-star"></i></span> 
	<span><i class="fas fa-star"></i></span> 
	<span><i class="fas fa-star fa-star-half"></i></span> 
</div>

Grids

The grid system in Driftcss is a flexbox based.

1
2
3
4
5
1
2 
						
<!-- Grids --> 
<div class="row"> 
	<div class="column"><span class="column-demo">1</span></div> 
	<div class="column"><span class="column-demo">2</span></div> 
	<div class="column"><span class="column-demo">3</span></div> 
	<div class="column"><span class="column-demo">4</span></div> 
	<div class="column"><span class="column-demo">5</span></div> 
</div>


<div class="row"> 
	<div class="column"><span class="column-demo">1</span></div> 
	<div class="column column-50 column-offset-25"> <span class="column-demo">2</span> </div> 
</div>

Toast

Toasts provide brief messages about app processes. The component is also known as a Snackbar.

Open Success Toast
This is an info message!
This is a success message!
This is an error message!
This is a warning message!
This is a success message!
						
<!-- Toast --> 
<div class="toast toast-info"> 
	<div class="toast-details"> 
		<div class="toast-icon"><i class="fas fa-info-circle"></i></div> 
		<div class="toast-msg">This is an info message!</div> 
	</div> 
	<div class="toast-icon-close"><i class="fas fa-times"></i></div> 
</div>


<div class="toast toast-success"> 
	<div class="toast-details"> 
		<div class="toast-icon"><i class="fas fa-check-circle"></i></div> 
		<div class="toast-msg">This is an success message!</div> 
	</div> 
	<div class="toast-icon-close"><i class="fas fa-times"></i></div> 
</div>


<div class="toast toast-error"> 
	<div class="toast-details"> 
		<div class="toast-icon"><i class="fas fa-exclamation-circle"></i></div> 
		<div class="toast-msg">This is an error message!</div> 
	</div> 
	<div class="toast-icon-close"><i class="fas fa-times"></i></div> 
</div>


<div class="toast toast-warning"> 
	<div class="toast-details"> 
		<div class="toast-icon"><i class="fas fa-exclamation-triangle"></i></div> 
		<div class="toast-msg">This is an warning message!</div> 
	</div> 
	<div class="toast-icon-close"><i class="fas fa-times"></i></div> 
</div>

Typography

Typography contains default styles of headings semantic text list etc.

Heading <h1> 2rem

Heading <h2> 1.8rem

Heading <h3> 1.6rem

Heading <h4> 1.4rem

Heading <h5> 1.2rem
Heading <h6> 1rem