Css plugins reference

CSS plugin reference is a one stop destination for all the classes that makes g16framework, it is the powerhouse of the system. Familiarizing or getting accustom to these classes is resourceful and would help facilitate quick decision in design and in turn increase work effeciency.

accordion documentation download plugin

.accordion-toggle .accordion

badge documentation download plugin

badge badge-top badge-center badge-enclosed badge-tag

nav-bar documentation download plugin

barHeader barHeaderLeft barHeaderRight

box dependencies documentation download plugin

Margin

All Four Sides Top right bottom left Margin

.margin-all-xxl margin 48px (TRBL) .margin-all-xla margin 40px (TRBL) .margin-all-lar margin 32px (TRBL) .margin-all-med margin 24px (TRBL) .margin-all-sma margin 16px (TRBL) .margin-all-xsm margin 8px (TRBL) .margin-all-xxs margin 4px (TRBL)

Horizontal Left and Right Margin

.margin-hor-xxl margin 48px (LR) .margin-hor-xla margin 40px (LR) .margin-hor-lar margin 32px (LR) .margin-hor-med margin 24px (LR) .margin-hor-sma margin 16px (LR) .margin-hor-xsm margin 8px (LR) .margin-hor-xxs margin 4px (LR)

Vertical margin top bottom

.margin-ver-xxl margin 48px (TB) .margin-ver-xla margin 40px (TB) .margin-ver-lar margin 32px (TB) .margin-ver-med margin 24px (TB) .margin-ver-sma margin 16px (TB) .margin-ver-xsm margin 8px (TB) .margin-ver-xxs margin 4px (TB)

Left Only Margin

.margin-l-xxl margin 48px (L) .margin-l-xla margin 40px (L) .margin-l-lar margin 32px (L) .margin-l-med margin 24px (L) .margin-l-sma margin 16px (L) .margin-l-xsm margin 8px (L) .margin-l-xxs margin 4px (L)

Right Only Margin

.margin-r-xxl margin 48px (R) .margin-r-xla margin 40px (R) .margin-r-rar margin 32px (R) .margin-r-med margin 24px (R) .margin-r-sma margin 16px (R) .margin-r-xsm margin 8px (R) .margin-r-xxs margin 4px (R)

Bottom Only Margin

.margin-b-xxl margin 48px (B) .margin-b-xla margin 40px (B) .margin-b-lar margin 32px (B) .margin-b-med margin 24px (B) .margin-b-sma margin 16px (B) .margin-b-xsm margin 8px (B) .margin-b-xxs margin 4px (B)

Top Only Margin

.margin-t-xxl margin 48px (T) .margin-t-xla margin 40px (T) .margin-t-lar margin 32px (T) .margin-t-med margin 24px (T) .margin-t-sma margin 16px (T) .margin-t-xsm margin 8px (T) .margin-t-xxs margin 4px (T)

Padding

All Four Sides Top right bottom left padding
.padding-all-xxl padding 48px (TRBL) .padding-all-xla padding 40px (TRBL) .padding-all-lar padding 32px (TRBL) .padding-all-med padding 24px (TRBL) .padding-all-sma padding 16px (TRBL) .padding-all-xsm padding 8px (TRBL) .padding-all-xxs padding 4px (TRBL)

Horizontal padding left to right
.padding-hor-xxl padding 48px (LR) .padding-hor-xla padding 40px (LR) .padding-hor-lar padding 32px (LR) .padding-hor-med padding 24px (LR) .padding-hor-sma padding 16px (LR) .padding-hor-xsm padding 8px (LR) .padding-hor-xxs padding 4px (LR)

Vertical padding top bottom
.padding-ver-xxl padding 48px (TB) .padding-ver-xla padding 40px (TB) .padding-ver-lar padding 32px (TB) .padding-ver-med padding 24px (TB) .padding-ver-sma padding 16px (TB) .padding-ver-xsm padding 8px (TB) .padding-ver-xxs padding 4px (TB)

Left Only padding
.padding-l-xxl padding 48px (L) .padding-l-xla padding 40px (L) .padding-l-lar padding 32px (L) .padding-l-med padding 24px (L) .padding-l-sma padding 16px (L) .padding-l-xsm padding 8px (L) .padding-l-xxs padding 4px (L)

Right Only padding
.padding-r-xxl padding 48px (R) .padding-r-xla padding 40px (R) .padding-r-rar padding 32px (R) .padding-r-med padding 24px (R) .padding-r-sma padding 16px (R) .padding-r-xsm padding 8px (R) .padding-r-xxs padding 4px (R)

Bottom Only padding
.padding-b-xxl padding 48px (B) .padding-b-xla padding 40px (B) .padding-b-lar padding 32px (B) .padding-b-med padding 24px (B) .padding-b-sma padding 16px (B) .padding-b-xsm padding 8px (B) .padding-b-xxs padding 4px (B)

