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

Tabs are useful horizontal navigation traditionally arrayed in hierarchical order. Tabs are great for displaying contents with the aid of clickable buttons known as tab.

Tabs allow embedding of multiple screens into a single parent container, thus gives the user a free access to navigate through the contents directly.

Tab labels should consist of either icons or text only, and you should be kept to the minimum.

Tabs are fanstatic for displaying multiple sibling views, but you should limit tabs to no more than four per parent container.

Basic Tabs

User can create more tabs repeatedly by copying label and assign a unique ID to indicate target tab. Ensure assigned ID name is consistent with both the input and label.

  
        <input checked id="tab1" name="tabs" type="radio">
        <label for="tab1">Tab One</label>
        <input id="tab2" name="tabs" type="radio" value="Two">
        <label for="tab2">Tab Two</label>
        <input id="tab3" name="tabs" type="radio">
        <label for="tab3">Tab Three</label>
        <input id="tab4" name="tabs" type="radio">
        <label for="tab4">Tab Four</label>       

Tab headers can be customized with border and color by assigning a class name to the label element as shown below

Adding color

Color is added to both the foreground and the background header with color-set class, use color-text to apply color to foreground only.

  
        <input checked id="tab1" name="tabs" type="radio">
        <label for="tab1" class="color-set-amber">Tab One</label>      
Adding border
  
        <input checked id="tab1" name="tabs" type="radio">
        <label for="tab1" class="border-all-xxs">Tab One</label>      

active tab

Adding color to an active tab to differentiate between inactive links and the active link can be done using the above css code snippet. Copy and paste the code in your new css style sheet and change assign new values.

  
       [class*="tabs-"] input:checked + label {
        background: rgba(0,0,0,.2); /*-- Background--*/
        color: #333; /*-- Foreground--*/
    }    

Panel One Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Panel Two Content

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.

Panel Three Content

Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Panel Four Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

  
        <!-- Tab Main Container -->
    <div class="tabs-basic border-all-xxs">
        <!-- Tab headers -->
	<input checked id="one" name="tabs" type="radio">
	<label for="one" class="color-set-amber">Tab One</label>
	<input id="two" name="tabs" type="radio">
	<label for="two">Tab Two</label>
	<input id="three" name="tabs" type="radio">
	<label for="three">Tab Three</label>
	<input id="four" name="tabs" type="radio">
	<label for="four">Tab Four</label>
    <!-- Tab Panel Container -->
	<div class="panels color-set-wildSand">
        <!-- Tab Panel -->
		<div class="panel">
			<h2>Panel One Content</h2>
			<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. 
			Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. 
			Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
			<p>Nam sodales, mi eu convallis adipiscing,
			tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, 
			vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla
			at, malesuada in eros.</p>
		</div>
		<div class="panel">
			<h2>Panel Two Content</h2>
			<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. 
			Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. 
			Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
			<p>Nam sodales, mi eu convallis adipiscing, 
			tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, 
			vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla
			at, malesuada in eros.</p>
		</div>
		<div class="panel">
			<h2>Panel Three Content</h2>
			<p>Nam sodales, mi eu convallis adipiscing, ligula justo 
			consectetur tellus, tincidunt vestibulum tortor elit a augue. 
			Ut elementum ultricies orci, vel luctus neque varius in. 
			Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
 		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			Mauris vel leo sem. Sed nec quam sit amet lorem volutpat 
			ullamcorper ut sed massa. Sed vel felis velit. 
			Nullam et turpis sed dui auctor vehicula quis a dui.</p>
			<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis.
			Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. 
			Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
		</div>
		<div class="panel">
			<h2>Panel Four Content</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			Mauris vel leo sem. Sed nec quam sit amet lor</p>
			<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis.
			Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl.
			Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
		</div>
	</div>
</div>   

Tabs - Zoom Effect

To create zoom effect on click, just assign tab-zoom class name to the main tab container

  
      <!-- Tab Main Container -->
      <div class="tabs-zoom">
      </div> 

Panel One Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Panel Two Content

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.

Panel Three Content

Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Panel Four Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Tabs - Animate Left Effect

To create zoom effect on click, just assign tab-animateLeft class name to the main tab container

  
      <!-- Tab Main Container -->
      <div class="tabs-animateLeft">
      </div> 

Panel One Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Panel Two Content

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.

Panel Three Content

Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Panel Four Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Tabs - Animate Right Effect

To create zoom effect on click, just assign tab-animateRight class name to the main tab container

  
      <!-- Tab Main Container -->
      <div class="tabs-animateRight">
      </div> 

Panel One Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Panel Two Content

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.

Panel Three Content

Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

Panel Four Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.

Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.

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.