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

It is best suited when an urgent situation regarding specific content is needed, hence, allows user to do and undo action when required. Notification could be identified by color, where red indicates danger, yellow for warning, and green for a success alert. It's container can be resized to smaller or bigger size.

danger alerts

Place notification content in a full width liquid container.

Your device is not charged
 
            <div class="alert-danger container-liquid-100">
               <span class="icon icon-warning"></span>Your device is not charged                  
               <span onclick="this.parentElement.style.display='none'" class="closebtn right"></span>
            </div>
	

Place notification content in a container of different size.

Danger

Renew your account.

 
    <div class="alert-danger container-liquid-50">
      <h3>Danger</h3>
	    <p>
		    Renew your account.
	    </p>
	    <span onclick="this.parentElement.style.display='none'" class="closebtn right"></span>
    </div>
	

warning alerts

Your account would be closed soon!
 
    <div class="alert-warning color-set-yellow">
        <span class="icon icon-notification"></span>Your account would be closed soon!                  
        <span onclick="this.parentElement.style.display='none'" class="closebtn right"></span>
    </div>
	

Warning

Please renew account soon!.

 
    <div class="alert-warning color-set-yellow container-liquid-50">
        <h3>Warning</h3>
        <p>Please renew account soon!.</p>
        <span onclick="this.parentElement.style.display='none'" class="closebtn right"></span>
    </div>
       
	

success alerts

Successfully uploaded!
 
            <div class="alert-success color-set-green medium">
               <span class="icon icon-checkmark"></span>Successfully uploaded!                  
               <span onclick="this.parentElement.style.display='none'" class="closebtn right"></span>
            </div>
	

Success

Account successfuly created!.

 
        <div class="alert-danger color-set-green">
          <h3>Success</h3>
	        <p> Account successfuly created!.</p>
	        <span onclick="this.parentElement.style.display='none'" class="closebtn right"></span>
        </div>
	

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.