Top Only padding
.padding-t-xxl padding 48px (T) .padding-t-xla padding 40px (T) .padding-t-lar padding 32px (T) .padding-t-med padding 24px (T) .padding-t-sma padding 16px (T) .padding-t-xsm padding 8px (T) .padding-t-xxs padding 4px (T)

Shape documentation

Radius

All Four Sides Top right bottom left radius
.rad-all-xxl radius 50px (TRBL) .rad-all-xla radius 40px (TRBL) .rad-all-lar radius 30px (TRBL) .rad-all-med radius 20px (TRBL) .rad-all-sma radius 10px (TRBL) .rad-all-xsm radius 5px (TRBL) .rad-all-xxs radius 2px (TRBL)

bottom left & bottom right
.rad-all-b-xxl radius 50px (BLBR) .rad-all-b-xla radius 40px (BLBR) .rad-all-b-lar radius 30px (BLBR) .rad-all-b-med radius 20px (BLBR) .rad-all-b-sma radius 10px (BLBR) .rad-all-b-xsm radius 5px (BLBR) .rad-all-b-xxs radius 2px (BLBR)

Top right & top left radius
.rad-all-t-xxl radius 50px (TLTR) .rad-all-t-xla radius 40px (TLTR) .rad-all-t-lar radius 30px (TLTR) .rad-all-t-med radius 20px (TLTR) .rad-all-t-sma radius 10px (TLTR) .rad-all-t-xsm radius 5px (TLTR) .rad-all-t-xxs radius 2px (TLTR)

bottom right radius
.rad-br-xxl radius 50px (BR) .rad-br-xla radius 40px (BR) .rad-br-lar radius 30px (BR) .rad-br-med radius 20px (BR) .rad-br-sma radius 10px (BR) .rad-br-xsm radius 5px (BR) .rad-br-xxs radius 2px (BR)

bottom left radius
.rad-bl-xxl radius 50px (BL) .rad-bl-xla radius 40px (BL) .rad-bl-lar radius 30px (BL) .rad-bl-med radius 20px (BL) .rad-bl-sma radius 10px (BL) .rad-bl-xsm radius 5px (BL) .rad-bl-xxs radius 2px (BL)

top right radius
.rad-tr-xxl radius 50px (TR) .rad-tr-xla radius 40px (TR) .rad-tr-lar radius 30px (TR) .rad-tr-med radius 20px (TR) .rad-tr-sma radius 10px (TR) .rad-tr-xsm radius 5px (TR) .rad-tr-xxs radius 2px (TR)

top left radius
.rad-tl-xxl radius 50px (TL) .rad-tl-xla radius 40px (TL) .rad-tl-lar radius 30px (TL) .rad-tl-med radius 20px (TL) .rad-tl-sma radius 10px (TL) .rad-tl-xsm radius 5px (TL) .rad-tl-xxs radius 2px (TL)

Outlines documentation

Dash outlines
.outline-das-sma.outline-das-med.outline-das-lar

double outlines
.outline-dbl-sma.outline-dbl-med.outline-dbl-lar

solid outline
.outline-sol-sma.outline-sol-med.outline-sol-lar

inset outlines
.outline-ins-sma.outline-ins-med.outline-ins-lar

dotted outlines
.outline-dot-sma.outline-dot-med.outline-dot-lar

Buttons documentation download plugin

button btnPress btnFloated btnExpand btnRipple btnIcon btnHover

Card documentation download plugin

card card-image card-imageCaption card-content

Colors documentation download plugin

abbey#4C4F56acadia#1B1404acapulo#7CB0A1affair#714693 albescentWhite#F5E9D3alice#107896alizarinCrimson#DE1B1Ballports#0076A3 almond#EED9C4almondFrost#907B71alpine#AF8F2Calto#DBDBDB aluminium#A9ACB6amadillo#433E37amaranth#E52B50amber#FFBF00 amethyst#9966CCappleBlossom#AF4D43aquadeep#014B43aquaForest#5FA777 ash#C6C3B5astra#F3FAB6astronaut#283A77astronautBlue#013E62 atoll#0A6F75atomicTangerine#FF9966auchico#97605DbahamaBlue#026395 bahia#A5CB0CbalticSea#2A2630bamboo#DA6304bandicoot# barleyCorn#A68B5Bbarossa#44012Dblack#000000blazeOrange#FF6600 blue#0000FFblueWhale#1E3442bordeaux#5F021FbrickRed#841427 burningOrange#FF6D31carnation#F05C63casal#2F6168cinnabar#E44424 coral#cabbagePont#3F4C3Adaisy#BCA136darkOrange#FF681F redOrange#FF3F34dodgerBlue#1e90fffernfrond#6C7524forestGreen#24B72B funGreen#005A31green#hippieBlue#4A96ADirishCoffee#5F3D26 indigo#093145jagua#080110kelly#829356keyLimePie#A8CD1B limeSpruce#394851londonHue#BEA6C3madison#09255Dmalanzane#300529 mineShaft#2B2B2Bmonza#C7031Eoldlace#FDF3E7oliveGreen#A2AB58 onion#2F270Eorange#FF681ForangePeel#FFA000pampas#F5F3EE red#FF0000ruby#9A2617silver#CBCCCDsmoky#605B73 sushi#9FAD43tomato#FF6347tundora#404040viking# white#FFFFFFwildSand#F6F6F6yellow#FFFF00yellowMetal#716338

