CSS Plugins

Lightweight, simple, smart and well structured modular system built upon 16 scalable grids system that generates smooth and itch-free responsive layouts. It contains over 2000 inline plugin classes that can be used to create a fully responsive website with ease.

start coding

Definition

Color is a vital property for good visual design, there are nine different classifications created to enhance html element property such as text, background, outline, border e.t.c.

Plugin Class

Classes Definition
color-text-#name Class that defines the foreground color of html element. It is assigned to the class attribute of element. The hashtag-name is the color name.
color-bg-#name Class that defines the background color of html element. It is assigned to the class attribute of element.The hashtag-name is the color name.
color-set-#name Class that defines both the foreground and background color of html element. It is assigned to the class attribute of element.The hashtag-name is the color name.
outline-color-#name Class that defines the outline color of html element. It is assigned to the class attribute of element.The hashtag-name is the color name.
border-color-#name Class that defines the border color of html element. It is assigned to the class attribute of element.The hashtag-name is the color name.
gradient-color-#name Class that defines the gradient color of html element. It is assigned to the class attribute of element.The hashtag-name is the color name.
hover-text-#name Class that defines the hover state of foreground color of html element when mouse over. It is assigned to the class attribute of element.The hashtag-name is the color name.
hover-bg-#name Class that defines the hover state of background color of html element when mouse over. It is assigned to the class attribute of element.The hashtag-name is the color name.
hover-set-#name Class that defines the hover state for both foreground and background color of html element when mouse over. It is assigned to the class attribute of element.The hashtag-name is the color name.

Color Name

Below collections show 84 different colors with their corresponding class name, hover on the colored box to see the hexadecimal value of each selected color.

Note the color class name is case sensitive.

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#67BCDB white#FFFFFFwildSand#F6F6F6yellow#FFFF00yellowMetal#716338

Text Color

Identifier
color-text-#colorName

This class is used when you intend to apply color to any kind of html elements such as paragraph, headings e.t.c. You can instantiate this class by chosing any color-name and append the color name to the class identifier to create a color text class.

yellowmetal
green
orange
  
        <h5 class="color-text-yellowMetal"></h5>
        <h5 class="color-text-green"></h5>
        <h5 class="color-text-orange"></h5>
    

Background Color

Identifier
color-bg-#colorName

Background color class is used when you intend to apply background color only to body, block level elements or specific html element. To instantiate this class, simply choose any colorname and append the color name to the class identifier to create a color background class.

How to set up background color

yellowMetal
green
orange
  
        <div class="color-bg-yellowMetal"></div>
        <div class="color-bg-green"></div>
        <div class="color-bg-orange"></div>
    

Set Color

Identifier
color-set-#colorName

This class is used when you intend to apply both background and foreground color to html elements at the same time. The background color precedes the text color.

To instantiate this class, simply choose any colorname and append the color name to the class identifier to create a color set class. Go to code editor to test all the color class

yellowMetal
green
orange
  
        <div class="color-set-yellowMetal"></div>
        <div class="color-set-green"></div>
        <div class="color-set-orange"></div>
    

Hover text color

Identifier
hover-text-#colorName

This class is used when you intend to designate a hover text color property to foreground of a text content of a box generated by html element such as paragraph. It does change the foreground color only when mouse pointer is hover on a text.

To instantiate this class, simply choose any colorname and append the color name to the class identifier to create a hover text class. Go to code editor to test all the available color class

The above text color would change to red, yellow and orange respectively when mouse over the affected texts.

Mouse over me

Mouse over me

Mouse over me

  
        <div class="hover-text-alizarinCrimson"> <p> Mouse over me  </p></div>
        <div class="hover-text-aquadeep"> <p> Mouse over me  </p></div>
        <div class="hover-text-bahia"> <p> Mouse over me  </p></div>
    

Hover Background color

Identifier
hover-bg-#colorName

This class is used when you intend to designate a hover background color property to containing block of a box generated by html element such as div. It does change the background color only when mouse pointer is hover on a box.

To instantiate this class, simply choose any colorname and append the color name to the class identifier to create a hover background class. Go to code editor to test all the available color class

Hover background class set up

The above containg block color would change to red, green and orange respectively when mouse over the affected box.

  
     hover-bg-red
     hover-bg-yellow
     hover-bg-orange
    

Mouse over me

Mouse over me

Mouse over me

  
        <div class="hover-bg-red"> <p> Mouse over me  </p></div>
        <div class="hover-bg-yellow"> <p> Mouse over me  </p></div>
        <div class="hover-bg-orange"> <p> Mouse over me  </p></div>
    

