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

Basic table

Basic table showing five columns to include theader, tbody and tfooter.

Country Name President Population(Mil) Male (Mil) Female (Mil)
Population Count of Country of the world:W.H.O
United States Barack Obama 200 80 120
Canada Justin Trudeau 70 30 40

Border table

Table with border.

Country Name President Population(Mil) Male (Mil) Female (Mil)
Population Count of Country of the world:W.H.O
United States Barack Obama 200 80 120
Canada Justin Trudeau 70 30 40
 
            <table class="border-all-xxs">     
            </table>    
            

Color table

Table with color.

Country Name President Population(Mil) Male (Mil) Female (Mil)
United States Barack Obama 200 80 120
Canada Justin Trudeau 70 30 40
 
            <table class="color-set-yellowMetal">               
            </table>    
            
Country Name President Population(Mil) Male (Mil) Female (Mil)
United States Barack Obama 200 80 120
Canada Justin Trudeau 70 30 40
 
            <table class=""color-set-amazon">     
                <thead class="color-set-blazeOrange">
                <tr>
                <th scope="col"></th>
                </tr>
                </thead>
            </table>    
            

Shadow table

Table with box shadow, there are more than 14 predesigned box-shadow properties already built into the framework that may be played with to further give a nifty table presentation.

Country Name President Population(Mil) Male (Mil) Female (Mil)
United States Barack Obama 200 80 120
Canada Justin Trudeau 70 30 40
Population Count of Country of the world:W.H.O
 
            <table class="box-shadow-floated">               
            </table>    
            

Zebra Stripping Table

This type of table design is the best option when legibility and clarity of data is the top priority. It is a method use to alternate color of rows in a table when presented with a large amount of data.

The class zebraStripped property can be extended with the aid of nth-child(N), a pseudo-selector, by stripping off the odd and even rows and re-assign new set of property respectively. Copy and paste the css code snippets.

 
                              /* stripping all odd rows numbers */
                            .zebraStripped tbody tr:nth-child(2n+1){
                              /*declare new property here*/
                            }
                             /* stripping all even rows numbers */
                             .zebraStripped tbody tr:nth-child(2n){
                             /*declare new property here*/
                            }
            
Country Name President Population(Mil) Male (Mil) Female (Mil)
United States Barack Obama 200 80 120
Canada Justin Trudeau 70 30 40
Mexico Unknown 70 30 40

Hover Table

To create hoverable color row, use hover color class and assign the class name to the table row tr.

Country Name President Population(Mil) Male (Mil) Female (Mil)
United States Barack Obama 200 80 120
Canada Justin Trudeau 70 30 40
Mexico Unknown 70 30 40
html tag
 
                            <tr class="hover-set-funGreen">
                              <td > <td/>
                            <tr/>
            

Responsive Table

Responsive table allows the table elements to adapt its design to varying screen resolutions for easy optimization to major devices.

In order to accomplish this using css only, the following simple logic need to be adhere to

  •  Create a speckless semantically html mark up
  •  Organize table to the standard structure such as thead, tbody, tfoot
  •  Transform each table row into block level elements to eliminate horizontal scrolling.

In a smaller screen, the thead would require a new approach to displaying its corresponding title relative to the column within a row.

In order to achieve, recall the below css code snippet and change the title in css file as shown.

       
                tbody > tr > td:nth-of-type(1):before {
                content: "Title";
                }
   

Try to view this table chart in a smaller screen device.

Country Name President Population(Mil) Male (Mil) Female (Mil)
United States Barack Obama 200 80 120
Canada Justin Trudeau 70 30 40
Mexico Unknown 70 30 40

html semantic structure for table

       
       <table>
        <!-- Table Header -->
        <thead>
        <tr>
	        <th scope="col"></th>
	        <th scope="col"></th>
	        <th scope="col"></th>
	        <th scope="col"></th>
	        <th scope="col"></th>
        </tr>
        </thead>
        <!-- Table Body -->
        <tbody>
        <!-- first row -->
        <tr>
	        <td></td>
	        <td></td>
	        <td></td>
	        <td></td>
	        <td></td>
        </tr>
        <!-- second row -->
	        <tr>
	        <td></td>
	        <td></td>
	        <td></td>
	        <td></td>
	        <td></td>
        </tr>
	        <!--Table Footer -->
       
        </tbody>
        <tfoot>
        <tr>
	        <td colspan="5">     
	        </td>
        </tr>
        </tfoot>
      </table>
            

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.