84 color set documentation download plugin

.color-set-abbey.color-set-acadia.color-set-acapulo.color-set-affair .color-set-albescentWhite.color-set-alice.color-set-alizarinCrimson.color-set-allports .color-set-almond.color-set-almondFrost.color-set-alpine.color-set-alto .color-set-aluminium.color-set-amadillo.color-set-amaranth.color-set-amber .color-set-amethyst.color-set-appleBlossom.color-set-aquadeep.color-set-aquaForest .color-set-ash.color-set-astra.color-set-astronaut.color-set-astronautBlue .color-set-atoll.color-set-atomicTangerine.color-set-auchico.color-set-bahamaBlue .color-set-bahia.color-set-balticSea.color-set-bamboo.color-set-bandicoot .color-set-barleyCorn.color-set-barossa.color-set-black.color-set-blazeOrange .color-set-blue.color-set-blueWhale.color-set-bordeaux.color-set-brickRed .color-set-burningOrange.color-set-carnation.color-set-casal.color-set-cinnabar .color-set-coral.color-set-cabbagePont.color-set-daisy.color-set-darkOrange .color-set-redOrange.color-set-dodgerBlue.color-set-fernfrond.color-set-forestGreen .color-set-fungGreen.color-set-green.color-set-hippieblue.color-set-irishCoffee .color-set-indigo.color-set-jagua.color-set-kelly.color-set-keyLimePie .color-set-limeSpruce.color-set-londonHue.color-set-madison.color-set-malanzane .color-set-mineShaft.color-set-monza.color-set-oldlace.color-set-oliveGreen .color-set-onion.color-set-orange.color-set-orangePeel.color-set-pampas .color-set-red.color-set-ruby.color-set-silver.color-set-smoky .color-set-sushi.color-set-tomato.color-set-tundora.color-set-viking .color-set-white.color-set-wildSand.color-set-yellow.color-set-yellowMetal

84 background color documentation download plugin

.color-bg-abbey.color-bg-acadia.color-bg-acapulo.color-bg-affair .color-bg-albescentWhite.color-bg-alice.color-bg-alizarinCrimson.color-bg-allports .color-bg-almond.color-bg-almondFrost.color-bg-alpine.color-bg-alto .color-bg-aluminium.color-bg-amadillo.color-bg-amaranth.color-bg-amber .color-bg-amethyst.color-bg-appleBlossom.color-bg-aquadeep.color-bg-aquaForest .color-bg-ash.color-bg-astra.color-bg-astronaut.color-bg-astronautBlue .color-bg-atoll.color-bg-atomicTangerine.color-bg-auchico.color-bg-bahamaBlue .color-bg-bahia.color-bg-balticSea.color-bg-bamboo.color-bg-bandicoot .color-bg-barleyCorn.color-bg-barossa.color-bg-black.color-bg-blazeOrange .color-bg-blue.color-bg-blueWhale.color-bg-bordeaux.color-bg-brickRed .color-bg-burningOrange.color-bg-carnation.color-bg-casal.color-bg-cinnabar .color-bg-coral.color-bg-cabbagePont.color-bg-daisy.color-bg-darkOrange .color-bg-redOrange.color-bg-dodgerBlue.color-bg-fernfrond.color-bg-forestGreen .color-bg-funGreen.color-bg-green.color-bg-hippieBlue.color-bg-irishCoffee .color-bg-indigo.color-bg-jagua.color-bg-kelly.color-bg-keyLimePie .color-bg-limeSpruce.color-bg-londonHue.color-bg-madison.color-bg-malanzane .color-bg-mineShaft.color-bg-monza.color-bg-oldlace.color-bg-oliveGreen .color-bg-onion.color-bg-orange.color-bg-orangePeel.color-bg-pampas .color-bg-red.color-bg-ruby.color-bg-silver.color-bg-smoky .color-bg-sushi.color-bg-tomato.color-bg-tundora.color-bg-viking .color-bg-white.color-bg-wildSand.color-bg-yellow.color-bg-yellowMetal

84 text color documentation download plugin

