+

demention Grid

v1.0 beta

The template comes with our brand new and powerful CSS grid system.

It is Responsive. It can position columns regardless of the source order; it has different gutter sizes to choose from, and has many more features that you'll love. 

<div class="row gutter-width-1">

 <div class="c-10-16"> 
   <div class="g any-styling-you-want">
     <!--Your content goes here -->
   <div>
 <div>
 
 <div class="c-6-16">
   <div class="g any-styling-you-want">
     <!--Your content,even another row -->
   <div>
 <div>
 
</div>

Columns

16 columns

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

12 columns

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

5 columns

.

.

.

.

.

.

.

.

.

Offset classes : .offset-*-*

.

.

.

.

and so on...

Push and pull : push-*-* , pull-*-*

psh

psh

psh

psh

psh

psh

psh

psh

psh

psh

psh

psh

Want to center columns ?

If your .row has only one column , you can align it centered by adding .centered class to the column .

c-1-5 column centered

c-10-12 column centered

c-5-16 column centered

Nested columns in the centered column

Centered column

4/12 column nested
4/12 column nested
4/12 column nested

Nesting rows and columns

With the demention Grid , you can make complex layouts easier than ever before.

4/12 column with 20px Gutter
4/12 column nested
4/12 column nested
4/12 column nested

You can even change the gutter sizes of nested columns .. How cool is that ?

3/12 column with 20px Gutter
4/12 column nested - with 60px gutter
4/12 column nested - with 60px gutter
4/12 column nested - with 60px gutter

example 3

4/12 column with 20px Gutter

I'm centered

Gutter sizes

To change the gutter size , all you have to do is to change the gutter class unit (.gutter-width-*) in the row.

No gutter

No gutter

No gutter

4/12 column with 20px Gutter

4/12 column with 20px Gutter

4/12 column with 20px Gutter

4/12 column with 40px Gutter

4/12 column with 40px Gutter

4/12 column with 40px Gutter

4/12 column with 60px Gutter

4/12 column with 60px Gutter

4/12 column with 60px Gutter

4/12 column with 80px Gutter

4/12 column with 80px Gutter

4/12 column with 80px Gutter

Source-order indipendant positioning

If you have only two columns to change the order , just use force-right class . When you want more control over this , use push-*-* and push-*-* classes.

Example 1

Markup order #1

for Primary content (This one is defined prior to the other column in the markup structure).

Markup order #2

for Secondary content.

Example 2

Markup order #1

This column is the first item in the markup order.

Markup order #2

for Secondary content

Markup order #3

for Secondary content

Example 4

Markup order #1

Markup order #2

Markup order #3

Markup order #4

Hybrid layouts

A Hybrid layout has one or two fixed (custom) columns and one fluid column. You can also nest columns within them to make complex layouts

FIXED PART

FLUID PART

FIXED PART

FLUID PART

FIXED PART

and more...

Keep floating even on small screens (If you want)

By default , the grid system sets float to none on small screens. By just adding .ss-float to the row , you can stop this default behaviour.

Column

Column

EG 2 - see how this layout acts on different screen sizes ( this feature is really awesome )

this colomn and the other green column will stay the same but see how the blue columns act on small screens.
4/12 column nested - with 60px gutter
4/12 column nested - with 60px gutter
4/12 column nested - with 60px gutter

Change the column count On the fly !

Column

Column

Column

Column

you can even extend the grid easily ( The documentation contains more details about that)

See Typography demo