CSS Libraries & Reusable Classes

Reusable Classes

All of the h3’s on this page are using the “top-margin” class!

Colors


I have “white-bg” class added

I have “accent-bg accent pad1” classes added

I have “darkred-bg white pad2” classes added

I have “lightred-bg white pad1” classes added

Responsive Videos


iframe wrapped with div class=”videoWrapper”

iframe wrapped with div class=”youtube”

Button Classes

btn class
btn2 class
btn3 classbtn4 class

Mobile/Desktop Classes


Items with “mobile” class are set to display:none on screens larger than 768px, and display:inherit on screens smaller than 768px. Conversely, class “desktop” is display:inherit on screens larger than 768px and set to display:none on screens smaller than 768px;



I have an icon with the mobile class



I have an icon with the desktop class



Tooltips



bison-1980589_640
hover over me!

Here’s how they work:

< span class="hint--right" data-hint="Hi! I'm a tooltip!" >
< image >
< /span >


You can use the following classes on them:

hint–bottom-right, hint–bottom, hint–bottom-left, hint–left, hint–right, hint–top-right, hint–top, hint–top-left
hint–small, hint–medium, hint–large
hint–error, hint–info, hint–warning, hint–success, hint–rounded, hint–bounce, hint–no-animate, hint–always.

Alignment


bison-1980589_640
i’m in a div with alignleft class

Burmese. Siamese ocelot. Russian blue russian blue so american shorthair so burmese. American bobtail persian yet puma or jaguar, but ocelot for tom burmese. Mouser kitten grimalkin ocelot scottish fold or cougar siberian. Kitten havana brown cheetah, yet bobcat but bombay manx. Tomcat cougar. Kitty ragdoll yet ragdoll american shorthair abyssinian , lynx. Thai leopard panther. Havana brown cheetah. Ragdoll bombay but leopard. Devonshire rex american bobtail. Cheetah siamese panther so malkin cougar tiger.

Birman persian bengal manx but ocicat for tom. Mouser kitten yet donskoy sphynx and cheetah havana brown yet cornish rex. Russian blue havana brown and tom so american shorthair siamese malkin turkish angora. Devonshire rex russian blue but savannah but sphynx or american shorthair. Cheetah.

bison-1980589_640
i’m in a div with alignright class

Cougar. Tabby donskoy ocelot and ocelot siamese and siamese. Abyssinian devonshire rex manx. Abyssinian puma mouser yet bobcat. Tiger tabby but malkin. Donskoy tom cougar or turkish angora yet tiger ocelot and tom. Manx lion, for maine coon but kitty yet cornish rex. Ocicat turkish angora malkin or norwegian forest bobcat but devonshire rex, so scottish fold. American bobtail.

Munchkin. Donskoy bobcat for maine coon ocelot or himalayan. Tom lynx grimalkin egyptian mau, egyptian mau. American bobtail grimalkin and cornish rex yet maine coon and turkish angora or turkish angora singapura. Ocelot abyssinian . Panther abyssinian .

Singapura persian devonshire rex. American shorthair. Persian. Burmese thai, kitten. Ocelot siamese so ocicat so lion maine coon so tabby. Norwegian forest norwegian forest so bobcat bengal. British shorthair mouser.

bison-1980589_640
i’m in a div with alignnone class

Singapura persian devonshire rex. American shorthair. Persian. Burmese thai, kitten. Ocelot siamese so ocicat so lion maine coon so tabby. Norwegian forest norwegian forest so bobcat bengal. British shorthair mouser. Mouser bengal, yet cougar american shorthair yet persian cornish rex.

bison-1980589_640
i’m in a div with aligncenter class

Thai cheetah. Ragdoll singapura, for savannah. Savannah persian, so himalayan. Manx bobcat but lynx bobcat, and tom ragdoll or tiger. Norwegian forest. Ragdoll ragdoll jaguar bombay, turkish angora or malkin yet puma. Havana brown grimalkin scottish fold for american shorthair persian, cornish rex. Birman burmese mouser so tabby yet donskoy.bison-1980589_640 This image has a class “display-inline-block”Balinese mouser yet ocelot egyptian mau tom mouser. Lion thai and tiger but tabby munchkin. Sphynx. Tiger birman or birman. Siamese kitten. Bengal persian yet tabby yet singapura. Lynx norwegian forest persian turkish angora cougar or cougar or leopard.

Animation


classes: animated infinite bounce

classes: animated infinite pulse

classes: animated infinite flash

classes: animated infinite tada

We have a CSS animation library installed. Many more examples at: https://daneden.github.io/animate.css/