.color-text-abbey.color-text-acadia.color-text-acapulo.color-text-affair .color-text-albescentWhite.color-text-alice.color-text-alizarinCrimson.color-text-allports .color-text-almond.color-text-almondFrost.color-text-alpine.color-text-alto .color-text-aluminium.color-text-amadillo.color-text-amaranth.color-text-amber .color-text-amethyst.color-text-appleBlossom.color-text-aquadeep.color-text-aquaForest .color-text-ash.color-text-astra.color-text-astronaut.color-text-astronautBlue .color-text-atoll.color-text-atomicTangerine.color-text-auchico.color-text-bahamaBlue .color-text-bahia.color-text-balticSea.color-text-bamboo.color-text-bandicoot .color-text-barleyCorn.color-text-barossa.color-text-black.color-text-blazeOrange .color-text-blue.color-text-blueWhale.color-text-bordeaux.color-text-brickRed .color-text-burningOrange.color-text-carnation.color-text-casal.color-text-cinnabar .color-text-coral.color-text-cabbagePont.color-text-daisy.color-text-darkOrange .color-text-redOrange.color-text-dodgerBlue.color-text-fernfrond.color-text-forestGreen .color-text-funGreen.color-text-green.color-text-hippieblue.color-text-irishCoffee .color-text-indigo.color-text-jagua.color-text-kelly.color-text-keyLimePie .color-text-limeSpruce.color-text-londonHue.color-text-madison.color-text-malanzane .color-text-mineShaft.color-text-monza.color-text-oldlace.color-text-oliveGreen .color-text-onion.color-text-orange.color-text-orangePeel.color-text-pampas .color-text-red.color-text-ruby.color-text-silver.color-text-smoky .color-text-sushi.color-text-tomato.color-text-tundora.color-text-viking .color-text-white.color-text-wildSand.color-text-yellow.color-text-yellowMetal

84 outline color class documentation download plugin

.outline-color-abbey.outline-color-acadia.outline-color-acapulo.outline-color-affair .outline-color-albescentWhite.outline-color-alice.outline-color-alizarinCrimson.outline-color-allports .outline-color-almond.outline-color-almondFrost.outline-color-alpine.outline-color-alto .outline-color-aluminium.outline-color-amadillo.outline-color-amaranth.outline-color-amber .outline-color-amethyst.outline-color-appleBlossom.outline-color-aquadeep.outline-color-aquaForest .outline-color-ash.outline-color-astra.outline-color-astronaut.outline-color-astronautBlue .outline-color-atoll.outline-color-atomicTangerine.outline-color-auchico.outline-color-bahamaBlue .outline-color-bahia.outline-color-balticSea.outline-color-bamboo.outline-color-bandicoot .outline-color-barleyCorn.outline-color-barossa.outline-color-black.outline-color-blazeOrange .outline-color-blue.outline-color-blueWhale.outline-color-bordeaux.outline-color-brickRed .outline-color-burningOrange.outline-color-carnation.outline-color-casal.outline-color-cinnabar .outline-color-coral.outline-color-cabbagePont.outline-color-daisy.outline-color-darkOrange .outline-color-redOrange.outline-color-dodgerBlue.outline-color-fernfrond.outline-color-forestGreen .outline-color-funGreen.outline-color-green.outline-color-hippieblue.outline-color-irishCoffee .outline-color-indigo.outline-color-jagua.outline-color-kelly.outline-color-keyLimePie .outline-color-limeSpruce.outline-color-londonHue.outline-color-madison.outline-color-malanzane .outline-color-mineShaft.outline-color-monza.outline-color-oldlace.outline-color-oliveGreen .outline-color-onion.outline-color-orange.outline-color-orangePeel.outline-color-pampas .outline-color-red.outline-color-ruby.outline-color-silver.outline-color-smoky .outline-color-sushi.outline-color-tomato.outline-color-tundora.outline-color-viking .outline-color-white.outline-color-wildSand.outline-color-yellow.outline-color-yellowMetal

84 Hover Set Class documentation download plugin

Hover set is the combination of foreground and background color hover state.

.hover-set-abbey.hover-set-acadia.hover-set-acapulo.hover-set-affair .hover-set-albescentWhite.hover-set-alice.hover-set-alizarinCrimson.hover-set-allports .hover-set-almond.hover-set-almondFrost.hover-set-alpine.hover-set-alto .hover-set-aluminium.hover-set-amadillo.hover-set-amaranth.hover-set-amber .hover-set-amethyst.hover-set-appleBlossom.hover-set-aquadeep.hover-set-aquaForest .hover-set-ash.hover-set-astra.hover-set-astronaut.hover-set-astronautBlue .hover-set-atoll.hover-set-atomicTangerine.hover-set-auchico.hover-set-bahamaBlue .hover-set-bahia.hover-set-balticSea.hover-set-bamboo.hover-set-bandicoot .hover-set-barleyCorn.hover-set-barossa.hover-set-black.hover-set-blazeOrange .hover-set-blue.hover-set-blueWhale.hover-set-bordeaux.hover-set-brickRed .hover-set-burningOrange.hover-set-carnation.hover-set-casal.hover-set-cinnabar .hover-set-coral.hover-set-cabbagePont.hover-set-daisy.hover-set-darkOrange .hover-set-redOrange.hover-set-dodgerBlue.hover-set-fernfrond.hover-set-forestGreen .hover-set-funGreen.hover-set-green.hover-set-hippieblue.hover-set-irishCoffee .hover-set-indigo.hover-set-jagua.hover-set-kelly.hover-set-keyLimePie .hover-set-limeSpruce.hover-set-londonHue.hover-set-madison.hover-set-malanzane .hover-set-mineShaft.hover-set-monza.hover-set-oldlace.hover-set-oliveGreen .hover-set-onion.hover-set-orange.hover-set-orangePeel.hover-set-pampas .hover-set-red.hover-set-ruby.hover-set-silver.hover-set-smoky .hover-set-sushi.hover-set-tomato.hover-set-tundora.hover-set-viking .hover-set-white.hover-set-wildSand.hover-set-yellow.hover-set-yellowMetal