Hover Set color

Identifier
hover-set-#colorName

The same approach is employed when assigning a hover set class property to an element, in this case both the foreground and background color would automatically apply and change when mouse over the affected element.

Mouse over me

Mouse over me

Mouse over me

  
        <div class="hover-set-red"> <p> Mouse over me  </p></div>
        <div class="hover-set-yellow"> <p> Mouse over me  </p></div>
        <div class="hover-set-orange"> <p> Mouse over me  </p></div>
    

Border color

Identifier
border-color-#colorName

This color class enables border color properties to an element if assigned. It does work in association with the border-width, which defines how thin or thick the rendering color should look.

Note that a border will only be visible as long as other border property such as border width has been set.

Important Note An outline is similar to a border in that a line is drawn around the element; unlike borders, outlines won’t allow setting of individual edge to a different width, or set different colors and styles for each edge. Outlines do not take up space in the flow of the document (and will not cause overflow), which may cause them to overlap other elements on the page. Border takes up space in the flow of the document and may cause them to overlap.

To instantiate this class, simply choose any colorname and append the color name to the class identifier to create a border color class. Go to code editor to test all the available color class

Border color red

Border color yellowmetal
  
    <div class="border-all-med border-color-red">
    A thick border color red
    </div>
    <div class="border-all-med border-color-yellowMetal">
    A thick border color yellowmetal
    </div>
    

Outline color

Identifier
outline-color-#colorName

This color class enables outline color properties to an element if assigned. It does work in association with the outline-width, which defines how thin or thick the rendering outline color should look.

Note that a outline will only be visible as long as other outline property is set such as the outline width.

To instantiate this class, simply choose any colorname and append the color name to the class identifier to create a outline color class. Go to code editor to test all the available color class

A thick yellowMetal outline color

A thick redOrange Outline color
  
    <div class="outline-color-yellowMetal outline-sol-lar">
    A thick yellowMetal outline color
    </div>
    <div class="outline-color-red outline-sol-lar">
    A thick outline redOrange color
    </div>
    

Combining color class

Combining different class properties and assigining to one single html element is a doable thing when constructing property value for any target element. But care must be taken when combining value for this property, especially color, as a high constrasting characteristics must be established for clearer visibility.

A black foreground and yellow background

  
    <div class="color-text-black color-bg-yellow ">
       A black foreground and yellow background
    </div>

A white foreground and bahamaBlue background

  
    <div class="color-set-bahamaBlue">
           A white foreground and bahamaBlue background
    </div>

Bad practice of color combination

If in an attempt of assigning a background color and color set class to a single element at the same time, the (color-set class ) property takes precedent over the (background color). Background class and color-set may not be a good practice when considering them simultaneously on the same class attribute, but color text and color background can be combined to achieve a high contrasting result.

  
    <div class="color-bg-black color-set-yellow ">
      Background and Set class not permissible
    </div>

Color Overriden

Overriding element property is applicable when specificity of the selector is the priority. In other words, If parent element property is declared without sibling property being declared, the descendant element inherits the parent property.

Parent Inheritance

Yellow color is inherited from div element.

 
       <div class="color-text-yellow ">
               <p> I am the sibling of DIV   </p>
       </div> 

Sibling Overridden

red color is overridden, only the sibling color is considered.

 
       <div class="color-text-red ">
               <p class="color-text-green"></p>
       </div> 

Gradient color

Identifier
gradient-#colorName

This class is used when you intend to apply gradient background fill only to any type of html element, most importantly the block element. To instantiate this class, simply choose any colorname and append the color name to the class identifier to create a color background class.

How to set up gradient color class

  
     gradient-acapulo
     gradient-alizarinCrimson
     gradient-appleBlossom
    

Apply to html element

acapulo
alizarinCrimson
appleBlossom
  
        <div class="gradient-acapulo"></div>
        <div class="gradient-alizarinCrimson"></div>
        <div class="gradient-appleBlossom"></div>
    

Browser Supports

Code Editor - Customizes CSS plugin with ease

G16framework code it yourself is a handy tool for any code enthusiast who love to establish and extend the style rules already applied to the plugin.

Important: To override a new defined style rule on the existing target plugin, you must implement / inject a keyword (!important) immediately after a new value is being set.

Newly design will be released soon!.

The view only show very small proportion of the original size, copy the code and view in a larger screen.