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

Featured Utilities

Utility plugins provide common helper to html elements and are used to:

Layout

You can change the position of any html elements to left, right, top, bottom, set to relative, absolute, stack or even auto using the layout class.

Layout classes Definition
Layout class sets position of html elements.
fixed Position is calculated based on the absoluted box model.
auto Set the position of the element to the center using margin
inline Display element inline
block Display element as a block box
relative Shift or move the box top and bottom vertically and left-right horizontally
absolute Position is respect to the containing block and thus remove from the document flow.
top 0 Set the location of the absolutely positioned element to zero
top10, top20.... top100 Move the location of the absolutely positioned element by 10% ....100% from the top.
bottom10, bottom20.... bottom100 Move the location of the absolutely positioned element by 10% ....100% from the bottom.
left10, left20.... left100 Move the location of the absolutely positioned element by 10% ....100% from the left.
right10, right20.... right100 Move the location of the absolutely positioned element by 10% ....100% from the right.
indexNegative Set negative stack level to the rendering box
index-10 Set stack level by 10 and overlap any preceding box with lower stack level number < 10
index-20 Set stack level by 20 and overlap any preceding box with lower stack level number < 20
index-30 Set stack level by 30 and overlap any preceding box with lower stack level number < 30
index-40 Set stack level by 40 and overlap any preceding box with lower stack level number < 40
index-50 Set stack level by 50 and overlap any preceding box with lower stack level number < 50
indexMax Set stack level to maximum of 9999 and overlap any preceding box with lower stack level number < 9999

Samples

The box below has its containing block set to relative, with its embedding sibling boxes absolutely positioned 0% from the top, left and right corner of the parent block. It however employed the size and and height class to set its corresponding width and height respectively.

Color class was used to differentiate between the sibling blocks absolute positioning.

    <!-- Containing Block -->
    <div class="relative  size400px height-200 auto color-set-alizarinCrimson">
        <!-- Child Blocks -->
        <div class="top0 left0 size100px height-100 color-set-affair">
        </div>
        <div class="top0 right0 color-set-albescentWhite size100px height-100 ">
        </div>
    </div> 
    

Font size

The font size class is dependent of the font size of the root element, if you chose or set font size at the root of the html to 14px for instance, then font size class such as xxsmall would be shrunk by 12.5%, and this is true for any value you assigned to the root html, and if unspecified, the default value 16px is used.

The flexibility and ease is spontaneous, you can change the entire font size by assigining a font size class to body element like this:

                        <body class="medium">
                           <div>
                               <p></p>
                           </div>
                        </body>
    

This indicates that all the sibling elements found within the body element, in this case we have div and p, their font-size value would be increased by 200% or be multiply by 2 (2 x original font-size)rem courtesy of medium class. The same is true for the rest of the font-size class.

For large class, the new font size would be multiplied four times (4 x original font-size)rem.

Flexibility of size class

Applying font size class to a container

I am medium size class with value 2rem;

                        <body class="medium">
                           <div>
                               <p> I am medium size class with value 2rem;</p>
                           </div>
                        </body>
    

Overriding the parent assigned class

This can occur if the sibling or descendant element has a declared value and if not found, the parent value is considered instead.

I have just overridden my parent size and my new value is 1rem.

        <body class="medium">
            <div>
                <p class="normal"> I have just overridden my parent size and my new value is 1rem</p>
            </div>
        </body>
    

very very tiny size

                        <body class="xxsmall">
                           <div>
                               <p>very very tiny size</p>
                           </div>
                        </body>
    

very small size

                        <body class="xsmall">
                           <div>
                               <p>very small size</p>
                           </div>
                        </body>
    

Normal size

                        <body class="normal">
                           <div>
                               <p>normal size</p>
                           </div>
                        </body>
    

medium size

                        <body class="medium">
                           <div>
                               <p>medium size</p>
                           </div>
                        </body>
    

large size

                        <body class="large">
                           <div>
                               <p>large size</p>
                           </div>
                        </body>
    

xtra large size

                        <body class="xlarge">
                           <div>
                               <p>xtra large size</p>
                           </div>
                        </body>
    

jumbo

                        <body class="jumbo">
                           <div>
                               <p>jumbo size</p>
                           </div>
                        </body>
    

Flow

A floated element is one whose float property has a value other than none. The element can be shifted to the left (using the value left) or to the right (using the value right); non-floated content will flow along the side opposite the specified float direction.

Floating classes Definition
Floating class shift position of html elements left right.
left Float element to the left
right Float element to the right
clearfix Clear floated elements

Samples

The box below has its containing block size set to 300px and 200px wide and tall respectively, with its embedding sibling boxes floated to left and right. Color class was used to differentiate between the sibling blocks floating position.

    <!-- Containing Block -->
    <div class="color-set-silver size300px height-200">
        <!-- Child Block -->
        <div class="left size100px height-100  color-set-alice">
        </div>
        <div class="right size100px height-100 color-set-almond">
        </div>
    </div> 
    

