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

This is a box model dependency utility created to enable author controls the presentation of generated boxes for any html elements by assigning a single and consistent rules that control dimensions, margins, padding and borders of the affected element. This plugin is suited for all associated box properties that makes up the containing block.

There are seven different class identifiers created for this plugin and may be used to setup rule appropriate for any block level elements. Every class created has its corresponding variation in size and affected edge. The associated size variation keywords used are xxs (very very small), xsm (very small), sma (small), med (medium), lar (large), xla (very large), xxl (very very large).

Plugin Class

Keyword Implication Value
Keywords used for box dependencies
xxs Extremely small 10px
xsm Very Small 20px
sma Small 30px
med Medium 40px
lar Large 50px
xla Extra Large 60px
xxl Extra Extra Large 70px
all All four sides or edge are affected no definitive value
l Only the left sides or edge are affected no definitive value
b Only the bottom sides or edge are affected no definitive value
t Only the top sides or edge are affected no definitive value
r Only the right sides or edge are affected no definitive value
ver Only the vertical top-bottom sides or edge are affected no definitive value
hor Only the horizontal left-right sides or edge are affected no definitive value

Box Model - Margin

This class is identified by margin-edge-size, where edge is the area (LRBT) of the affected region of the element, and the size variation which ranges from very small to a very large margin size.

margin plugin

Box Model - Margin (All sides TRBL)

This property defines the top, right, bottom and left distance from the border edge of an element to the edge of the containing block. The values varies from xxs(10px) to xxl (70px). It is identified by keyword (all). It sets a consistent margin on all four sides of the affected element.

Class Identifiers
.margin-all-xxl margin 70px (TRBL) .margin-all-xla margin 60px (TRBL) .margin-all-lar margin 50px (TRBL) .margin-all-med margin 40px (TRBL) .margin-all-sma margin 30px (TRBL) .margin-all-xsm margin 20px (TRBL) .margin-all-xxs margin 10px (TRBL)

Set Up

  
            <div class="margin-all-xxs">
            </div>
            <div class="margin-all-xsm">
            </div>
            <div class="margin-all-sma">
            </div>
            <div class="margin-all-med">
            </div>
            <div class="margin-all-lar">
            </div>
            <div class="margin-all-xla">
            </div>
            <div class="margin-all-xxl">
            </div>
      
            

Demo : All side margin

70px
60px
50px
40px
30px
20px
10px

Box Model - Horizontal Margin

This property defines the horizontal distance from the left and right border edge of an element to the edge of the containing block.

Class Identifiers
.margin-hor-xxl margin 70px (LR) .margin-hor-xla margin 60px (LR) .margin-hor-lar margin 50px (LR) .margin-hor-med margin 40px (LR) .margin-hor-sma margin 30px (LR) .margin-hor-xsm margin 20px (LR) .margin-hor-xxs margin 10px (LR)

Set Up - Horizontal Margin

  
            <div class="margin-hor-xxs">
            </div>
            <div class="margin-hor-xsm">
            </div>
            <div class="margin-hor-sma">
            </div>
            <div class="margin-hor-med">
            </div>
            <div class="margin-hor-lar">
            </div>
            <div class="margin-hor-xla">
            </div>
            <div class="margin-hor-xxl">
            </div>
      
            

Demo : Horizontal Margin

70px
60px
50px
40px
30px
20px
10px

Box Model - Vertical Margin

This property defines the vertical distance from the top and bottom border edge of an element to the edge of the containing block.

Class Identifier
.margin-ver-xxl margin 70px (TB) .margin-ver-xla margin 60px (TB) .margin-ver-lar margin 50px (TB) .margin-ver-med margin 40px (TB) .margin-ver-sma margin 30px (TB) .margin-ver-xsm margin 20px (TB) .margin-ver-xxs margin 10px (TB)

Set Up - Vertical Margin

  
                    <div class="margin-ver-xxs">
                    </div>
                    <div class="margin-ver-xsm">
                    </div>
                    <div class="margin-ver-sma">
                    </div>
                    <div class="margin-ver-med">
                    </div>
                    <div class="margin-ver-lar">
                    </div>
                    <div class="margin-ver-xla">
                    </div>
                    <div class="margin-ver-xxl">
                    </div>
      
            

Demo : Vertical Margin

