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

Introduction

The purpose of this plugin is to create a single rule for any affected containing block by employing box dependency model properties such as padding, border, margin and content area width with a specific size that may be applied to change the position, layout and dimensions of any html block level elements like nav, header, section, div, aside, form, blockquote, figure and many more.

This class can be applied to any html element by calling any of the container class category (fixed or liquid).

Plugin Class

Classes Definition
container-basic It does not impact with a specific width but only add padding and margin property to the affected box
container-fixed-240 A fixed width container of 240px
container-fixed-320 A fixed width container of 320px
container-fixed-360 A fixed width container of 360px
container-fixed-480 A fixed width container of 480px
container-fixed-640 A fixed width container of 640px
container-fixed-768 A fixed width container of 768px
container-fixed-800 A fixed width container of 800px
container-fixed-960 A fixed width container of 960px
container-fixed-1024 A fixed width container of 1024px
container-fixed-1200 A fixed width container of 1200px
container-fixed-1280 A fixed width container of 1280px
container-fixed-1920 A fixed width container of 1920px
container-liquid-20 A liquid/fluid width container of 20% of the window size
container-liquid-30 A liquid/fluid width container of 30% of the window size
container-liquid-40 A liquid/fluid width container of 40% of the window size
container-liquid-50 A liquid/fluid width container of 50% of the window size
container-liquid-60 A liquid/fluid width container of 60% of the window size
container-liquid-70 A liquid/fluid width container of 70% of the window size
container-liquid-80 A liquid/fluid width container of 80% of the window size
container-liquid-90 A liquid/fluid width container of 90% of the window size
container-liquid-100 A liquid/fluid width container of 100% of the window size

Basic Container

This container class does not impact with a specific width but only add padding and margin property to the affected box .

.container-basic

Fixed Containers

These are a set of rigid boxes assigned with a random fixed width values such as 240, 320, 360, 480, 640, 768, 800, 960, 1024, 1200, 1280, 1920 to achieve a fixed and consistent layout proportion. They are all measured in pixel (px).

.container-fixed-240 .container-fixed-320 .container-fixed-360 .container-fixed-480 .container-fixed-640 .container-fixed-780

.container-fixed-800 .container-fixed-960 .container-fixed-1024 .container-fixed-1200 .container-fixed-1280 .container-fixed-1920

Liquid Containers

These are a set of liquid or fluid container that maintains a consistent look and layout across different screen resolutions. Container of this category defines the size of the page and its elements as a percentage of the screen width.

.container-liquid-20 .container-liquid-30 .container-liquid-40 .container-liquid-50 .container-liquid-60 .container-liquid-70 .container-liquid-80 .container-liquid-90 .container-liquid-100

Demo - Fixed Container

In order to maintain consistency in the flow of layouts, same container class must be applied to any block level elements. Assigning different container class may result in wobbling or jerky presentation.

You can use below code snippet to set any liquid container class and assign to any html element especially the block level elements.

  
        <div class="container-fixed-#proportion">
            <p>
                ....................
            </p>
        </div>
          <!-- Fixed container of 240px -->
		<div class="container-fixed-240">
            <p>
                ....................
            </p>
        </div>
            

Fixed container of 240px wide

Fixed container of 320px wide

Fixed container of 360px wide

Fixed container of 480px wide

Fixed container of 640px wide

Demo - Liquid Container

Liquid or fluid container sets a specific proportion of the width of the browser window from 20% to 100%.

You can use below code snippet to set any liquid container class and assign to any html element especially the block level elements.

  
        <div class="container-liquid-#proportion">
            <p>
                ....................
            </p>
        </div>
		<!-- Liquid container of 20% -->
		  <div class="container-liquid-20">
            <p>
                ....................
            </p>
        </div>
            

Liquid container of 20%, indicates width of Web page body is 20% of the width of the browser window

Liquid container of 30%, indicates width of Web page body is 30% of the width of the browser window

Liquid container of 40%, indicates width of Web page body is 40% of the width of the browser window

Liquid container of 50%, indicates width of Web page body is 50% of the width of the browser window

Liquid container of 60%, indicates width of Web page body is 60% of the width of the browser window

Liquid container of 70%, indicates width of Web page body is 70% of the width of the browser window

Liquid container of 80%, indicates width of Web page body is 80% of the width of the browser window

Liquid container of 90%, indicates width of Web page body is 90% of the width of the browser window

Liquid container of 100%, indicates width of Web page body is 100% of the width of the browser window

Application - Block level elements

Block level elements can be resized to different proportions using any of the container group.

-div-

A document division

Liquid container of 50% applied to -div- element

  
         <div class="container-liquid-50  color-set-wildSand">
              <p>Liquid container of 50% applied to -div- element</p>
         </div>
            

-figure-

Groups media content with a caption

Liquid container of 50% applied to -figure- HTML5 element

  
        <figure class="container-liquid-50 color-set-wildSand">
            <p>Liquid container of 50% applied to -figure- <b>HTML5</b> element</p>
        </figure>
            

-footer-

A page footer

Liquid container of 50% applied to -footer- HTML5 element

  
        <footer class="container-liquid-50  color-set-wildSand">
            <p>Liquid container of 50% applied to -footer- <b>HTML5</b> element</p>
        </footer>
            

-header-

A page header or section

Liquid container of 50% applied to -header- HTML5 element

  
        <header class="container-liquid-50 color-set-wildSand">
            <p>Liquid container of 50% applied to -header- <b>HTML5</b> element</p>
        </header>
            

-nav-

A page navigation
  
        <nav class="container-liquid-50  color-set-wildSand">
            <p>Liquid container of 50% applied to -nav- <b>HTML5</b> element</p>
        </nav>
            

-p-

A paragraph

Liquid container of 50% applied to -p- HTML5 element

  
        <p class="container-liquid-50  color-set-wildSand">
            <span>Liquid container of 50% applied to -p- <b>HTML5</b> element</span>
        </p>
            

Custom setting

Not applicable

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.