Object size

Size class alters the original width and height or set new width and height measurement (fixed value in px) to any target html block level element such as div, header, section, p e.t.c.

Its width fixed values range from 50px to 1200px and the height fixed values from 50px to 750px.

size classes Definition
size class creates new fixed measurement to html block elements.
size50px Set element new measurement to 50px fixed width
size100px Set element new measurement to 100px fixed width
size150px Set element new measurement to 150px fixed width
size200px, ..... size1200px Set element new measurement to 200px, 250px .... 1200px fixed width.
height-50px Set element new measurement to 50px fixed height
height-100px Set element new measurement to 100px fixed height
height-150px, ..... height-750px Set element new measurement to 150px,.... 750px fixed height.

Samples

The box below has its containing block size set to 300px and 200px wide and tall respectively, and its embedding sibling boxes width and height were set to 150px by 100px, 100px by 100px respectively. The color class was used to differentiate between the sibling blocks measurement in width and height.

    <!-- Containing Block -->
    <div class="color-set-silver size300px height-200">
        <!-- Child Block -->
        <div class="left size100px height-100  color-set-alice">
        </div>
        <div class="right size100px height-100 color-set-almond">
        </div>
    </div> 
    

Shape

Shape class changes the edges of target element.

shape classes Definition
circle Transform element to a circular form, usually in a solid shape.
square Transform rounded, or circle element into a square solid shape.
rad-all-xxs Add a very very tiny rounded corners to all four side (T-R-B-L) of element, see keyword for more definition.
rad-all-xsm Add a very small rounded corners to all four side (T-R-B-L) of element, see keyword for more definition.
rad-all-sma, rad-all-med, rad-all-lar, rad-all-xla, rad-all-xxl Add a small, medium, large, very large and extra large rounded corners to all four side (T-R-B-L) of element respectively, see keyword for more definition.
rad-tr-xxs, rad-tr-xsm, rad-tr-sma, rad-tr-med, rad-tr-lar, rad-tr-xla, rad-tr-xxl Add a very very small, very small, medium, large, very large and extra large rounded corners to 1 side (TopRight) of element respectively, see keyword for more definitions.
rad-tl-xxs, rad-tl-xsm, rad-tl-sma, rad-tl-med, rad-tl-lar, rad-tl-xla, rad-tl-xxl Add a very very small, very small, medium, large, very large and extra large rounded corners to 1 side (TopLeft) of element respectively, see keyword for more definitions.
rad-bl-xxs, rad-bl-xsm, rad-bl-sma, rad-bl-med, rad-bl-lar, rad-bl-xla, rad-bl-xxl Add a very very small, very small, medium, large, very large and extra large rounded corners to 1 side (BottomLeft) of element respectively, see keyword for more definitions.
rad-br-xxs, rad-br-xsm, rad-br-sma, rad-br-med, rad-br-lar, rad-br-xla, rad-br-xxl Add a very very small, very small, medium, large, very large and extra large rounded corners to 1 side (BottomRight) of element respectively, see keyword for more definitions.
rad-all-r-xxs, rad-all-r-xsm, rad-all-r-sma, rad-all-r-med, rad-all-r-lar, rad-all-r-xla, rad-all-r-xxl Add a very very small, very small, medium, large, very large and extra large rounded corners to 2 side (TopRight and BottomRight) of element respectively, see keyword for more definitions.
rad-all-l-xxs, rad-all-l-xsm, rad-all-l-sma, rad-all-l-med, rad-all-l-lar, rad-all-l-xla, rad-all-l-xxl Add a very very small, very small, medium, large, very large and extra large rounded corners to 2 side (TopLeft and BottomLeft) of element respectively, see keyword for more definitions.
rad-all-t-xxs, rad-all-t-xsm, rad-all-t-sma, rad-all-t-med, rad-all-t-lar, rad-all-t-xla, rad-all-t-xxl Add a very very small, very small, medium, large, very large and extra large rounded corners to 2 side (TopLeft and TopRight) of element respectively, see keyword for more definitions.
rad-all-b-xxs, rad-all-b-xsm, rad-all-b-sma, rad-all-b-med, rad-all-b-lar, rad-all-b-xla, rad-all-b-xxl Add a very very small, very small, medium, large, very large and extra large rounded corners to 2 side (BottomLeft and BottomRight) of element respectively, see keyword for more definitions.

Circle shape

Before adding circle class

After adding circle class

    <!-- Before Block -->
    <div class="color-set-silver size200px height-200">       
    </div> 
    <!-- After Block -->
    <div class="color-set-silver size200px height-200 circle">       
    </div> 
    