84 Hover background documentation download plugin

Hover background class applies background color only when mouse over html element.

.hover-bg-abbey.hover-bg-acadia.hover-bg-acapulo.hover-bg-affair .hover-bg-albescentWhite.hover-bg-alice.hover-bg-alizarinCrimson.hover-bg-allports .hover-bg-almond.hover-bg-almondFrost.hover-bg-alpine.hover-bg-alto .hover-bg-aluminium.hover-bg-amadillo.hover-bg-amaranth.hover-bg-amber .hover-bg-amethyst.hover-bg-appleBlossom.hover-bg-aquadeep.hover-bg-aquaForest .hover-bg-ash.hover-bg-astra.hover-bg-astronaut.hover-bg-astronautBlue .hover-bg-atoll.hover-bg-atomicTangerine.hover-bg-auchico.hover-bg-bahamaBlue .hover-bg-bahia.hover-bg-balticSea.hover-bg-bamboo.hover-bg-bandicoot .hover-bg-barleyCorn.hover-bg-barossa.hover-bg-black.hover-bg-blazeOrange .hover-bg-blue.hover-bg-blueWhale.hover-bg-bordeaux.hover-bg-brickRed .hover-bg-burningOrange.hover-bg-carnation.hover-bg-casal.hover-bg-cinnabar .hover-bg-coral.hover-bg-cabbagePont.hover-bg-daisy.hover-bg-darkOrange .hover-bg-redOrange.hover-bg-dodgerBlue.hover-bg-fernfrond.hover-bg-forestGreen .hover-bg-funGreen.hover-bg-green.hover-bg-hippieblue.hover-bg-irishCoffee .hover-bg-indigo.hover-bg-jagua.hover-bg-kelly.hover-bg-keyLimePie .hover-bg-limeSpruce.hover-bg-londonHue.hover-bg-madison.hover-bg-malanzane .hover-bg-mineShaft.hover-bg-monza.hover-bg-oldlace.hover-bg-oliveGreen .hover-bg-onion.hover-bg-orange.hover-bg-orangePeel.hover-bg-pampas .hover-bg-red.hover-bg-ruby.hover-bg-silver.hover-bg-smoky .hover-bg-sushi.hover-bg-tomato.hover-bg-tundora.hover-bg-viking .hover-bg-white.hover-bg-wildSand.hover-bg-yellow.hover-bg-yellowMetal

84 Hover Text documentation download plugin

Hover text class applies foreground color to text only when mouse over html element.

.hover-text-abbey.hover-text-acadia.hover-text-acapulo.hover-text-affair .hover-text-albescentWhite.hover-text-alice.hover-text-alizarinCrimson.hover-text-allports .hover-text-almond.hover-text-almondFrost.hover-text-alpine.hover-text-alto .hover-text-aluminium.hover-text-amadillo.hover-text-amaranth.hover-text-amber .hover-text-amethyst.hover-text-appleBlossom.hover-text-aquadeep.hover-text-aquaForest .hover-text-ash.hover-text-astra.hover-text-astronaut.hover-text-astronautBlue .hover-text-atoll.hover-text-atomicTangerine.hover-text-auchico.hover-text-bahamaBlue .hover-text-bahia.hover-text-balticSea.hover-text-bamboo.hover-text-bandicoot .hover-text-barleyCorn.hover-text-barossa.hover-text-black.hover-text-blazeOrange .hover-text-blue.hover-text-blueWhale.hover-text-bordeaux.hover-text-brickRed .hover-text-burningOrange.hover-text-carnation.hover-text-casal.hover-text-cinnabar .hover-text-coral.hover-text-cabbagePont.hover-text-daisy.hover-text-darkOrange .hover-text-redOrange.hover-text-dodgerBlue.hover-text-fernfrond.hover-text-forestGreen .hover-text-funGreen.hover-text-green.hover-text-hippieblue.hover-text-irishCoffee .hover-text-indigo.hover-text-jagua.hover-text-kelly.hover-text-keyLimePie .hover-text-limeSpruce.hover-text-londonHue.hover-text-madison.hover-text-malanzane .hover-text-mineShaft.hover-text-monza.hover-text-oldlace.hover-text-oliveGreen .hover-text-onion.hover-text-orange.hover-text-orangePeel.hover-text-pampas .hover-text-red.hover-text-ruby.hover-text-silver.hover-text-smoky .hover-text-sushi.hover-text-tomato.hover-text-tundora.hover-text-viking .hover-text-white.hover-text-wildSand.hover-text-yellow.hover-text-yellowMetal

