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

Input Controls      new released style

Form input control is borderless by default, so to make it look as shown below in the demo, assign a border property to the class attribute of the element.

Input Set



 
    <form>
        <label class="input" for="name"> First Name</label>
        <input type="text" name="firstname" id="firstname" class="border-all-xxs" 
    </form>
                    

Placeholder Input

 
        <form>
             <input type="text" name="firstname" id="firstname" class="border-all-xxs" 
                 placeholder="First Name">
        </form>
        

TextBox Borderless


 
        <form>
             <label class="input" for="name"> First Name</label>
             <input type="text" name="firstname" id="firstname" placeholder="First Name">
        </form>
        

TextBox Underline

 
        <form>
             <label class="input" for="name"> First Name</label>
             <input type="text" name="firstname" id="firstname" class="border-b-xxs"
                  placeholder="First Name" >
        </form>
        

TextBox Colored

 
        <form>
             <label class="input" for="name"> First Name</label>
             <input type="text" name="firstname" id="firstname" class="color-set-black"
                  placeholder="First Name" >
        </form>
        

Icon TextBox

In order to create an icon inclined tex-box, the following class identifiers must be called, available in black and white.

Profile Icon Identifiers
iconProfileBlack iconProfileWhite

Search Icon Identifiers
iconSearchBlack iconSearchWhite

Username Icon Identifiers
iconUserWhite iconUserBlack

Password Icon Identifiers
iconPasswordBlack iconPasswordWhite

Icon Profile

 
        <form>
             <label class="input" for="name"> First Name</label>
             <input type="text" name="firstname" id="firstname" placeholder="First Name" 
                 class="iconProfileBlack border-all-xxs">
        </form>
        

Icon Username

 
        <form>
             <label class="input" for="name"> First Name</label>
             <input type="text" name="firstname" id="firstname" placeholder="First Name" 
                 class="iconUserBlack border-all-xxs">
        </form>
        

Icon Password

 
        <form>
             <label class="input" for="name"> First Name</label>
             <input type="text" name="firstname" id="firstname" placeholder="First Name" 
                 class="iconPasswordBlack border-all-xxs">
        </form>
        

Icon Search

 
        <form>
            
             <input type="text" name="search" id="search" placeholder="search" 
                 class="iconSearchBlack border-all-xxs">
        </form>
        

Animated Input

 
        <form>
             <input type="text" name="firstname" id="firstname" placeholder="First Name" 
                 class="border-all-xxs animation-input">
        </form>
        

Rounded Input

 
        <form>      
             <input type="text" name="firstname" id="firstname" placeholder="First Name" 
                 class="rad-all-xsm border-all-xxs">
        </form>
        

File Upload Basic

 
        <form>      
            <label class="file" for="file">
            <input id="file" type="file" class="file" name="imagefile"/>
            <span class="file">Upload File</span>
            </label>
        </form>
        

File Upload Icon

 
        <form>      
            <label class="file" for="file">
            <input id="file" type="file" class="file" name="imagefile"/>
            <span class="file icon icon-upload">Upload File</span>
            </label>
        </form>
        

colored


 
        <form>      
            <label class="file" for="file">
            <input id="file" type="file" class="file" name="imagefile"/>
            <span class="file color-set-astronaut">Upload File</span>
            </label>
        </form>
        

Disabled Input

 
        <form>      
             <input type="text" name="firstname" id="firstname" placeholder="First Name" 
                 class="border-all-xxs disabled">
        </form>
        

Option Buttons

The color of radio and checkbox button can be customized to the color of your choice by using the code snippet below, it can be placed inline or within a style sheet file (mystyle.css).

 
        <!--Inline placement sample showing how to change the color of checked or radio button-->
        <style>
        form input[type=checkbox]:checked + label:before, 
        form input[type=radio]:checked + label:before {
        /*----Change the background color this way --*/
        background: rgba(237, 28, 36, 1); /*-- Your new defined color --*/
        }
        </style>
                    

