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

Grid is a network of lines or bars that are combined together horizontally or vertically to form a unit or cell. It acts as a foundation and platform upon which graphic elements may be structured or organized. When combined together, they form a modular, hierarchical, and manuscript grid system.

G16framework adopts 16 columns grid technique, a good approach most suitable to engender a responsive fluid grid solution using the multiple of four to generate efficient and most effective grid flow that work well with any kind of layout ( fixed, liquid and elastic ) system.

User can create in a flash simple and complex grid layout with generating tools such as grid-generator.

Grid Terminology

Units

These are the building block of any grid and is the smallest vertical division of a page upon which a column is built.

Columns

Columns are group of units, combined together to create a workable area such as box.. It is also refers to as a vertical alignments that create horizontal division between two margins. Columns could be of equal or different size. It can be represented in blocks or tiles.

column

Gutters

These are empty spaces between units and columns, when units are combined together into column, they incorporate gutters between them to create a little ventilation. Gutter should not be misconstrued with margin

It requires specific amount of margin to create gutter. Gutter prevents element within column from bumping up against the column edges, it is a great recipe for ventilation.

gutter

Margins

They are generally used to create gutters, and also used to control the horizontal and vertical whitespace around elements. Margins is also referred to as a negative space that exist between the content and the corresponding edge.

margin

Row and Group

These classes are introduced into grid16 family to help resolve issues of clearance of columns when floated or stacked and to help maintain the normal flow element within document, generated grid class such as g16-c-2 or g16-mc-2 is always nested within a row or group.

Group
Group class is used to clear set of columns or any elements when stacked without enforcing equality in height. It is useful if layout design block priority is of varying heights.

Row
Row class is used to clear set of columns or any elements when stacked, designated element with this class always have equal height and stretched to the same height level without constraint when combined or used together to create modular or columnal grid layout.

grid

grid row

Media Queries

G16framework is absolutely inclined to targeting varying display capabilities of devices using "device-width" a features that describes the width of a rendering surface of the output device using a specific breakpoint (a logical matching of media features that updates the style of given page).

You do not need to tweak anything, every element has been painstakingly tweaked to conform to all major breaking points.

 
    /*===Supports Viewport at minimum width 240px and maximum of 640px ======*/
 
    @media screen and (min-device-width: 15em) and (max-device-width:40em),
    screen and (min-width:15em) and (max-width:40em) {}
   /*===Supports Viewport at minimum width 760px and maximum of 1024px ======*/
    
    @media screen and (min-width : 48em) and (max-width : 64em) 
    and (min-device-width : 48rem) and (max-device-width : 64em) {}
	
   /*===Supports Viewport at minimum width 1200px  ======*/    
    
    @media screen and (min-width : 75em) {}
  /*===Supports Viewport at minimum width 1400px ======*/
    
    @media screen and (min-width : 87.5em) {}
	
  /*===Supports Viewport at minimum width 1600px ======*/
    
    @media screen and (min-width : 100em) {}
    	 
 /*===Supports Viewport at minimum width 1800px ======*/
    
    @media screen and (min-width : 112.5em) {}
    

Grid classes

The grid class is grouped into mixed and equal columns and are displayed in tiles or blocks. Gutter of 2% is applied horizontally to ventilate between any given boxes courtesy of 1% margins applied both vertically and horizontally.

Note: Every column (mixed or equal) when combined together must add up to the sum of 16.

Mixed Grid classes

Class identifier
g16-mc-N

The g16 denotes 16 total column mc denotes mixed column, and one of which may be the combination of set value -N-, where N ranges from 1,2,3,4,5,6 ......,16 signifying the number of columns occupied within a row.

mixed column

A mixed columns grid contain two or more columns of equal or different sizes, when combined together their total size is proportional to that of the parent container.

Mixed column classes

g16-mc-1 g16-mc-2 g16-mc-3 g16-mc-4 g16-mc-5 g16-mc-6 g16-mc-7 g16-mc-8 g16-mc-9 g16-mc-10

