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

A badge is a micro alert that provides an additional information to user regarding a specific item. It is generally used as a notifier, counter, and an alert in creating a user friendly interface such as gateway link to shopping cart, box message e.t.c.

Badge is identified by badge badge-top badge-center badge-enclose and badge-tag and are used as a foundation to creating different kind of badges in association with various html-elements such as p, div e.t.c.

Badge tag may revolve around different location relative to its target item, it could be centered, left, right or enclosed.

Plugin Class

Classes Definition
badge Container holding corresponding contents within containing block.
badge-tag Sibling container responsible for the floated content.
badge-top Defines the top position of the embedding tag.
badge-icon Enclosed icon related content.
badge-center Defines the center position of the embedding tag.
badge-enclose Contents are embedded within the tag container.

Structure

badge plugin

Set Up

Start by setting up the badge container and assign the class attribute badge to any appropriate html element such as shown below

  
        <div class="badge">      
        </div>
                                

With the container already set up, (badge tag) class is called and can be assigned to text level content element such as span to store relatively any notification or counter related information that are relevant to the its parent element such as div.

  
        <div class="badge">
	        Basic Tag<span class="badge-tag"> 28</span>
        </div>
                        

Tag Positions

The position may be to the top right, centered, or enclosed within the parent element.

Top Position

Inbox20
  
        <p class="badge-top">
	        Inbox<span class="badge-tag">20</span>
        </p>

The visual look of the tag can be changed by assigning a new color, changing the shape of the tag. You can fully interact with this class to unleash wide varieties of options using the code editor

Centered Position

This demo applied an icon to the tag and applied (blaze orange) to the background of the tag container. The icon can be changed depending on your choice.

Amazon Information
  
        <div class="badge-icon">
	       Amazon Information<span class="circle color-set-blazeOrange badge-tag icon icon-amazon"></span>
        </div>

This demo applied a rounded features to the tag and applied (blaze orange) to the background of the tag container.

Amazon Latest Product Counts3428
  
        <div class="badge-center">
    	      Amazon Latest Product Counts<span class="rounded color-set-blazeOrange badge-tag">3428</span>
        </div>

Enclosed Position

To set up a successful enclosed position tag, two span element may be required instead of one span, the first span is assigned an icon class and the later display the counter or notification. Run the live test using code editor.

A badge tag with rounded and yellowMetal color with a silver colored icon, see this in action using the using code editor.

20
  
        <div class="badge-enclose">
	        <span class="icon icon-you color-set-silver"></span> 
	        <span class="badge-tag color-set-yellowMetal rounded">20</span>     
        </div> 
 

Custom Setting

The properties of badge plugin can be customized by changing the color, icon, the background and position.

Custom Option Setting

Badge color

10

Color set class is applied to the two affected (span) elements available in the badge-enclose class to effect the change.

    <div class="badge-enclose">
        <!-- Changing color with color-set class applied to span"-->
	    <span class="icon icon-bullhorn color-set-blueWhale"></span> 
	    <span class="badge-tag circle color-set-carnation ">10</span>     
    </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.