70px
60px
50px
40px
30px
20px
10px

Box Model - Left Margin

This property defines the left distance from the left border edge of an element to the edge of the containing block.

Class Identifiers
.margin-l-xxl margin 70px (L) .margin-l-xla margin 60px (L) .margin-l-lar margin 50px (L) .margin-l-med margin 40px (L) .margin-l-sma margin 30px (L) .margin-l-xsm margin 20px (L) .margin-l-xxs margin 10px (L)

Set Up - Left Margin

  
            <div class="margin-l-xxs">
            </div>
            <div class="margin-l-xsm">
            </div>
            <div class="margin-l-sma">
            </div>
            <div class="margin-l-med">
            </div>
            <div class="margin-l-lar">
            </div>
            <div class="margin-l-xla">
            </div>
            <div class="margin-l-xxl">
            </div>
      
            

Demo : Left Margin

70px
60px
50px
40px
30px
20px
10px

Box Model - Right Margin

This property defines the right distance from the right border edge of an element to the edge of the containing block.

Class Identifiers
.margin-r-xxl margin 70px (R) .margin-r-xla margin 60px (R) .margin-r-lar margin 50px (R) .margin-r-med margin 40px (R) .margin-r-sma margin 30px (R) .margin-r-xsm margin 20px (R) .margin-r-xxs margin 10px (R)

Set Up - Right Margin

  
                <div class="margin-r-xxs">
                </div>
                <div class="margin-r-xsm">
                </div>
                <div class="margin-r-sma">
                </div>
                <div class="margin-r-med">
                </div>
                <div class="margin-r-lar">
                </div>
                <div class="margin-r-xla">
                </div>
                <div class="margin-r-xxl">
                </div>
      
            

Demo : Right Margin

70px
60px
50px
40px
30px
20px
10px

Box Model - Top Margin

This property defines the top distance from the top border edge of an element to the edge of the containing block.

Class Identifiers
.margin-t-xxl margin 70px (T) .margin-t-xla margin 60px (T) .margin-t-lar margin 50px (T) .margin-t-med margin 40px (T) .margin-t-sma margin 30px (T) .margin-t-xsm margin 20px (T) .margin-t-xxs margin 10px (T)

Set Up - Top Margin

  
                <div class="margin-t-xxs">
                </div>
                <div class="margin-t-xsm">
                </div>
                <div class="margin-t-sma">
                </div>
                <div class="margin-t-med">
                </div>
                <div class="margin-t-lar">
                </div>
                <div class="margin-t-xla">
                </div>
                <div class="margin-t-xxl">
                </div>    
            

Demo : Top Margin

70px
60px
50px
40px
30px
20px
10px

Box Model - Bottom Margin

This property defines the vertical distance from the bottom border edge of an element to the edge of the containing block.

Hint Element with this property (margin bottom) repel a floated element that is beneath it.

Class Identifiers
.margin-b-xxl margin 70px (B) .margin-b-xla margin 60px (B) .margin-b-lar margin 50px (B) .margin-b-med margin 40px (B) .margin-b-sma margin 30px (B) .margin-b-xsm margin 20px (B) .margin-b-xxs margin 10px (B)

Set Up - Bottom Margin

  
                        <div class="margin-b-xxs">
                        </div>
                        <div class="margin-b-xsm">
                        </div>
                        <div class="margin-b-sma">
                        </div>
                        <div class="margin-b-med">
                        </div>
                        <div class="margin-b-lar">
                        </div>
                        <div class="margin-b-xla">
                        </div>
                        <div class="margin-b-xxl">
                        </div>
            

Demo : Bottom Margin

70px
60px
50px
40px
30px
20px
10px

Box Model - Padding

Padding class is identified by padding-edge-size, where edge is the area (LRBT) of the affected region of the element, and the size variation which ranges from very small to a very large padding size.

All Edges padding

This property defines the top, right, bottom and left distance from the border edge of an element to the edge of the containing block. The values varies from xxs(10px) to xxl (70px).

Class Identifiers
.padding-all-xxl padding 70px (TRBL) .padding-all-xla padding 60px (TRBL) .padding-all-lar padding 50px (TRBL) .padding-all-med padding 40px (TRBL) .padding-all-sma padding 30px (TRBL) .padding-all-xsm padding 20px (TRBL) .padding-all-xxs padding 10px (TRBL)

