Use the calculator below to find out the column sizes required for your website. Plug the calculated values and use them in the code available for download on the Grab The Code page.


Single Column Width Calculator:
Why Single Widths?

The Single Width Calculator aims at 100% as the total width while accounting for the 1.6% default margin. Input the number of columns your design uses (upto 12) and get a hold of the single width. This number is the basis for calculating spans, offsets, etc.

Why the Single Width Calculator

The Single Width Calculator aims at 100% as the total width while accounting for the 1.6% default margin. Input the number of columns your design uses (upto 12) and get a hold of the single width. This number is the basis for calculating spans, offsets, etc.

Spans

Spans are useful to create different width columns. For example, in an 8 column grid, the divs can be set up as a column with a span of 2 and a column with a span of 6:

.span2of8 {
width: 23%;
}

With another span of


.span6of8 {
width: 73.8%;
}

Spans

Offsets

Offsets are used to create additional space between columns. For example, the span6of8 div has been pushed right by the value of offset2of8. Offsets are implemented from the end point of the previous div (span1of8 in this case):

.span1of8 {
width: 11.1%;
}

.offset1of8 {
margin-left: 11.1% !important;
}

.span6of8 {
width: 73.8%;
}

Offsets

Span and Offsets Calculator:
Spans

Spans are useful to create different width columns. For example, in an 8 column grid, the divs can be set up as a column with a span of 2 and a column with a span of 6:

.span2of8 {
width: 23.0%;
}

With another span

.span6of8 {
width: 74.6%;
}

Spans

Offsets

Offsets are used to create additional space between columns. For example, the span6of8 div has been pushed right by the value of offset2of8. Offsets are implemented from the end point of the previous div (span1of8 in this case):

.span1of8 {
width: 11.1%;
}
.offset1of8 {
margin-left: 11.1% !important;
}
.span6of8 {
width: 74.6%;
}

Offsets

ABOUT CODE ALIVE

Code Alive is a website designed to help the more visually inclined learners basics of using CSS. The CSS framework was developed by Vi Chetan and forms the basis of the contents of this website. It is inspired by Graham Miller's Responsive Grid System.

CODE VISUALIZER

The Code Visualizer is a simple way of of viewing the 4,8, and 12 column grid CSS based on Code Alive's grid system.

I KNOW IT'S NOT PERFECT...

Since it's my first time developing a framework, any suggestions on ways to improve the framework will be great! Please let me know if problems are found in the code. I would love to learn from whoever I can, however I can!