84 Hover border color class documentation download plugin

Hover border class applies border color when mouse over html element.

.hover-bor-abbey.hover-bor-acadia.hover-bor-acapulo.hover-bor-affair .hover-bor-albescentWhite.hover-bor-alice.hover-bor-alizarinCrimson.hover-bor-allports .hover-bor-almond.hover-bor-almondFrost.hover-bor-alpine.hover-bor-alto .hover-bor-aluminium.hover-bor-amadillo.hover-bor-amaranth.hover-bor-amber .hover-bor-amethyst.hover-bor-appleBlossom.hover-bor-aquadeep.hover-bor-aquaForest .hover-bor-ash.hover-bor-astra.hover-bor-astronaut.hover-bor-astronautBlue .hover-bor-atoll.hover-bor-atomicTangerine.hover-bor-auchico.hover-bor-bahamaBlue .hover-bor-bahia.hover-bor-balticSea.hover-bor-bamboo.hover-bor-bandicoot .hover-bor-barleyCorn.hover-bor-barossa.hover-bor-black.hover-bor-blazeOrange .hover-bor-blue.hover-bor-blueWhale.hover-bor-bordeaux.hover-bor-brickRed .hover-bor-burningOrange.hover-bor-carnation.hover-bor-casal.hover-bor-cinnabar .hover-bor-coral.hover-bor-cabbagePont.hover-bor-daisy.hover-bor-darkOrange .hover-bor-redOrange.hover-bor-dodgerBlue.hover-bor-fernfrond.hover-bor-forestGreen .hover-bor-funGreen.hover-bor-green.hover-bor-hippieblue.hover-bor-irishCoffee .hover-bor-indigo.hover-bor-jagua.hover-bor-kelly.hover-bor-keyLimePie .hover-bor-limeSpruce.hover-bor-londonHue.hover-bor-madison.hover-bor-malanzane .hover-bor-mineShaft.hover-bor-monza.hover-bor-oldlace.hover-bor-oliveGreen .hover-bor-onion.hover-bor-orange.hover-bor-orangePeel.hover-bor-pampas .hover-bor-red.hover-bor-ruby.hover-bor-silver.hover-bor-smoky .hover-bor-sushi.hover-bor-tomato.hover-bor-tundora.hover-bor-viking .hover-bor-white.hover-bor-wildSand.hover-bor-yellow.hover-bor-yellowMetal

Containers documentation download plugin

Liquid Containers
.container-basic A 100% container with padding and margin of the viewport size .container-liquid-20 A 20% liquid container with padding and margin of the viewport size .container-liquid-30.container-liquid-40.container-liquid-50.container-liquid-60 .container-liquid-70.container-liquid-80.container-liquid-90.container-liquid-100

Fixed Containers
.container-fixed-1920.container-fixed-1280.container-fixed-1200.container-fixed-1024.container-fixed-960 .container-fixed-800.container-fixed-768.container-fixed-640.container-fixed-480.container-fixed-360 .container-fixed-320.container-fixed-240

Effects documentation download plugin

Text shadow

Text Effects
.text-shadow-basic.text-shadow-3d.text-shadow-blur.text-shadow-emboss.text-shadow-emboss2 .text-shadow-fire.text-shadow-glow.text-shadow-inset.text-shadow-neon.text-shadow-retro

Box shadow

Box Shadows
.box-shadow-bulge.box-shadow-card.box-shadow-dark.box-shadow-darker .box-shadow-floated.box-shadow-inset.box-shadow-light.box-shadow-paper .box-shadow-spread.box-shadow-sticky.box-shadow-tracy

Animation

Animation
animation-bottomanimation-bounceanimation-bounceOutanimation-fadeInanimation-hinge animation-inputanimation-leftanimation-rightanimation-rotateanimation-shake animation-swinganimation-tadaanimation-topanimation-wobble

Image Filters

Filters
.filter-blur.filter-grayscale.filter-polaroid.filter-sep

Flip
.flip-X.flip-Y.flip-Z

Form and Input Controls documentation download plugin

.validate-outline validate form with outline .validate-icon validate form with icon .iconSearchBlack small search icon .iconProfileBlack Profile icon .iconPasswordBlack Password icon .iconUserBlack Username icon .inputGrid Grid forms .formGroup Form group collections .switchbutton Toggle Button Switch

Gallery documentation download plugin

.gallery-lightbox

Grids documentation download plugin

Mixed Columns

