CLib

The CSS Library which supports Bootstrap 4.

Get started

Import content:

CSS:

<link rel="stylesheet" href="css/clib.min.css">

JS:

<script src="js/clib.min.js"></script>

Starterfile:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/clib.min.css">
  <link rel="stylesheet" href="css/style.min.css">
  <title>Document</title>
</head>
<body>

  <script src="js/clib.min.js"></script>
</body>
</html>

Download

Get Here Get Source code

Buttons

Filled

Example

<button class="mat-button button-dark mr-2 mt-3">My button.</button>

Left to right

Example

<button class="mat-button button-ltr-dark mr-2 mt-3">My button.</button>

Right to left

Example

<button class="mat-button button-dark mr-2 mt-3">My button.</button>

Top to bottom

Example

<button class="mat-button button-ttb-dark mr-2 mt-3">My button.</button>

Bottom to top

Example

<button class="mat-button button-btt-dark mr-2 mt-3">My button.</button>

Stretched

Example

<button class="mat-button button-stretch-dark mr-2 mt-3">My button.</button>

Outlined

Example

<button class="mat-button dark-outline mr-2 mt-3">My button.</button>

Textstyles

Light

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam quam, adipisci nam eaque sit quos totam sapiente iusto nulla quis ea placeat possimus nemo aspernatur ad, cupiditate quibusdam perspiciatis aliquam cumque molestiae inventore, nihil doloribus dolores. Eaque est sunt corporis consequuntur! Tempore impedit debitis cum! Vel magni optio ad distinctio veniam ipsum voluptatibus delectus ea neque, dolorem blanditiis dolor suscipit sed unde, saepe quo, soluta tempore. Quam sit nam sint adipisci soluta quos perferendis obcaecati.

Example

<p class="ts-light">Lorem ipsum dolor sit.</p>

Medium

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam quam, adipisci nam eaque sit quos totam sapiente iusto nulla quis ea placeat possimus nemo aspernatur ad, cupiditate quibusdam perspiciatis aliquam cumque molestiae inventore, nihil doloribus dolores. Eaque est sunt corporis consequuntur! Tempore impedit debitis cum! Vel magni optio ad distinctio veniam ipsum voluptatibus delectus ea neque, dolorem blanditiis dolor suscipit sed unde, saepe quo, soluta tempore. Quam sit nam sint adipisci soluta quos perferendis obcaecati.

Example

<p class="ts-medium">Lorem ipsum dolor sit.</p>

Bold

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam quam, adipisci nam eaque sit quos totam sapiente iusto nulla quis ea placeat possimus nemo aspernatur ad, cupiditate quibusdam perspiciatis aliquam cumque molestiae inventore, nihil doloribus dolores. Eaque est sunt corporis consequuntur! Tempore impedit debitis cum! Vel magni optio ad distinctio veniam ipsum voluptatibus delectus ea neque, dolorem blanditiis dolor suscipit sed unde, saepe quo, soluta tempore. Quam sit nam sint adipisci soluta quos perferendis obcaecati.

Example

<p class="ts-bold">Lorem ipsum dolor sit.</p>

Underline

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam quam, adipisci nam eaque sit quos totam sapiente iusto nulla quis ea placeat possimus nemo aspernatur ad, cupiditate quibusdam perspiciatis aliquam cumque molestiae inventore, nihil doloribus dolores. Eaque est sunt corporis consequuntur! Tempore impedit debitis cum! Vel magni optio ad distinctio veniam ipsum voluptatibus delectus ea neque, dolorem blanditiis dolor suscipit sed unde, saepe quo, soluta tempore. Quam sit nam sint adipisci soluta quos perferendis obcaecati.

Example

<p class="ts-underline">Lorem ipsum dolor sit.</p>

Cursive

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam quam, adipisci nam eaque sit quos totam sapiente iusto nulla quis ea placeat possimus nemo aspernatur ad, cupiditate quibusdam perspiciatis aliquam cumque molestiae inventore, nihil doloribus dolores. Eaque est sunt corporis consequuntur! Tempore impedit debitis cum! Vel magni optio ad distinctio veniam ipsum voluptatibus delectus ea neque, dolorem blanditiis dolor suscipit sed unde, saepe quo, soluta tempore. Quam sit nam sint adipisci soluta quos perferendis obcaecati.