A very very small rounded corners

What flyer is? A flyer is intended to be held and read in the hand. By it's nature, it can contain much more detailed information than you might find in a poster. A flyer can be kept and read later, where a poster would not.

    <!-- xxs rounded corner -->
    <div class="color-set-silver rad-all-xxs">    
      <p>
        What flyer is?
        A flyer is intended to be held and read in the hand. By it's nature,
        it can contain much more detailed information than you might find in a poster.
            A flyer can be kept and read later, where a poster would not. 
        </p>   
    </div> 
    

A very small rounded corners

What flyer is? A flyer is intended to be held and read in the hand. By it's nature, it can contain much more detailed information than you might find in a poster. A flyer can be kept and read later, where a poster would not.

    <!-- xsm rounded corner -->
    <div class="color-set-silver rad-all-xsm">    
      <p>
        What flyer is?
        A flyer is intended to be held and read in the hand. By it's nature,
        it can contain much more detailed information than you might find in a poster.
            A flyer can be kept and read later, where a poster would not. 
        </p>   
    </div> ; 
    

A medium rounded corners

What flyer is? A flyer is intended to be held and read in the hand. By it's nature, it can contain much more detailed information than you might find in a poster. A flyer can be kept and read later, where a poster would not.

    <!-- med rounded corner -->
    <div class="color-set-silver rad-all-med">    
      <p>
        What flyer is?
        A flyer is intended to be held and read in the hand. By it's nature,
        it can contain much more detailed information than you might find in a poster.
            A flyer can be kept and read later, where a poster would not. 
        </p>   
    </div> ; 
    

A topright rounded corners

What flyer is? A flyer is intended to be held and read in the hand. By it's nature, it can contain much more detailed information than you might find in a poster. A flyer can be kept and read later, where a poster would not.

    <!-- topright rounded corner -->
    <div class="rad-tr-med color-set-silver container-basic">    
      <p>
        What flyer is?
        A flyer is intended to be held and read in the hand. By it's nature,
        it can contain much more detailed information than you might find in a poster.
            A flyer can be kept and read later, where a poster would not. 
        </p>   
    </div> ; 
    

A topright and bottomleft rounded corners

What flyer is? A flyer is intended to be held and read in the hand. By it's nature, it can contain much more detailed information than you might find in a poster. A flyer can be kept and read later, where a poster would not.

    <!-- topright bottomleft rounded corner -->
    <div class="rad-tr-med rad-bl-med color-set-silver container-basic">    
      <p>
        What flyer is?
        A flyer is intended to be held and read in the hand. By it's nature,
        it can contain much more detailed information than you might find in a poster.
            A flyer can be kept and read later, where a poster would not. 
        </p>   
    </div> ; 
    

Exception

Exception class remove, nullifies and deactivate any form of assigned property already set or defined in the target html element.

.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 .no-underline

.no-mar-pad

Removes margin and padding property from element

Before

Heading

After

Heading

  
        <header>
           <h1  class="no-mar-pad">Heading</h1>
        </header>      
            

no-padding

Removes all padding property from elements such as found in a containing block.

Before

Heading

After

Heading

  
        <header>
           <h1 class="no-padding">Heading</h1>
        </header>      
            

no-margin

Removes all margin property from element

Before

Heading

After

Heading

  
        <header>
           <h1 class="no-margin">Heading</h1>
        </header>      
            

no-ver-padding

Removes top and bottom padding property from element if applied.

Before

Heading

After

Heading

  
        <header>
           <h1  class="no-padding">Heading</h1>
        </header>      
            

no-ver-margin

Removes top and bottom margin property from element if applied.

Before

Heading

After

Heading

  
        <header>
           <h1  class="no-ver-margin">Heading</h1>
        </header>      
            

no-hor-padding

Removes left and right padding property from element if applied.

Before

Heading

After

Heading

  
        <header>
           <h1  class="no-hor-padding">Heading</h1>
        </header>      
            

no-hor-margin

Removes left and right margin property from element if applied.

Before

Heading

After

Heading

  
        <header>
           <h1  class="no-hor-margin">Heading</h1>
        </header>      
            

.no-outline

Removes outline property from element if applied.

Before

Heading

After

Heading

  
        <header class="no-outline">
           <h1>Heading</h1>
        </header>      
            

no-radius

Removes all rounded corners property from element if applied.

Before

Heading

After

Heading

  
        <header>
           <h1  class="no-radius">Heading</h1>
        </header>      
            

disabled

Disable and disengage active element if applied.

Before

After


  
                                
            <p>  
	            <input type="checkbox" name="checkme" class="disabled">
	            <label class="checkbox disabled">Help me (I am Disabled)</label>
            </p>
            <p>
	            <input type="radio" name="rad1" class="disabled">
	            <label class="radio disabled">Help me (I am Disabled)</label>
            </p>
            <button class="button disabled color-set-almond">Disable</button>   
            