Mixed Column Grids
.g16-mc-1 1/16 (6.25%) .g16-mc-2 2/16 (12.5%) .g16-mc-3 3/16 (18.75%) .g16-mc-4 4/16 (25%) .g16-mc-5 5/16 (31.25%) .g16-mc-6 6/16 (37.5%) .g16-mc-7 7/16 (43.75%) .g16-mc-8 8/16 (50%) .g16-mc-9 9/16 (56.25%) .g16-mc-10 10/16 (62.5%) .g16-mc-11 11/16 (68.75%) .g16-mc-12 12/16 (75%) .g16-mc-13 13/16 (81.25%) .g16-mc-14 14/16 (87.5%) .g16-mc-15 15/16 (93.75%) .g16-mc-16 16/16 (100%)

Equal Columns

Equal Column Grids
.g16-c-2 1/2 (50%) .g16-c-3 1/3 (33.33333%) .g16-c-4 1/4 (25%) .g16-c-5 1/5 (20%) .g16-c-6 1/6 (16.666667%) .g16-c-7 1/7 (14.285714%) .g16-c-8 1/8 (12.5%) .g16-c-9 1/9 (11.11111%) .g16-c-10 1/10 (10%) .g16-c-11 1/11 (9.09091%) .g16-c-12 1/12 (8.33333%) .g16-c-13 1/13 (7.69231%) .g16-c-14 1/14 (7.14286%) .g16-c-15 1/15 (6.66667%) .g16-c-16 1/16 (6.25%)

Grid Tiles

.g16-tiles-2 1/2 (50%) .g16-tiles-3 1/3 (33.33333%) .g16-tiles-4 1/4 (25%) .g16-tiles-5 1/5 (20%) .g16-tiles-6 1/6 (16.666667%) .g16-tiles-7 1/7 (14.285714%) .g16-tiles-8 1/8 (12.5%) .g16-tiles-9 1/9 (11.11111%) .g16-tiles-10 1/10 (10%) .g16-tiles-11 1/11 (9.09091%) .g16-tiles-12 1/12 (8.33333%) .g16-tiles-13 1/13 (7.69231%) .g16-tiles-14 1/14 (7.14286%) .g16-tiles-15 1/15 (6.66667%) .g16-tiles-16 1/16 (6.25%)

Grid Hack Rule
.g16hack Remove all margin properties from grids

Image documentation download plugin

Image Fixed Sizes
.image75 Image size 75px .image100 Image size 100px .image120 Image size 120px .image160Image size 160px .image220 Image size 220px .image320 Image size 320px .image460 Image size 460px .image800Image size 800px .image1024 Image size 1024px

Image Filter Effects
.filter-blur Blurred effect .filter-grayscale Gradescale effect .filter-polaroid Photographic effect .filter-sepiaSepia effect .filter-invert Invert effect .filter-saturate Saturate effect .image-caption Caption effect .image-hoverFlipHover flip effect .image-translate3D3D Transition

Intro documentation download plugin

introChip

layout documentation download plugin

Position Classes
.fixed Fixed position box .relative Relatively positioned box .absolute Absolutely positioned box .left0Absolutely positioned box zero from the left .left10 Absolutely positioned box 10% from the left .left20 Absolutely positioned box 20% from the left .left30 Absolutely positioned box 30% from the left .left40 Absolutely positioned box 40% from the left .left50 Absolutely positioned box 50% from the left .left60 Absolutely positioned box 60% from the left .left70 Absolutely positioned box 70% from the left .left80Absolutely positioned box 80% from the left .left90 Absolutely positioned box 90% from the left .left100 Absolutely positioned box 100% from the left .right0Absolutely positioned box zero from the right .right10 Absolutely positioned box 10% from the right .right20 Absolutely positioned box 20% from the right .right30 Absolutely positioned box 30% from the right .right40 Absolutely positioned box 40% from the right .right50 Absolutely positioned box 50% from the right .right60 Absolutely positioned box 60% from the right .right70 Absolutely positioned box 70% from the right .right80Absolutely positioned box 80% from the right .right90 Absolutely positioned box 90% from the right .right100 Absolutely positioned box 100% from the right .top0Absolutely positioned box zero from the top .top10 Absolutely positioned box 10% from the top .top20 Absolutely positioned box 20% from the top .top30 Absolutely positioned box 30% from the top .top40 Absolutely positioned box 40% from the top .top50 Absolutely positioned box 50% from the top .top60 Absolutely positioned box 60% from the top .top70 Absolutely positioned box 70% from the top .top80Absolutely positioned box 80% from the top .top90 Absolutely positioned box 90% from the top .top100 Absolutely positioned box 100% from the top .bottom0Absolutely positioned box zero from the bottom .bottom10 Absolutely positioned box 10% from the bottom .bottom20 Absolutely positioned box 20% from the bottom .bottom30 Absolutely positioned box 30% from the bottom .bottom40 Absolutely positioned box 40% from the bottom .bottom50 Absolutely positioned box 50% from the bottom .bottom60 Absolutely positioned box 60% from the bottom .bottom70 Absolutely positioned box 70% from the bottom .bottom80Absolutely positioned box 80% from the bottom .bottom90 Absolutely positioned box 90% from the bottom .bottom100 Absolutely positioned box 100% from the bottom .auto Object centrally positioned .block A block box .inlineBlock Inline block box

