Introduction

Build fast and responsive websites with Dation CSS. Getting started is really quick and easy. Just copy and the below code in the head of your html document

Ideally the above link should be the top most link among your css links so that you can override it according to your taste by putting your custom css below it.

Avatar

Image avatars can be created by adding avatar class to the <img> element

You can change the size of the avatar with the height and width CSS properties. For perfectly rounded images make sure that height and width of the image are equal.

Badge

Badges can be created by adding badge and top/bottom class to the element.

Badge on Icons

Adding a class top to a <div> will make the badge go on top relative to the icon.

Badge on Avatars

Adding a class bottom to a <div> will make the badge go tp bottom relative to the avatar. This is useful to show if a user is online or not

In addition to the badge class, adding classes online or offline will change the color of the badges as shown above.

Button

Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take. They are typically placed throughout your UI.

Every button should have a base class of btn Classes x-small small medium large x-large should be used to control the size of the button.

Primary Button

Primary button matches with the --primary-color of your website. By defualt buttons are primary unless you specify otherwise

Button Modern

In order to use modern buttons, add btn-modern class along with btn in the <button>
Add the class shadow for a even modern look.

Button Classic

In order to use classic buttons, add btn-classic class along with btn in the <button>
Add the class shadow for the shadow effect.

Secondary Button

Secondary button matches with the --secondary-color of your website. Add class secondary along with btn to make the button secondary.

Button Modern

In order to use modern buttons, add btn-modern class along with btn in the <button>
Add the class shadow for a even modern look.

Button Classic

In order to use classic buttons, add btn-classic class along with btn in the <button>
Add the class shadow for the shadow effect.

Icon Button

Icon Button is no different than any other button, it takes the btn class. Just add svg or any type of icon instead of text in the button element

Floating Action Button

Adding class btn-floating along with btn will add a floating action button on the bottom right of the screen. This site's mobile version uses a floating action button only.

Card

A card is a content container. Every card should have a card class. Dation provides you with different types of cards.

Classic Card

To add a classic card, add card-classic class along with the card class.

Product Name Description Price Discount

Modern Card

Modern cards have cureved edges which gives a modern look. Adding card-modern class along with card will give you a modern card. Adding shadow to the card will give it a shadow.

Product Name Description Price Discount

X

Text Card

These are text only cards without any images. Adding card-text along with card class will give you text card.

Images

Images are an essential part for any website. Adding img class will make them responsive. If you want round images, add avatar class. For perfectly round images make sure the height and width of the image are same.

Textbox

Textbox are used to take input from the user. Adding input-text class to the <input> element will give you a modern and responsive textbox