Radio

 
                    	    
                    <form>      
	                    <p>
	                    <input type="radio" name="radiobutton" checked id="slideshow">
	                    <label class="radio" for="slideshow">Slideshow</label>
	                    </p>
                    </form>
                

 
                    	    
                    <form>      
	                    <p>
	                    <input type="radio" name="radioDisable" checked id="slideshow"  class="disabled">
	                    <label class="radio" for="slideshow">Slideshow</label>
	                    </p>
                    </form>
                

Checkbox

 
                    	    
                    <form>      
	                    <p>
	                    <input type="checkbox" name="checkme" checked id="checkme">
	                    <label class="checkbox" for="checkme">Slideshow</label>
	                    </p>
                    </form>
                

 
                    	    
                    <form>      
	                    <p>
	                    <input type="checkbox" name="checkme" checked id="disableme">
	                    <label class="checkbox" for="disableme">Help me (I am Disabled)</label>
	                    </p>
                    </form>
                

Input Validation

Input Validation

You can validate data entered by user on the client side before sending it to the server by using HTML5 attributes that perform client-side validation.

Validation type - required = "required"

The required attribute is applied to the control element, in this case type text.

 
            <form >
                    <input type="text" name="firstname" id="firstname" class="border-all-xxs" 
                     required="required" placeholder="First Name">
            </form>
            

Validation type - pattern = "regex"

To validate that a text input box follows a character pattern, the following attribute is applied to the text control. Where regex is a regular expression that defines the concise precision of character pattern.

The above shows regular expression pattern that tests for the presence of a five- or nine-digit postal code

 
            <form class="validate-outline">
                    <input type="text" name="postal-code" id="postal-code" class="border-all-xxs" 
                      placeholder="Postal Code"  pattern="^\d{5}(\-\d{4})?$" >
            </form>
            

Styling Input Validation

Validation control action feedback can be styled by passing class name validation-outline to any form holder container as shown below

 
            <form class="validate-outline">
	            <p>
		            <input type="text" name="postal-code" id="postal-code"
		            class="border-all-xxs" placeholder="Postal Code" autofocus
		            pattern="^\d{5}(\-\d{4})?$">
	            </p>
            </form>
         
        

Class Identifier
validate-outline

This class show red outline-color if user fail to fill up the required field and green if successfully filled up

 
                    	    
                    <form class="validate-outline">      
	                    <p>
                          <input type="text" name="firstname" id="firstname" 
                                 placeholder="First Name" 
                                 class="border-all-xxs disabled">
	                    </p>
                    </form>
                

Icon validation

Class Identifier
validate-icon

This class shows warning icon if user fail to fill up the required field and green checkmark icon if successfully filled up.

 
                    	    
                    <form class="validate-icon">      
	                    <p>
                          <input type="text" name="firstname" id="firstname" placeholder="First Name" 
                                 class="border-all-xxs disabled">
	                    </p>
                    </form>
                

Selection Option

Select Basic

Colored Select

Select Option Group

 
                                           
    <form>      
	    <p>
	     <label class="select">
	     <select id="numpages" name="g16components" class="border-all-xxs">
		    <option selected="selected" value="None">g16 components</option>
		    <option value="Colors">Colors</option>
		    <option value="Lettering logo">Forms</option>
		    <option value="Retro-Vintage">Gallery</option>
		    <option value="3D Logo">Slideshows</option>
	     </select>
	     </label>
	    </p>
    </form>
                

Text area

Label Textarea



 
        <form>      
            <label for="feedback">Feedback</label><br /><br />
            <textarea id="feedback" name="feedback" class="border-all-xxs" row="7"></textarea>
        </form>
        

Placeholder Textarea

 
        <form>      
            <label for="feedback">Feedback</label><br /><br />
            <textarea id="feedback" name="feedback" 
                class="border-all-xxs" row="7" 
                placeholder="Feedback plz!"></textarea>
        </form>
        