Example

<p class="ts-cursive">Lorem ipsum dolor sit.</p>

Colors

Color dark

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="color-dark">Lorem ipsum dolor sit.</p>

Color bright

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="color-bright">Lorem ipsum dolor sit.</p>

Color crimson

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="color-crimson">Lorem ipsum dolor sit.</p>

Color wine

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="color-wine">Lorem ipsum dolor sit.</p>

Color lime

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="color-lime">Lorem ipsum dolor sit.</p>

Color forest

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="color-forest">Lorem ipsum dolor sit.</p>

Color sky

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="color-sky">Lorem ipsum dolor sit.</p>

Color night

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="color-night">Lorem ipsum dolor sit.</p>

Color black

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="color-black">Lorem ipsum dolor sit.</p>

Color white

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="color-white">Lorem ipsum dolor sit.</p>

Color orange

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="color-orange">Lorem ipsum dolor sit.</p>

Color yellow

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="color-yellow">Lorem ipsum dolor sit.</p>

Color gray

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="color-gray">Lorem ipsum dolor sit.</p>

Backgrounds

Bg material dark

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="bg-mat-dark color-bright">Lorem ipsum dolor sit.</p>

Bg bright

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="bg-bright color-dark">Lorem ipsum dolor sit.</p>

Bg crimson

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="bg-crimson color-bright">Lorem ipsum dolor sit.</p>

Bg wine

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="bg-wine color-bright">Lorem ipsum dolor sit.</p>

Bg lime

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="bg-lime color-dark">Lorem ipsum dolor sit.</p>

Bg forest

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="bg-forest color-bright">Lorem ipsum dolor sit.</p>

Bg sky

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="bg-sky color-bright">Lorem ipsum dolor sit.</p>

Bg night

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="bg-night color-bright">Lorem ipsum dolor sit.</p>

Bg black

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="bg-black color-bright">Lorem ipsum dolor sit.</p>

Bg white

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="bg-white color-dark">Lorem ipsum dolor sit.</p>

Bg orange

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="bg-orange color-dark">Lorem ipsum dolor sit.</p>

Bg yellow

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="bg-yellow color-dark">Lorem ipsum dolor sit.</p>

Bg gray

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, soluta?

Example

<p class="bg-gray color-dark">Lorem ipsum dolor sit.</p>

Borders

Border-colors

Example

<div class="brd b-crimson">Lorem ipsum dolor sit.</div>

Border-width

Example

<div class="brd b-2 b-crimson">Lorem ipsum dolor sit.</div>

Border-styles

Example

<div class="brd b-2 b-dashed b-crimson">Lorem ipsum dolor sit.</div>

Transitions

Transition-speeds

Example

<button class="mat-button button-sky trans-fast">Lorem ipsum dolor sit.</button>

Filters

Blur filter

Example

<img src="https://picsum.photos/500/300" class="filter-blur" data-blur="5">
Warning: If no parameters are added, the default values will be used.

Gray filter

Example

<img src="https://picsum.photos/500/300" class="filter-gray">

Sepia filter

Example

<img src="https://picsum.photos/500/300" class="filter-sepia">

Drop shadow filter

Example

<img src="https://picsum.photos/500/300" class="filter-shadow" data-x="10" data-y="10" data-blur="10" data-color="#000000">
Warning: If no parameters are added, the default values will be used.

Opacity filter

Example

<img src="https://picsum.photos/500/300" class="filter-opacity" data-opacity="0.5">
Warning: If no parameters are added, the default values will be used.

Links

Left to right

.link-ltr-dark .link-ltr-bright .link-ltr-crimson .link-ltr-wine .link-ltr-lime .link-ltr-forest .link-ltr-sky
.link-ltr-night .link-ltr-white .link-ltr-black .link-ltr-orange .link-ltr-yellow .link-ltr-gray

Example

<a href="" class="link-ltr-dark color-dark">My wonderful link</a>