70px
60px
50px
40px
30px
20px
10px

Sample code

Play around with different html elements using the code editor and assign box property to the element class attribute to see it in action.

  
            <div class="padding-all-xxs">
            </div>
            <div class="padding-all-xsm">
            </div>
            <div class="padding-all-sma">
            </div>
            <div class="padding-all-med">
            </div>
            <div class="padding-all-lar">
            </div>
            <div class="padding-all-xla">
            </div>
            <div class="padding-all-xxl">
            </div>
            

Horizontal Padding

This property defines the horizontal distance from the left and right border edge of an element to the edge of the containing block.

Class Identifiers
.padding-hor-xxl padding 70px (LR) .padding-hor-xla padding 60px (LR) .padding-hor-lar padding 50px (LR) .padding-hor-med padding 40px (LR) .padding-hor-sma padding 30px (LR) .padding-hor-xsm padding 20px (LR) .padding-hor-xxs padding 10px (LR)

70px

60px

50px

40px

30px

20px

10px

Sample code

  
            <div class="padding-hor-xxs">
            </div>
            <div class="padding-hor-xsm">
            </div>
            <div class="padding-hor-sma">
            </div>
            <div class="padding-hor-med">
            </div>
            <div class="padding-hor-lar">
            </div>
            <div class="padding-hor-xla">
            </div>
            <div class="padding-hor-xxl">
            </div>
            

Vertical Padding

This property defines the vertical distance from the top and bottom border edge of an element to the edge of the containing block.

Class Identifier
.padding-ver-xxl padding 70px (TB) .padding-ver-xla padding 60px (TB) .padding-ver-lar padding 50px (TB) .padding-ver-med padding 40px (TB) .padding-ver-sma padding 30px (TB) .padding-ver-xsm padding 20px (TB) .padding-ver-xxs padding 10px (TB)

70px

60px

50px

40px

30px

20px

10px

Sample code

  
            <div class="padding-ver-xxs">
            </div>
            <div class="padding-ver-xsm">
            </div>
            <div class="padding-ver-sma">
            </div>
            <div class="padding-ver-med">
            </div>
            <div class="padding-ver-lar">
            </div>
            <div class="padding-ver-xla">
            </div>
            <div class="padding-ver-xxl">
            </div>
            

Left Padding

This property defines the left distance from the left border edge of an element to the edge of the containing block.

Class Identifiers
.padding-l-xxl padding 70px (L) .padding-l-xla padding 60px (L) .padding-l-lar padding 50px (L) .padding-l-med padding 40px (L) .padding-l-sma padding 30px (L) .padding-l-xsm padding 20px (L) .padding-l-xxs padding 10px (L)

70px

60px

50px

40px

30px

20px

10px

Sample code

  
           <div class="padding-l-xxs">
            </div>
            <div class="padding-l-xsm">
            </div>
            <div class="padding-l-sma">
            </div>
            <div class="padding-l-med">
            </div>
            <div class="padding-l-lar">
            </div>
            <div class="padding-l-xla">
            </div>
            <div class="padding-l-xxl">
            </div>
            

Right Padding

This property defines the right distance from the right border edge of an element to the edge of the containing block.

Class Identifiers
.padding-r-xxl padding 70px (R) .padding-r-xla padding 60px (R) .padding-r-lar padding 50px (R) .padding-r-med padding 40px (R) .padding-r-sma padding 30px (R) .padding-r-xsm padding 20px (R) .padding-r-xxs padding 10px (R)

70px

60px

50px

40px

30px

20px

10px

Sample code

  
            <div class="padding-r-xxs">
            </div>
            <div class="padding-r-xsm">
            </div>
            <div class="padding-r-sma">
            </div>
            <div class="padding-r-med">
            </div>
            <div class="padding-r-lar">
            </div>
            <div class="padding-r-xla">
            </div>
            <div class="padding-r-xxl">
            </div>
            

Top Padding

This property defines the top distance from the top border edge of an element to the edge of the containing block.

Class Identifiers
.padding-t-xxl padding 70px (T) .padding-t-xla padding 60px (T) .padding-t-lar padding 50px (T) .padding-t-med padding 40px (T) .padding-t-sma padding 30px (T) .padding-t-xsm padding 20px (T) .padding-t-xxs padding 10px (T)