Colored TextArea



 
        <form>      
            <label for="feedback">Feedback</label><br /><br />
            <textarea id="feedback" name="feedback" class="border-all-xxs color-set-amaranth" row="7"></textarea>
        </form>
        

Input Buttons

Basic Button

 
            <p>
              <button type="submit" class="button">
               <span>Submit form</span>
              </button>
            </p>
        

Colored

 
            <p>
              <button type="submit" class="button color-set-alizarinCrimson">
               <span>Submit form</span>
              </button>
            </p>
        

Icon

 
            <p>
              <button type="submit" class="button btnIcon 
               color-set-orangePeel icon icon-enter">
               <span>Submit form</span>
              </button>
            </p>
        

Border Button

 
            <p>
              <button type="submit" class="button border-all-xxs">
               <span>Submit form</span>
              </button>
            </p>
        

Rippled Button

 
            <p>
              <button type="submit" class="button btnRipple color-set-redOrange">
               <span>Submit form</span>
              </button>
            </p>
        

Toggle Switch Buttons

Toggle switch button is a modern version of the traditional checkbox and radio buttons. The look and visual transformation is possible using the pseudo-element selectors ::before and ::after which define the style of the toggle switch button.

They usually represent in two states (active) or (inactive), the active state is activated when toggled and become inactive when action is repeated.

Different content may be applied to signify which action the toggle button responds to, see below on how to supply contents of your choice for both active and inactive state.

 
        <p class="switch">
	        <input type="checkbox" id="checkbox1" name="checkbox1" class="switchbutton" checked="checked" />
	        <label for="checkbox1">Is g16framework been helpful?</label>
        </p>
        <p class="switch">
	        <input type="checkbox" id="checkbox2" name="checkbox2" class="switchbutton" />
	        <label for="checkbox2">Is g16framework been helpful?</label>
        </p>  
    

Radio toggle switches

 
                <p class="switch">
	                <input type="radio" id="radio1" name="radio" class="switchbutton" checked="checked" />
	                <label for="radio1">I love this CSS Plugins</label>
                </p>
                <p class="switch">
	                <input type="radio" id="radio2" name="radio" class="switchbutton" />
	                <label for="radio2">I kinda like it</label>
                </p>
                <p class="switch">
	                <input type="radio" id="radio3" name="radio" class="switchbutton" />
	                <label for="radio3">I can't say either</label>
                </p>    
    

Form Grid

Class Identifier
inputGrid

 
        <form>
            <div class="inputGrid">
                <p>
                    <input type="text" name="firstname" id="firstname"  placeholder="First Name">
                    <input type="text" name="email" id="email" placeholder="Email">
                </p>
                <p>
                    <input type="submit" name="submit" value="submit" class="button">
                </p>
            </div>
        </form>
               

 
    <form>
    <div class="inputGrid">
	    <input type="text" name="searchterm" id="searchterm" placeholder="Enter keyword...">
	    <label class="select">
		    <select id="numpages" name="g16components" class="border-all-xxs">
			    <option selected="selected" value="None">g16 components</option>
			    <option value="Colors">Colors</option>
			    <option value="Lettering logo">Forms</option>
			    <option value="Retro-Vintage">Gallery</option>
			    <option value="3D Logo">Slideshows</option>
		    </select>
	    </label>
	    <p>
		    <input type="submit" name="submit" value="submit" class="button">
	    </p>
    </div>
    </form>
        

Multiple Form Grid

This demo used a multiple class extension as its identifier to differentiate from the simple inline grid layout, to instantiate this, class name (multiple) must be assigned to the embedding container as shown in the code snippet.

