HOME | DD

Description
Introduction

This is a test of a custom 600px wide CSS grid system created using the custom CSS creator at www.960.gs. The container is 600px wide with a 10px gutter on each side. Inside there are 8 columns, each with a width of 55px and each with a padding of 10px. Columns can be combined, for instance you could have 8 separate boxes of 1 column, 4 boxes of 2, or even 2 boxes with one of 3 and one of 5.

Custom Classes

This means you will have to use custom classes. Though this means a little more work, it definitely makes the platform more adaptable to each user. These are the classes you need to know:

Box Sizes

The box size is determined by a divs class. Since the grid is broken into 8 columns, you can choose a box size of 1 - 8. For example, a box that is 3 columns wide would have the class name:
Content

and a box that was 5 columns wide would be:
Content

and you can put them together and have them appear on the same row together:
Content
Content

The boxes are not limited in anyway by height. On a row where there are 2 or more boxes, the row height will be determined by the tallest box. After each row, no matter if it has 1 box or 8 boxes, add the code:

So for example:
Content
Content
Content

Not too hard I hope.

Stamps and Thumbs

I made custom boxes for these guys. Each box is 2 columns wide and centers the stamp or thumb inside so everything lines up neatly. You definitely don't have to use these classes and can use the number system above, but I think it looks neater.
:thumbcode:

or

:thumbcode:

Heading

The heading is easy, it just uses standard header tags (without the spaces):
< h1 > Heading Here < /h1 >

See It Live

See it live here in my journal

If you need any help or if something is broken, please send me a note or a comment on this deviation and I'll try and help you the best I can.

Description
Introduction

This is a test of a custom 600px wide CSS grid system created using the custom CSS creator at www.960.gs. The container is 600px wide with a 10px gutter on each side. Inside there are 8 columns, each with a width of 55px and each with a padding of 10px. Columns can be combined, for instance you could have 8 separate boxes of 1 column, 4 boxes of 2, or even 2 boxes with one of 3 and one of 5.

Custom Classes

This means you will have to use custom classes. Though this means a little more work, it definitely makes the platform more adaptable to each user. These are the classes you need to know:

Box Sizes

The box size is determined by a divs class. Since the grid is broken into 8 columns, you can choose a box size of 1 - 8. For example, a box that is 3 columns wide would have the class name:
Content

and a box that was 5 columns wide would be:
Content

and you can put them together and have them appear on the same row together:
Content
Content

The boxes are not limited in anyway by height. On a row where there are 2 or more boxes, the row height will be determined by the tallest box. After each row, no matter if it has 1 box or 8 boxes, add the code:

So for example:
Content
Content
Content

Not too hard I hope.

Stamps and Thumbs

I made custom boxes for these guys. Each box is 2 columns wide and centers the stamp or thumb inside so everything lines up neatly. You definitely don't have to use these classes and can use the number system above, but I think it looks neater.
:thumbcode:

or

:thumbcode:

Heading

The heading is easy, it just uses standard header tags (without the spaces):
< h1 > Heading Here < /h1 >

See It Live

See it live here in my journal

If you need any help or if something is broken, please send me a note or a comment on this deviation and I'll try and help you the best I can.