Columns

Columns have never been easier with this newbie friendly framework - Absolute freedom with no imposed styling.

The grid

How it works

The Professional Framework included in template is certainly not an overblown responsive CSS framework with multiple layouts and styles. All you have with framework is just what you need to get started – a minimal CSS file.

By not imposing any styles, that is were its beauty lies – in its simplicity. It gives you the freedom to create your own site exactly as you like.

  • First, create a row that will contain columns.

    <div class="units-row">
    
    </div>
    		
  • Now add your desired number of columns with appropriate sizes.

    <div class="units-row">
        <div class="unit-30"></div>
        <div class="unit-70"></div>
    </div>
    			
  • By default, each row has bottom margin of 1.65em, and if you don't need this margin, just add class .end to the column container.

    <div class="units-row-end">
        <div class="unit-30"></div>
        <div class="unit-70"></div>
    </div>
    		
  • You can set any padding to the blocks using styles. Also, to make development faster and easier, you can use built-in class units-padding that provides column padding of 1.65em.

    <div class="units-row units-padding">
        <div class="unit-30"></div>
        <div class="unit-70"></div>
    </div>
    			
  • If you wish to add columns without padding on the left and right, use units-split class:

    <div class="units-row units-split">
        <div class="unit-30"></div>
        <div class="unit-70"></div>
    </div>
    			

Regular Columns

Create layouts by making your own column combinations.

40%
60%

Show code

100%
50%
50%
40%
60%
33%
66%
33%
33%
33%
30%
70%
25%
75%
25%
25%
25%
25%
20%
80%
20%
20%
20%
20%
20%

Split Columns

Create columns without padding on the left and right.

40%
60%

Show code

100%
50%
50%
40%
60%
33%
66%
33%
33%
33%
30%
70%
25%
75%
25%
25%
25%
25%
20%
80%
20%
20%
20%
20%
20%

Nested Columns

Nest columns like a pro with included css classes.

20%
80%
70%
30%
25%
25%
25%
25%
20%
20%
20%
20%
20%

Show code


Centered Columns

Just add class .unit-centered to the column div you wish to center

40%

Show code


Push Columns

Align columns to the right with .unit-push preset css class

20%

Show code

25%
30%
33%
40%
50%
60%
66%
70%
75%
80%

Show code


Blocks

Html block elements

Show code


Show code


Show code


Show code


Show code