The container has four extended classes (inputGrid, container, validate-icon, multiple) to the attribute to give it a more better style, however, more appropriate class addition is a doable possibility.

 
        <form action="#" method="post" id="appointment" class="" name="appointment">
        <!-- Class: inputGrid, container, validate-icon, multiple -->
        <div class="inputGrid container-liquid-80 validate-icon multiple">
            <p>
                <input type="text" name="firstname" id="firstname" 
                        required="required"  autofocus ="autofocus"
                        placeholder="First Name">
                <input type="text" name="lastname" id="lastname" 
                        required="required" autofocus ="autofocus"
                        placeholder="Last Name">
            </p>
            <p>
                <input type="text" name="email" id="email" required="required" autofocus
                        placeholder="Email">
                <input type="text" name="telephone" id="telephone" required="required"
                        placeholder="Telephone">
            </p>
            <p>
                <label class="select color-text-barossa">
                    <select id="services" name="services" class="border-all-xxs" autofocus>
                        <option selected="selected" value="None">Photography Service</option>
                        <option value="Wedding">Wedding</option>
                        <option value="Graduation">Graduation</option>
                        <option value="Anniversary">Anniversary</option>
                        <option value="Studio Shoot">Studio Shoot</option>
                    </select>
                </label>
            </p>
            <p>
                <input type="date" name="date" id="date" required="required"
                        placeholder="Book Date">
                <input type="time" name="time" id="time" required="required"
                        placeholder="Book Time">
            </p>
            <p>
                <textarea id="feedback" name="feedback" class="border-all-xxs" 
                        rows="10" autofocus="autofocus" placeholder="Feedback"></textarea>
            </p>
            <p>
                <input type="submit" name="submit" value="submit" 
                    class="button square color-set-wildSand">
            </p>
        </div>
    </form>
               

Login form with color

Beautify form with different color.

Login

 
        <form class="formGroup container-liquid-50"
	          action="#" method="post" id="login" name="login">
	        <!-- Form header -->
	        <header class="color-set-blueWhale ">
		        <h2>
			        <span class="icon icon-unlocked">
			        </span>  <span>Login</span>
		        </h2>
	        </header>
	        <!-- Form body -->
	        <article class="color-set-wildSand">
		        <p>
			        <input type="text" name="username" placeholder="Username"
				           class="iconProfileWhite" required="required">
		        </p>
		        <p>
			        <input type="password" name="password" placeholder="Password"
				           class="iconPasswordWhite" required="required">
		        </p>
		        <p>
			        <button type="button" class="button color-set-redOrange square">
				        Login now
			        </button>
		        </p>
	        </article>
	        <!-- Form footer -->
	        <footer class="color-set-blueWhale">
		        <p>
			        <input type="checkbox" name="checkboxbutton" id="remember2" />
			        <label class="checkbox small" for="remember2">Remember Me</label>
			        <a href="#" class="color-text-almond"><span>Forgot Password</span></a>
		        </p>
	        </footer>
        </form>
        

Login form with border

Trace form with border class.

Login

 
       <form class="formGroup container-liquid-50 border-all-xxs"
            action="#" method="post" id="login" name="login">
        <!-- Form header -->
        <header>
            <h1>
                <span class="icon icon-unlocked">
                </span>  <span>Login</span>
            </h1>
        </header>
        <!-- Form body -->
        <article>
            <p>
                <input type="text" name="username" placeholder="Username"
                        class="iconProfileBlack border-b-xxs" required="required">
            </p>
            <p>
                <input type="password" name="password" placeholder="Password"
                        class="iconPasswordBlack border-b-xxs" required="required">
            </p>
            <p>
                <button type="button" class="button color-set-redOrange square">
                    Login now
                </button>
            </p>
        </article>
        <!-- Form footer -->
        <footer>
            <p>
                <input type="checkbox" name="checkboxbutton" id="remember2" />
                <label class="checkbox small" for="remember2">Remember Me</label>
                <a href="#" class="color-text-almond"><span>Forgot Password</span></a>
            </p>
        </footer>
      </form>
        

Login form with shadow

Add sleek effect such as box shadow.