g16-mc-11 g16-mc-12 g16-mc-13 g16-mc-14 g16-mc-15 g16-mc-full

Mixed Columns Preview

Dependency:

Box Model:

2g16-mc-2 (10.5%)

14g16-mc-14 (85.5%)

3g16-mc-3(16.75%)

13g16-mc-13(79.25%)

4g16-mc-4(23%)

12g16-mc-12(73%)

5g16-mc-5(29.25%)

11g16-mc-11(66.75%)

6g16-mc-6(35.5%)

10g16-mc-10(60.5%)

7g16-mc-7(41.75%)

9g16-mc-9(54.25%)

8g16-mc-8(48%)

8g16-mc-8(48%)

9g16-mc-9(54.25%)

7g16-mc-7(41.75%)

10g16-mc-10(60.5%)

6g16-mc-6(35.5%)

11g16-mc-11(66.75%)

5g16-mc-5(29.25%)

12g16-mc-12(73%)

4g16-mc-4(23%)

13g16-mc-13(79.25%)

3g16-mc-3(16.75%)

14g16-mc-14(85.5%)

2g16-mc-2(10.5%)

15g16-mc-15(91.75%)

1g16-mc-1(4.25%)

16g16-mc-full(96%)

Mixed Grid Ratio Concept

Setting up a well structured modular mixed grids would require a considerable sharing proportion to acheive accurate redistribution of columns in a row, and the best approach is to use a mixing ratio technique.

Best Mixing Grid Proportion Option

The combination of column two, three and four work best at any breakpoint without squashing embedding contents and create more ventilation, however, user may decide to extend the limit beyond the one mentioned here, but if clarity and readability is your priority in design, the best mixed grid combination are 2, 3 and 4.

How to create mixed column grid

Case 1

Consider having four different columns within a row in ratio 3:4:8:1, combination of these mixed proportions is equal to 16.
Note: any mixing ratio can be used provided the combination is equal to 16.

The illustrated mixing ratio 3:4:8:1 could also be represented in form of fraction and percentage and still have the same result.

The percentage representation is computed as 18.75%, 25%, 50%, 6.25% and the corresponding fractional proportion would be in this order 3/16 , 4/16, 8/16, 1/16.

Case 2

Consider a parent block with a fixed width of 960px and to break or split into four different proportion using the same ratio 3:4:8:1 would generate the below result in term of fraction and percentage.

  •   Percentage representation: 18.75% of 960px, 25% of 960px, 50% of 960px, and 6.25% of 960px.
  •   Fraction representation : 3/16 of 960px, 4/16 of 960px, 8/16 of 960px and 1/16 of 960px
  •   Both approaches generate 180px, 240px, 480px, 60px respectively giving the total resultant of 960px when combined.

This approach is proven correct for any type of combination regardless of the width chosen, provided the resultant ratio is equal to 16.

316.75%

423%

848%

14.25%

 
    <div class="row">
	     <div class="g16-mc-3"></div>
	     <div class="g16-mc-4"></div>
	     <div class="g16-mc-8"></div>
	     <div class="g16-mc-1"></div>
    </div>

Mixed Column Grids sample

Mixed ratio 6:10

This ratio would divide a giving containing block into two mixed columns of 37.75% and 60.25% with 1% margin to the left and right and 2% gutter.

637.75%

1060.25%

 
    <div class="row">
	     <div class="g16-mc-6"></div>
	     <div class="g16-mc-10"></div>
    </div>

Mixed ratio 5:7:4

This ratio would divide a giving containing block into three mixed columns of 37.75% and 60.25% with 1% margin to the left and right and 2% gutter to ventilate.

529.25%

741.75%

423%

 
    <div class="row">
        <div class="g16-mc-5"></div>
        <div class="g16-mc-7"></div>
        <div class="g16-mc-4"></div>
    </div>

Mixed ratio 4:4:4:4

This ratio would divide a giving containing block into four mixed columns of 23% each with 1% margin to the left and right and 2% gutter to ventilate.

423%