hide

This class hides any html element.

Before

I am very visible right now

After

My button is hidden right now

  
                                
    <p>  
        My button is hidden right now <button class="button hide color-set-almond">Disable</button>   
    </p>
         
            

Rotation

Rotation plugin is a useful class that effect the rotation of an element by set parameter ( which may be any target degree) about its original origin defined by transform property.

Rotation classes Definition
Rotation class sets rotation of html elements.
rotate0 Rotate element by 0° about its origin.
rotate30 Rotate element by 30° about its origin.
rotate60 Rotate element by 60° about its origin.
rotate90 Rotate element by 90° about its origin.
rotate30 Rotate element by 30° about its origin.
rotate60 Rotate element by 60° about its origin.
rotate90 Rotate element by 90° about its origin.
rotate120 Rotate element by 120° about its origin.
rotate150 Rotate element by 150° about its origin.
rotate180 Rotate element by 180° about its origin.
rotate210 Rotate element by 210° about its origin.
rotate240 Rotate element by 240° about its origin.
rotate270 Rotate element by 270° about its origin.
rotate300 Rotate element by 300° about its origin.
rotate330 Rotate element by 330° about its origin.
rotate360 Rotate element by 360° about its origin.

Samples

Rotation class can be assigned to any html element using class attribute of the target element.

            <div class="rotate60">
                <p>
                    60 degree rotation
                </p>
            </div>    
                

Rotating block level element div

30 degree

            <div class="rotate30">
                <p>
                    rotate30 degree rotation
                </p>
            </div>    
                

Rotating block level element by 60 degree heading

60 degree

            <h1 class="rotate60">
               60 degree
            </h1>    
                

Rotating image by 90 degree

            <img src="theme/placeholders/newentry/template_placeholder-03.png"
                class="rotate90 image220" /> 
   
                

Rotating element by 120degree

120 degree

            <div class="rotate120">
                <p>
                    rotate120 degree rotation
                </p>
            </div>    
                

Divider

A divider is a thin fine line that divides and separates contents, list of contents, group of contents with a well defined separation.

Full Width Divider

This divider separates contents with 90% of the affected sectional area.

  
                                
    <p>  
        My button is hidden right now <button class="button hide color-set-almond">Disable</button>   
    </p>
    <div class="divider-full"></div>                                          
    <p>  
        My button is hidden right now <button class="button hide color-set-almond">Disable</button>   
    </p>
         
            

Outlines

Identifier
outline-type-width

Outline style class property set the style of the outline drawn around an element, the color of this class can be changed by assigning a outline-color class in order to make it more discernible regardless of any background colors that may have been set.

Outline type variation
This property takes the same value as the border-style with exception of hidden, the outline style takes up these values
inset dotted dashed solid ridge outset groove.

Size variation
The width of the outline is determined using three different keyword values as identifiers to assign width of the outline drawn around an element. sma med lar which indicate small, medium, and large outline width respectively.

Sample code

Below code snippet applies red color outline with a small dash style to a -div- element.

 
            <!-- The dash outline --> 
            <div class="outline-das-sma">
            </div>
            <div class="outline-das-med">
            </div>
            <div class="outline-das-lar">
            </div>
            <!-- The inset outline --> 
            <div class="outline-ins-sma">
            </div>
            <div class="outline-ins-med">
            </div>
            <div class="outline-ins-lar">
            </div>
            <!-- The solid outline --> 
            <div class="outline-sol-sma">
            </div>
            <div class="outline-sol-med">
            </div>
            <div class="outline-sol-lar">
            </div>
            <!-- The dotted outline --> 
            <div class="outline-dot-sma">
            </div>
            <div class="outline-dot-med">
            </div>
            <div class="outline-dot-lar">
            </div>
            <!-- The double outline --> 
            <div class="outline-dbl-sma">
            </div>
            <div class="outline-dbl-med">
            </div>
            <div class="outline-dbl-lar">
            </div>
            

Outline Class - dash style

Small outline drawn with alizarinCrimson color
medium outline drawn with black color
large outline drawn with yellow color

Outline Class - inset style

Small inset outline drawn with alizarinCrimson color
medium inset outline drawn with black color
large inset outline drawn with yellow color

Outline Class - solid style

Small outline drawn with alizarinCrimson color
medium solid outline drawn with black color
large solid outline drawn with yellow color

Outline Class - double style

Small double outline drawn with alizarinCrimson color
medium double outline drawn with black color
large double outline drawn with yellow color

Outline Class - dotted style

Small dotted outline drawn with alizarinCrimson color
medium dotted outline drawn with black color
large dotted outline drawn with yellow color

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.