Right to left

.link-rtl-dark .link-rtl-bright .link-rtl-crimson .link-rtl-wine .link-rtl-lime .link-rtl-forest .link-rtl-sky
.link-rtl-night .link-rtl-white .link-rtl-black .link-rtl-orange .link-rtl-yellow .link-rtl-gray

Example

<a href="" class="link-rtl-dark color-dark">My wonderful link</a>

Middle to outer

.link-mto-dark .link-mto-bright .link-mto-crimson .link-mto-wine .link-mto-lime .link-mto-forest .link-mto-sky
.link-mto-night .link-mto-white .link-mto-black .link-mto-orange .link-mto-yellow .link-mto-gray

Example

<a href="" class="link-rtl-dark color-dark">My wonderful link</a>

Top bottom center

.link-tbc-dark .link-tbc-bright .link-tbc-crimson .link-tbc-wine .link-tbc-lime .link-tbc-forest .link-tbc-sky
.link-tbc-night .link-tbc-white .link-tbc-black .link-tbc-orange .link-tbc-yellow .link-tbc-gray

Example

<a href="" class="link-tbc-dark color-dark">My wonderful link</a>

Top bottom left

.link-tbl-dark .link-tbl-bright .link-tbl-crimson .link-tbl-wine .link-tbl-lime .link-tbl-forest .link-tbl-sky
.link-tbl-night .link-tbl-white .link-tbl-black .link-tbl-orange .link-tbl-yellow .link-tbl-gray

Example

<a href="" class="link-tbl-dark color-dark">My wonderful link</a>

Top bottom right

.link-tbr-dark .link-tbr-bright .link-tbr-crimson .link-tbr-wine .link-tbr-lime .link-tbr-forest .link-tbr-sky
.link-tbr-night .link-tbr-white .link-tbr-black .link-tbr-orange .link-tbr-yellow .link-tbr-gray

Example

<a href="" class="link-tbr-dark color-dark">My wonderful link</a>

Top bottom left right

.link-tblr-dark .link-tblr-bright .link-tblr-crimson .link-tblr-wine .link-tblr-lime .link-tblr-forest .link-tblr-sky
.link-tblr-night .link-tblr-white .link-tblr-black .link-tblr-orange .link-tblr-yellow .link-tblr-gray

Example

<a href="" class="link-tblr-dark color-dark">My wonderful link</a>

Switch effect

.link-switch-dark .link-switch-bright .link-switch-crimson .link-switch-wine .link-switch-lime .link-switch-forest .link-switch-sky
.link-switch-night .link-switch-white .link-switch-black .link-switch-orange .link-switch-yellow .link-switch-gray

Example

<a href="" class="link-switch-dark color-dark">My wonderful link</a>

Title styles

.underline-dark

.underline-bright

.underline-crimson

.underline-wine

.underline-lime

.underline-forest

.underline-sky

.underline-night

.underline-white

.underline-black

.underline-orange

.underline-yellow

.underline-gray

Example

<h3 class="color-dark half-underline underline-dark">Lorem ipsum</h3>

Alignments

.underline-left

.underline-center

.underline-right

Example

<h3 class="half-underline underline-dark underline-center">Lorem ipsum</h3>

Custom loaders

Loader 1

Example

<div class="loader loader-1" style="width:150px;height:150px;" data-speed=".4" data-background="#ff0000" data-size="30"></div>
If no parameters are given, the default values will be used

Loader 2

Example

<div class="loader loader-2" style="width:150px;height:150px;" data-speed=".5" data-background="#0000ff" data-size="30"></div>
If no parameters are given, the default values will be used

Loader 3

Example

<div class="loader loader-3" style="width:150px;height:150px;" data-speed=".8" data-background="#0000ff" data-size="50"></div>
If no parameters are given, the default values will be used

Loader 4

Example

<div class="loader loader-4" style="width:150px;height:150px;"></div>

Loader 5

Example

<div class="loader loader-5" style="width:150px;height:150px;" data-text="Loading..." data-combination="大岛的弟地东都对多" data-seconds="2"></div>
If no parameters are given, the default values will be used