Understand how the Code Alive CSS system works. Remember to use the calculator on the Get Started page.


How it works:

So, why is using the calculator so important? The width of single column is the basis for the entire grid set up. The width value is determined by the number of columns a web design calls for. With a constant margin-left of 1.6%, the grid spaces out evenly.


Handling Rows and Columns:

Rows and columns are the basis for the grid system. The preset 1.6% margin-left lends to the consistency of the grid system. These can be used in nested divs as well.

Rows

Rows allow horizontal division of the webpage by clearing content on either sides. By adding spans within a row div, easy grids can be created.

.row {margin: 0; padding: 0; clear: both;}
Columns

Columns divide the page vertically. A 'column' class alongwith the assigned span (ex: span2of8) creates a column with the width value of the span2of8.

.column {margin:1% 0% 1% 1.6%; float: left; display: block;}

4, 8 or 12 Column CSS

Premade CSS is available for 4, 8 or 12 columns along with offsets. Use these if your design fits! For any other column sizes, please go to the Get Started page.


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!