2.1 KiB
960 Grid System Plus
This is a kind of clone/enhancement of the excellent 960 Grid System by Nathan Smith to fit my personal likes and dislikes.
Differences from original 960 Grid System
.grid-* Classes
The .grid-* classes are meant to supplement the default .grid_* classes. The .grid-* classes work the exact same way, except that they are margin-less, so you can easily place multiple .grid_* elements within a .grid-* element, and gives you more flexibility with custom paddings/margins for text content.
It might be an issue of taste, but personally I don't like using the alpha and omega classes on the first and last child element. I'd rater use a different parent class, and use the .grid_* classes like normal within the parent grid class.
24 Column Grid by Default
The latest release of 960.gs includes a 24 column grid, but it can not be used with the default 960.css file which contains the 12 and 16 column grids. 960.gs+ includes all grid sizes within the one 960.css file.
Grid Usage
Usage is identical to 960.gs aside from the .grid-* classes. To quickly explain, you can create two .grid-8 elements with a .container_16 element to create two columns. Within each .grid-8 column, you can create .grid_* elements like normal, except you only have 8 columns of width to play with.
Design Templates
Please refer to 960.gs for design templates for Photoshop, Illustrator, and many other applications.
Generator Usage
I used the same generator (with the .grid-* addition) that I used for my 760 Grid System project.
The generator is an easy to use shell script. Just edit grids.yml to your needs, and run:
./generate-grid.rb > my_grid.css
Legal
- Released under MIT license, of course.
- Included Eric Meyer's comprehensive browser reset stylesheet, which 960.gs also uses.
- I borrowed the
text.cssand demo files from 960.gs, I hope nobody minds :)