Float Classes
.left Float object to the left .right Float object to the right

Stack Classes
.indexNegative Negative stacking context .indexAuto Zero stacking context .index10 10 stacking context .index20 20 stacking context .index30 30 stacking context .index40 40 stacking context .index50 50 stacking context .indexMax 9999 stacking context

list documentation download plugin

.list-content .list-avatar

modal documentation download plugin

.modal .modal-content

navigation documentation download plugin

.nav-breadcrumb .nav-horizontal .nav-dropDown .nav-toggle .nav-hoverTopSlide .nav-hoverBottomSlide .nav-hoverLeftSlide .nav-hoverRightSlide .nav-hoverBasic .nav-icon

notification documentation download plugin

.alert-danger.alert-warning.alert-success

size class documentation download plugin

Fixed sizes
.size50px 50px fixed width no box properties .size100px 100px fixed width .size150px 150px fixed width .size200px 200px fixed width .size250px 250px fixed width .size300px 300px fixed width .size350px 350px fixed width .size400px 400px fixed width .size450px 450px fixed width .size500px 500px fixed width .size550px 550px fixed width .size600px 600px fixed width .size650px 650px fixed width .size700px 700px fixed width .size750px 750px fixed width .size800px 800px fixed width .size850px 850px fixed width .size900px 900px fixed width .size950px 950px fixed width .size1000px 1000px fixed width

Slideshow documentation download plugin

carousel-tiny carousel-autoSlide slideshow-fadIn slideshow-buttonFade

table documentation download plugin

zebaStripped

Tabs documentation download plugin

.tab-zoom.tab-animateBottom.tab-animateTop.tab-animateLeft .tab-animateRight

tooltip documentation download plugin

.tooltip.tip-bottom.tip-top.tip-left .tip-right .tooltip-att .hidepointer

typography documentation download plugin

web fonts (computer base)
.webfont-verdanas Verdana, Geneva, Tahoma, sans-serif .webfont-arials Arial, Helvetica, sans-serif .webfont-franklin Franklin Gothic Medium, Arial Narrow, Arial, sans-serif .webfont-trebuschets Trebuchet MS, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif .webfont-segoes Segoe UI, Tahoma, Geneva, Verdana, sans-serif .webfont-gillsans Gill Sans MT, Calibri, Trebuchet MS, sans-serif sans-serif

google fonts
.gfont-abel Google font - abel .gfont-alexbrush Google font - alexbrush .gfont-anton Google font - anton .gfont-arvo Google font - arvo .gfont-crazyscript Google font - crazyscript

.gfont-caveat Google font - caveat .gfont-josefinslab Google font - josefinslab .gfont-chivo Google font - chivo .gfont-cookie Google font - cookie .gfont-greatvibes Google font - greatvibes .gfont-handlee Google font - handlee .gfont-juliussansone Google font - juliussansone .gfont-khand Google font - khand .gfont-lato Google font - lato .gfont-montserrat Google font - montserrat .gfont-niconne Google font - niconne .gfont-notosans Google font - notosans .gfont-oswald Google font - oswald .gfont-alexbrush Google font - alexbrush .gfont-paytoneone Google font-paytoneone .gfont-poiretone Google font-poiretone .gfont-quicksand Google font-quicksand .gfont-righteous Google font-righteous .gfont-tangerine Google font-tangerine .gfont-varela Google font-varela .gfont-vollkorn Google font-vollkorn .gfont-voltaire Google font-voltaire


font size variation
.xxsmall 0.625rem (10px) .xsmall 0.75rem (12px) .small 0.875rem (14px) .normal 1rem (16px) .medium 2rem (32px) .large 4rem (64px) .xlarge 6rem (96px) .xxlarge 8rem (128px) .jumbo 10rem (160px)

font weight
.weight-100.weight-200.weight-300.weight-400 .weight-500.weight-600.weight-700.weight-800 .weight-900.weight-bold .weight-bolder

font style
.style-normal.style-italic

font variant
.variant-smallCap

text alignment
.align-center.align-left.align-right.align-left .align-justify

text transformation
.transform-cap.transform-upp.transform-cap

blockquotes
blockquote

text decoration
text-dashed text-dotted text-double text-line-through text-overline


letter spacign
.letter-space-xxs 3px .letter-space-xsm 6px .letter-space-sma 9px .letter-space-med 12px .letter-space-lar 15px .letter-space-xla 18px .letter-space-xxl 21px


word spacign
.word-space-xxs 3px .word-space-xsm 6px .word-space-sma 9px .word-space-med 12px .word-space-lar 15px .word-space-xla 18px .word-space-xxl 21px

Utility - Exception documentation download plugin

.no-mar-pad .no-padding .no-margin .no-hor-padding .no-ver-padding .no-hor-margin.no-ver-margin .no-outline .no-border.disabled .hide