Coats Digital
Design Language V.2
Material Design

Introduction

Get started with Bootstrap 5-beta-1 based Coats Digital Design Language with Material Design. The coats official framework for building responsive, mobile-first sites.

CSS

Copy-paste the stylesheet 'link' into your 'head' before all other stylesheets to load our CSS.

Javascript

Place the following 'script's tag near the end of your pages, right before the closing 'body' tag, to enable them. jQuery must come first, then JavaScript plugin and then custom javascript file.

Demo

Note: Below are examples of some basic elements of Coats Digital Design Language Material Design.

Inputs

Docs
Elements:
Forms:
 
Forgot password?

Not a member? Register

or sign up with:

or sign up with:

Buttons

Docs
Normal Buttons:
Outline Buttons:
Floating Buttons:
Social Buttons:

Dropdown

Docs

Spinners

Docs

Progress

Docs
Thin:
Thick:
25%
50%
75%
100%
25%
50%
75%
100%

Note

Docs

Note primary: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note secondary: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note success: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note danger: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note warning: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note info: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note light: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Alerts

Docs