423%

423%

423%

 
    <div class="row">
        <div class="g16-mc-4"></div>
        <div class="g16-mc-4"></div>
        <div class="g16-mc-4"></div>
        <div class="g16-mc-4"></div>
    </div>

Mixed Grid and HTML elements

Mixed grid class can be assigned to any html-elements, provided a row or group class is passed or declared on the parent block.

423%

423%

423%

423%

 
    <p class="row">
        <span class="g16-mc-4"></span>
        <span class="g16-mc-4"></span>
        <span class="g16-mc-4"></span>
        <span class="g16-mc-4"></span>
    </p>

Equal Grid classes

Class identifier
g16-c-N

The g16 denotes 16 total grids c denotes mixed column, and one of which may be the combination of set value -N- N ranges from 1,2,3,4,5,6 ......,16 where -N is the number of columns occupied within a row.

These grid sets contain equal number of column with the same size within a given container. It spans through 2 to 16 with the exception of the full width column class. Combination of any of these two equal grids will be proportional or equal to the total size of the containing block.

Equal columns

g16-c-full g16-c-2 g16-c-3 g16-c-4 g16-c-5 g16-c-6 g16-c-7 g16-c-8

g16-c-9 g16-c-10 g16-c-11 g16-c-12 g16-c-13 g16-c-14 g16-c-15 g16-c-16

Equal Column Grid Set Preview

Dependency:

Box Model:

g16-c-full (96%)

g16-c-2 (48%)

g16-c-2 (48%)

g16-c-3 (31.33..%)

g16-c-3 (31.33..%)

g16-c-3 (31.33..%)

g16-c-4 (23%)

g16-c-4 (23%)

g16-c-4 (23%)

g16-c-4 (23%)

g16-c-5 (18%)

g16-c-5 (18%)

g16-c-5 (18%)

g16-c-5 (18%)

g16-c-5 (18%)

g16-c-6 (14.66...%)

g16-c-6 (14.66...%)

g16-c-6 (14.66...%)

g16-c-6 (14.66...%)

g16-c-6 (14.66...%)

g16-c-6 (14.66...%)

g16-c-7 (12.28...%)

g16-c-7 (12.28...%)

g16-c-7 (12.28...%)

g16-c-7 (12.28...%)

g16-c-7 (12.28...%)

g16-c-7 (12.28...%)

g16-c-7 (12.28...%)

g16-c-8 (10.50...%)

g16-c-8 (10.50...%)

g16-c-8 (10.50...%)

g16-c-8 (10.50...%)

g16-c-8 (10.50...%)

g16-c-8 (10.50...%)

g16-c-8 (10.50...%)

g16-c-8 (10.50...%)

g16-c-9 (9.11...%)

g16-c-9 (9.11...%)

g16-c-9 (9.11...%)

g16-c-9 (9.11...%)

g16-c-9 (9.11...%)

g16-c-9 (9.11...%)

g16-c-9 (9.11...%)

g16-c-9 (9.11...%)

g16-c-9 (9.11...%)

g16-c-10 (8.00...%)

g16-c-10 (8.00...%)

g16-c-10 (8.00...%)

g16-c-10 (8.00...%)

g16-c-10 (8.00...%)

g16-c-10 (8.00...%)

g16-c-10 (8.00...%)

g16-c-10 (8.00...%)

g16-c-10 (8.00...%)

g16-c-10 (8.00...%)

g16-c-11 (7.09...%)

g16-c-11 (7.09...%)

g16-c-11 (7.09...%)

g16-c-11 (7.09...%)

g16-c-11 (7.09...%)

g16-c-11 (7.09...%)

g16-c-11 (7.09...%)

g16-c-11 (7.09...%)

g16-c-11 (7.09...%)

g16-c-11 (7.09...%)

g16-c-11 (7.09...%)

g16-c-12 (6.33...%)

g16-c-12 (6.33...%)

g16-c-12 (6.33...%)

g16-c-12 (6.33...%)

g16-c-12 (6.33...%)