Login

 
         <form class="formGroup container-liquid-50 
                       box-shadow-floated color-bg-white" action="#" 
                method="post" id="login" name="login">
            <!-- Form header -->
            <header class="">
	            <h1 class="no-mar-pad color-text-alizarinCrimson">Login</h1>
            </header>
            <!-- Form body -->
            <article>
	            <p><input type="text" name="username" placeholder="Username" 
		            class="border-all-xxs" required="required"></p>
	            <p><input type="password" name="password" placeholder="Password" 
		            class="border-all-xxs " required="required"></p>
	            <p><button type="submit" 
		            class="button color-set-alizarinCrimson">Login now</button></p>
            </article>
            <!-- Form footer -->
          </form>
        

Login form

Sign in

 
  <form class="formGroup container-liquid-50" action="#"
	        method="post" id="login" name="login">
    <!-- Form header -->
     <header class="align-left color-set-astronautBlue">
      <h1>Sign in</h1>
     </header>
     <!-- Form body -->
    <article class="color-set-wildSand">
     <p>
      <input type="text" name="email" placeholder="Email"
          class="iconProfileBlack border-all-xxs rad-all-xxs 
		  border-color-silver " 
          required="required">
     </p>
     <p>
      <input type="password" name="password"
      placeholder="Password" 
      class="iconPasswordBlack border-all-xxs rad-all-xxs border-color-silver " 
      required="required">
     </p>
     <p><input type="submit" value="SignIn" class="color-set-jagua 
	 button padding-hor-med"></p>
    </article>
    <!-- Form footer -->
    <footer class="color-set-astronautBlue">
     <p class="align-left">
      <input type="checkbox" name="checkboxbutton" id="remember2" />
      <label class="checkbox small" for="remember2">Remember Me</label>  
      <a href="#" class="color-text-white"><span>
	  Forgot Password</span></a>
      </p>
    </footer>
  </form>
        

Sign Up

Register

 
  
    <form class="formGroup container-liquid-50" 
            action="#" method="post" 
            id="signup" name="signup">
        <!-- Form header -->
        <header class="color-set-silver">
	        <h1 class="color-text-white">
	        <span class="icon icon-pencil2"></span>  
	        <span>Register</span>
	        </h1>
        </header>
        <!-- Form body -->
        <article class="color-bg-wildSand">
	        <p><input type="text" name="username" placeholder="Username" 
		        class="iconProfileBlack border-b-xxs border-color-white" required="required">
		        </p>
	        <p><input type="text" name="email" placeholder="Email" 
		        class="iconEmailBlack border-b-xxs border-color-white" required="required">
	        </p>
	        <p><input type="password" name="password" placeholder="Password" 
		        class="iconPasswordBlack border-b-xxs border-color-white " required="required">
	        </p>
	        <p><input type="submit" value="SignUp" 
		        class="color-set-jagua padding-hor-med button">
	        </p>
        </article>
        <!-- Form footer -->
        <footer class="color-bg-silver">
	        <p class="align-left">
		        <a href="#" class="color-text-jagua">
			        <span>Already Registered?, SignIn.</span></a>
	        </p>
        </footer>
    </form>
      
        

newsletter signup

NewsLetter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat cursus, pellentesque sem eget, finibus elit. Maecenas imperdiet tempus rhoncus

 
        <form class="formGroup container-liquid-50" action="#"
                method="post" id="nletter" name="nletter">
	        <!-- Form header -->
	        <header class="color-set-jagua">
		        <h1 class="color-text-white">NewsLetter</h1>
	        </header>
	        <!-- Form body -->
	        <article class="color-set-white">
		        <p>
			        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			        Sed sed erat cursus, pellentesque sem eget, finibus elit. 
                    Maecenas imperdiet tempus rhoncus
		        </p>
		        <p><input type="text" name="email" placeholder="Email" 
		        class="iconEmailWhite border-all-xxs" required="required"></p>
	        </article>
	        <!-- Form footer -->
	        <footer class="color-set-silver">
		        <p class="align-left">
			        <input type="checkbox" name="checkboxbutton" id="checknewletter" />
			        <label class="checkbox small" for="checknewletter">Weekly Subscription</label>  
			        <input type="submit" value="Subscribe Today" class="color-set-jagua">
		        </p>
	        </footer>
        </form>
        

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.