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.

Installation

Single Installation

Single installation option requires only a fraction from the g16components will be installed. Follow the instruction below on how to install a single plugin into your HTML document. The code snippets show the application of accordion, bar and badge, use the same approach for other installations that require one plugin.

  
	<!DOCTYPE html>
		<html>
		<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0;
		maximum-scale=1.0; user-scalable=0;" />
		<meta name="description" content="" />
		<!--Single Installation Style Sheet Rule -->
		<!--Accordion Style sheet -->
		<link href="g16library/css/accordion.css" rel="stylesheet" />
		<!--Bar Style sheet -->
		<link href="g16library/css/bar.css" rel="stylesheet" />
		<!--Badge Style sheet -->
		<link href="g16library/css/badge.css" rel="stylesheet" />
		  
		</head>
		<body>
		</body>
	</html>
	

Mulitple Installation

For multiple requests, you would call the g16components.css, this file contains all the necessary plugins require to build website from scratch without writing a single line of code.

  
	<!DOCTYPE html>
		<html>
		<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0;
		maximum-scale=1.0; user-scalable=0;" />
		<meta name="description" content="" />
		<!--Multiple Installation Style Sheet Rule -->
		<!--G16components Style sheet -->
		<link href="g16library/css/g16components.css" rel="stylesheet" />
		  
		</head>
		<body>
		</body>
	</html>
	

Implementation

Inline Class Placement

With the framework already installed, user can now call the class inline within document. For instance, to assign margin to all the edges of an element. The below code snippet is used.

  
    <article class="margin-all-lar">
       <p>This class apply large margin to the four edges of the containing block.</p>
    </article>
       

Multiple Inline Class Placement

You are not restricted to a single class assignment on any HTML element you intend to use, g16framework gives you ample choice by extending the property to as many number of class as possible.

The example shows the extension of HTML element using different css plugin variables to style the embedding contents.

  •   50% liquid container using container class
  •   Foreground and background color using color-set class
  •   Alignment of text using align-center class
  •   Enlarged the embedding texts by 50% using medium class
  •   Google font named arvo using gfont-arvo class
  •   Apply new text color to the paragraph using color-text class
  •   Underline the keyword functionalities using border-color class

One of the functionalities of css plugins.

  
  
            <!--Reference: Color, alignment, size and google font class -->
            <div class="container-liquid-50 color-set-blueWhale align-center medium gfont-arvo">              
	            <p class="align-center color-text-white">
		            <!--Reference: Border class -->
	             One of the <span class="border-b-sma border-color-alizarinCrimson">functionalities</span> of css plugins.
	            </p>
            </div>    

Templates

Basic Template

With the framework already installed, you can begin to call the class inline within document using the general template set up or the boiler plate with your own style sheet to define specific rules.

  
   <!DOCTYPE html>
		<html>
		<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0;
		maximum-scale=1.0; user-scalable=0;" />
		<meta name="description" content="" />
		<!--Multiple Installation Style Sheet Rule -->
		<!--G16components Style sheet -->
		<link href="g16library/css/g16components.css" rel="stylesheet" />
		  
		</head>
		<body>
			<header class="cssplugin here">
				 <h1> </h1>
			</header>
			<section class="cssplugin here">
			  <article class="cssplugin here">
				 <h2></h2>
			  </article>
			</section>
			<footer class="cssplugin here">
			</footer>
		</body>
	</html>
       

Boliler Plate Support

You will need this to maintain consistency, browser compatibility and mobile browser optimization when kick starting your next project.

Basic Boiler plate

This is a blank HTML5 document that provides a basic page structure that is mostly found in web pages. It is a foundation for basic design.

  
	<!-- Basic HTML5 Page Structure -->
    <header>
      <h1></h1>
    </header>
    <section>
       <article>
           <h2></h2>
           <p></p>
       </article>
    </section>
    <footer>
    </footer>

Advance Boiler plate

This contain more robust web page structure with the inclusion of some CSS comments on how to implement CSS plugins in any existing project using your own external CSS style rule.

  
	<header class="container-basic">
		<h1 class="css-plugin-here"></h1>
	</header>
	<section class="container-basic">
		<article class="css-plugin-here">
			<h2 class="css-plugin-here">
				...
			</h2>
			<p class="css-plugin-here">
				...
			</p>
		</article>
		<article class="css-plugin-here">
			<h2 class="css-plugin-here">
				...
			</h2>
			<p class="css-plugin-here">
				...
			</p>
		</article>
	</section>
	<footer class="container-basic">
		
	</footer>
  
	/*
	* YOUR BOILER PLATE  created by [ Place your name here ]
	*
	* @copyright Copyright 2016 [ Place your name here ]
	* @license   [ Place your attribution here ]
	* @author    [ Place your name here ]
	ToC
	1. defaults   
	2. structure  
	3. links and navigation  
	4. fonts  
	5. images
	Notes
	*/      
	/* --------- 1. Defaults  --------- */
	* {
	margin: 0;
	padding: 0;
	}
	body { }
	/* --------- 2. Structure  --------- */
	header.container-basic{}
	section.container-basic{}
	article{}
	footer.container-basic{}
	/* --------- 3. Links and Navigation  --------- */
	/*3a. Links*/
	a {}
	a:link { }
	a:visited { }
	a:hover   { }
	a:active {}
	/*3b. Navigation*/
	nav{
	}
	/* --------- 4. Fonts  --------- */
	
	html { font-size: 62.5%; }/*base font*/
	h1 { font-size: 14px; /*older browsers that do not support rem units*/
	    font-size: 1.4rem; } 
	p { font-size: 12px; /*older browsers that do not support rem units*/
	  font-size: 1.2rem; }
	/*font family*/

CSS Plugins List