g16-c-12 (6.33...%)

g16-c-12 (6.33...%)

g16-c-12 (6.33...%)

g16-c-12 (6.33...%)

g16-c-12 (6.33...%)

g16-c-12 (6.33...%)

g16-c-12 (6.33...%)

g16-c-13 (5.69...%)

g16-c-13 (5.69...%)

g16-c-13 (5.69...%)

g16-c-13 (5.69...%)

g16-c-13 (5.69...%)

g16-c-13 (5.69...%)

g16-c-13 (5.69...%)

g16-c-13 (5.69...%)

g16-c-13 (5.69...%)

g16-c-13 (5.69...%)

g16-c-13 (5.69...%)

g16-c-13 (5.69...%)

g16-c-13 (5.69...%)

g16-c-14 (5.14...%)

g16-c-14 (5.14...%)

g16-c-14 (5.14...%)

g16-c-14 (5.14...%)

g16-c-14 (5.14...%)

g16-c-14 (5.14...%)

g16-c-14 (5.14...%)

g16-c-14 (5.14...%)

g16-c-14 (5.14...%)

g16-c-14 (5.14...%)

g16-c-14 (5.14...%)

g16-c-14 (5.14...%)

g16-c-14 (5.14...%)

g16-c-14 (5.14...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-15 (4.66...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

g16-c-16 (4.25...%)

How to set up equal grids

Any HTML block level elements such as div, article, figure, blockquote, header, footer, ul, ol, p,... may be used as a supposed containing block and assign a row or group class to create a parent container.

With the block level elements already specified, you can place or embed html element of choice to serve as a sibling container within the already established row.

Always use (g16-c-N) (g16-mc-N) within a containing block with declared class row or group. Do not call (g16-c-N) (g16-mc-N) class if a row or group class is not declared.

The above code snippets is not permissible, no row or group class is declared in the parent block holding the sibling grid blocks.

 
    <div>
	     <div class="g16-c-3"></div>
	     <div class="g16-c-3"></div>
	     <div class="g16-c-3"></div>
    </div>

3 equal grids

g16-c-3 (31.33..%)

g16-c-3 (31.33..%)

g16-c-3 (31.33..%)

 
    <div class="row">
	     <div class="g16-c-3"></div>
	     <div class="g16-c-3"></div>
	     <div class="g16-c-3"></div>
    </div>

5 equal grids

g16-c-5 (18%)

g16-c-5 (18%)

g16-c-5 (18%)

g16-c-5 (18%)

g16-c-5 (18%)

 
    <div class="row">
        <div class="g16-c-5"></div>
        <div class="g16-c-5"></div>
        <div class="g16-c-5"></div>
        <div class="g16-c-5"></div>
        <div class="g16-c-5"></div>
    </div>

3 equal columns with different height

Declaring a group class on the parent block to create uneven height.

Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque.

Etiam vulputate nunc eu lacus lobortis pellentesque

Etiam vulputate nunc eu lacus lobortis pellentesqueEtiam vulputate nunc eu lacus lobortis pellentesque

 
       <div class="group">
        <div class="g16-c-3 color-set-silver">
          <p>Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque.</p>  
        </div>
        <div class="g16-c-3 color-set-silver">
          <p>Etiam vulputate nunc eu lacus lobortis pellentesque.</p>  
        </div>
        <div class="g16-c-3 color-set-silver">
          <p>Pellentesque Etiam vulputate nunc eu lacus lobortis at eros justo.
                    Etiam vulputate nunc eu lacus lobortis pellentesque.
          </p>  
        </div>
    </div>

3 equal columns with equal height

Declaring a row class on the parent block to create even height.

Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque.

Etiam vulputate nunc eu lacus lobortis pellentesque

Etiam vulputate nunc eu lacus lobortis pellentesqueEtiam vulputate nunc eu lacus lobortis pellentesque

 
    <div class="row">
        <div class="g16-c-3 color-set-silver">
          <p>Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque.</p>  
        </div>
        <div class="g16-c-3 color-set-silver">
          <p>Etiam vulputate nunc eu lacus lobortis pellentesque.</p>  
        </div>
        <div class="g16-c-3 color-set-silver">
          <p>Pellentesque Etiam vulputate nunc eu lacus lobortis at eros justo.
                    Etiam vulputate nunc eu lacus lobortis pellentesque.
          </p>  
        </div>
    </div>

g16classes at different breakpoints

Classes (g16-)  min 240px max 640px  min 768px max 1024px  Desktop Screen
Responsive Grid Class Behaviour at different breakpoints.
c-2 width is 100% each, and columns are stacked
width is 50% each (2 by 1), and columns are redistributed in 2:1 equal stacked ratio
width is 25% each , and columns are redistributed in 2 equal grids.
c-3 width is 100% each , and columns are stacked
width is 50% each (3 by 1), and columns are redistributed in 3 equal stacked ratio
width is 33.33...% each , and columns are redistributed in 4 equal grids.
g16-c-4 width is 100% each , and columns are stacked
width is 50% each (2 by 2), and columns are redistributed in 2:2 equal stacked ratio
width is 25% each , and columns are redistributed in 4 equal grids.
c-5 width is 100% , and columns are stacked
width is 50% (2 by 1), 33.33% (3 by 1) , and columns are redistributed in 2:3 stacked ratio
width is 20% , and columns are redistributed in 5 equal grids
c-6 width is 100% , and columns are stacked
width is 33.33% (3 by 2) , and columns are redistributed in 3:2 stacked ratio
width is 20% , and columns are redistributed in 6 equal grids
c-7 width is 100% , and columns are stacked
width is 50% (2 by 2) & 33.33%(3 by 1), and columns are redistributed in 2:2:3 stacked ratio
width is 12.28% , and columns are redistributed in 7 equal grids
g16-c-8 width is 100% , and columns are stacked
width is 50% (2 by 4), and columns are redistributed in 2:2:2:2 stacked ratio
width is 10.5%, and columns are redistributed in 8 equal grids
c-9 width is 100% , and columns are stacked
width is 33.33...% (3 by 3), and columns are redistributed in 3:3:3 stacked ratio
width is 9.11% , and columns are redistributed in 9 equal grids
c-10 width is 100% , and columns are stacked
width is 50% (2 by 5), and columns are redistributed in 2:2:2:2:2 stacked ratio
width is 8% , and columns are redistributed in 10 equal grids
c-11 width is 100% , and columns are stacked
width has 50% (2 by 1) & 33.33% (3 by 3), and columns are redistributed in 2:3:3:3 stacked ratio
width is 7.09...% , and columns are redistributed in 11 equal grids
c-12 width is 100% , and columns are stacked
width is 50% (2 by 6), and columns are redistributed in 2:2:2:2:2:2 stacked ratio
width is 6.33...% , and columns are redistributed in 12 equal grids
c-13 width is 100% , and columns are stacked
width has 50% (2 by 2) & 33.33% (3 by 3), and columns are redistributed in 2:2:3:3:3 stacked ratio
width is 5.69...% , and columns are redistributed in 10 equal grids
c-14 width is 100% , and columns are stacked
width is 50% (2 by 7), and columns are redistributed in 2:2:2:2:2:2:2 stacked ratio
width is 5.14...% , and columns are redistributed in 14 equal grids
c-15 width is 100% , and columns are stacked
width is 33.33...% (3 by 5), and columns are redistributed in 3:3:3:3:3 stacked ratio
width is 4.66..% , and columns are redistributed in 15 equal grids
c-16 width is 100% , and columns are stacked
width is 50% (2 by 8), and columns are redistributed in 2:2:2:2:2:2:2:2 stacked ratio
width is 4.25% , and columns are redistributed in 16 equal grids

Columns hack

Identifier
g16hack

Primarily all the column grid classes come with margin and generated gutter between the column, hack-class does eliminate any embedding empty spaces between units and columns.

How to hack columns

In order to hack any given columns, the class must be assigned to the parent block as shown below

For column of the same height

 
    <div class="g16hack">
     ... column class here
    </div>
Before hacked
 
    <div class="row">
	    <div class="g16-c-2"></div>
	    <div class="g16-c-2"></div>
	    <div class="g16-c-2"></div>
	    <div class="g16-c-2"></div>
    </div>
After hacked
 
    <div class=" g16hack">
	    <div class="g16-c-2"></div>
	    <div class="g16-c-2"></div>
	    <div class="g16-c-2"></div>
	    <div class="g16-c-2"></div>
    </div>

Display grids in tiles

Tile grids are relatively display in form of row-column formation structure. The presentation of such always have resemblance of a tower of varying heights. To display content using tiles style, g16-tiles must be called and assigned to the parent element block, the corresponding sibling grids g16-tiles-N must be embedded within the parent block where N is the number of columns occupy. In order to show the main item to be display within sibling grid tile, a tile-item class must be called.

Parent tile Class Identifier

g16-tiles

Sibling tile Class Identifiers

g16-tiles-2 g16-tiles-3 g16-tiles-4 g16-tiles-5 g16-tiles-6 g16-tiles-7 g16-tiles-8

g16-tiles-9 g16-tiles-10 g16-tiles-11 g16-tiles-12 g16-tiles-13 g16-tiles-14 g16-tiles-15 g16-tiles-16

Layout structure for grid tiles
 
    <div class="g16-tiles ">
	    <!-- tiles columns layout where N column is 2,3,4...16 -->
	    <div class="g16-tiles-N">
          <div class="tile-item"></div>
	    </div>	
    </div>

Display 3 columns in tiles

 
    <div class="g16-tiles border-all-xxs">
	    <!-- tiles columns layout -->
	    <div class="g16-tiles-3">
		    <div class="tile-item color-set-silver height-250"></div>
		    <div class="tile-item color-set-silver height-100"></div>
		    <div class="tile-item color-set-silver height-150"></div>
		    <div class="tile-item color-set-silver height-200"></div>
	    </div>
	    <div class="g16-tiles-3">
		    <div class="tile-item color-set-silver height-100"></div>
		    <div class="tile-item color-set-silver height-300"></div>
		    <div class="tile-item color-set-silver height-100"></div>
		    <div class="tile-item color-set-silver height-200"></div>
	    </div>
	    <div class="g16-tiles-3">
		    <div class="tile-item color-set-silver height-200"></div>
		    <div class="tile-item color-set-silver height-100"></div>
		    <div class="tile-item color-set-silver height-250"></div>
		    <div class="tile-item color-set-silver height-150"></div>
	    </div>
    </div>

Display 4 columns in tiles

 
    <div class="g16-tiles border-all-xxs">
	    <!-- tiles columns layout -->
	    <div class="g16-tiles-4">	  
		    <div class="color-set-silver tile-item height-250"></div>
		    <div class="color-set-silver tile-item height-100"></div>
		    <div class="color-set-silver tile-item height-150"></div>
		    <div class="color-set-silver tile-item height-200"></div>	  
	    </div>
	    <div class="g16-tiles-4">	   
		    <div class="color-set-silver tile-item height-100"></div>
		    <div class="color-set-silver tile-item height-300"></div>
		    <div class="color-set-silver tile-item height-100"></div>
		    <div class="color-set-silver tile-item height-200"></div>
	    </div>
	    <div class="g16-tiles-4">
		    <div class="color-set-silver tile-item height-200"></div>
		    <div class="color-set-silver tile-item height-100"></div>
		    <div class="color-set-silver tile-item height-250"></div>
		    <div class="color-set-silver tile-item height-150"></div>
	    </div>
	    <div class="g16-tiles-4">
		    <div class="color-set-silver tile-item height-200"></div>
		    <div class="color-set-silver tile-item height-150"></div>
		    <div class="color-set-silver tile-item height-100"></div>
		    <div class="color-set-silver tile-item height-250"></div>
	    </div>
    </div>

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.