70px

60px

50px

40px

30px

20px

10px

Sample code

  
            <div class="padding-t-xxs">
            </div>
            <div class="padding-t-xsm">
            </div>
            <div class="padding-t-sma">
            </div>
            <div class="padding-t-med">
            </div>
            <div class="padding-t-lar">
            </div>
            <div class="padding-t-xla">
            </div>
            <div class="padding-t-xxl">
            </div>
            

Bottom Padding

This property defines the bottom distance from the bottom border edge of an element to the edge of the containing block.

Class Identifiers
.padding-b-xxl padding 70px (B) .padding-b-xla padding 60px (B) .padding-b-lar padding 50px (B) .padding-b-med padding 40px (B) .padding-b-sma padding 30px (B) .padding-b-xsm padding 20px (B) .padding-b-xxs padding 10px (B)

70px

60px

50px

40px

30px

20px

10px

Sample code

  
            <div class="padding-b-xxs">
            </div>
            <div class="padding-b-xsm">
            </div>
            <div class="padding-b-sma">
            </div>
            <div class="padding-b-med">
            </div>
            <div class="padding-b-lar">
            </div>
            <div class="padding-b-xla">
            </div>
            <div class="padding-b-xxl">
            </div>
            

Box Model - Border

This class is identified by border-edge-size, where edge is the area (LRBT) of the affected region of the element, and the size variation which ranges from very small to a very large border size.

All Edges border

This property defines the top, right, bottom and left distance from the border edge of an element to the edge of the containing block. The values varies from xxs(0.25px) to xxl (20px).

Class Identifiers
.border-all-xxl border 20px (TRBL) .border-all-xla border 10px (TRBL) .border-all-lar border 5px (TRBL) .border-all-med border 2px (TRBL) .border-all-sma border 1px (TRBL) .border-all-xsm border 0.5px (TRBL) .border-all-xxs border 0.25px (TRBL)

20px
10px
5px
2px
1px
0.5px
0.25px

Sample code

Play around with different html elements using the code editor and assign box property to the element class attribute to see it in action.

  
            <div class="border-all-xxs">
            </div>
            

Assign Color to Border

New color can be designated to border of an element to change its default property by assigning a border-color class.

Border color red

  
            <div class="border-all-xxs border-color-red ">
            </div>
            

Border Left

This property defines the right distance from the right border edge of an element to the edge of the containing block.

Class Identifiers
.border-l-xxl border 40px (TB) .border-l-xla border 30px (TB) .border-l-lar border 20px (TB) .border-l-med border 15px (TB) .border-l-sma border 10px (TB) .border-l-xsm border 5px (TB) .border-l-xxs border 1px (TB)

40px
30px
20px
15px
10px
5px
1px

Sample code

  
            <div class="border-l-xxs">
            </div>
            

Border Right

This property defines the right distance from the right border edge of an element to the edge of the containing block.

Class Identifiers
.border-r-xxl border 40px (TB) .border-r-xla border 30px (TB) .border-r-lar border 20px (TB) .border-r-med border 15px (TB) .border-r-sma border 10px (TB) .border-r-xsm border 5px (TB) .border-r-xxs border 1px (TB)

40px
30px
20px
15px
10px
5px
1px

Sample code

  
            <div class="border-r-xxs">
            </div>
            

Border Top

This property defines the top distance from the top border edge of an element to the edge of the containing block.

Class Identifiers
.border-t-xxl border 40px (TB) .border-t-xla border 30px (TB) .border-t-lar border 20px (TB) .border-t-med border 15px (TB) .border-t-sma border 10px (TB) .border-t-xsm border 5px (TB) .border-t-xxs border 1px (TB)

40px
30px
20px
15px
10px
5px
1px

Sample code

  
            <div class="border-t-xxs">
            </div>
            

Bottom Border

This property defines the bottom distance from the bottom border edge of an element to the edge of the containing block.

Class Identifiers
.border-b-xxl border 40px (TB) .border-b-xla border 30px (TB) .border-b-lar border 20px (TB) .border-b-med border 15px (TB) .border-b-sma border 10px (TB) .border-b-xsm border 5px (TB) .border-b-xxs border 1px (TB)

40px
30px
20px
15px
10px
5px
1px

Sample code

  
            <div class="border-b-xxs">
            </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.