The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

 

For more information and templates for Fireworks, InDesign, Inkscape, Illustrator, OmniGraffle, Photoshop, Visio, Expression Design. Sketch PDF. go to 960.gs

 
 
 

DNNgrid is a DotNetNuke skin framework based on the 960 grid system from 960.gs

Now that DotNetNuke finally outputs valid code ( and the default menu matured as well - unordered list structure and no more inline code since DotNetNuke 5.1.4 ) its much easier to create DIV based skins instead of the table infested ones that were common ground in the DotNetNuke community.

I have been developing DIV based skins from the early days of DotNetNuke and had my share of browser bugs and issues to deal with but the more valid DotNetNuke became the better it went. Last year a CSS grid framework was released that made this even easier and faster and I never looked back.

Now that DotNetNuke has reached version 5 this CSS framework can now be used as is without any weird modification or changes to the corde code. Please try it out by downloading the skin from the download section on the right.

 

We are finalizing a new version that has the ability for custom grids margins and widths. This site is already built on it

 

Added a commented more complex example of several variations of subdivided columns ( complex.ascx ) as well as an extra container that has to be applied to the last module in the longest pane in those subdivided columns.

This is needed for making sure the margins behave in IE and we don't see double margins where we don't want them

 

This first release is not a ready to use DotNetNuke skin but more a starter to help you create cross browser multi-column ( up to 16 columns if needed ) CSS skins without any hassle.

I develop my skins purely with unordered list based menu's and because this is not working yet in the standard NavMenu I will release this skin with an included menu as soon as DNN 5.1 is out and working as expected

Now go and download the skin, read instructions on the original site. You have a cross browser multi-column layout to start with, its up to you to make it into a beautiful skin.

 
 

The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.

The DotNetNuke containers have a consistent bottom margin of 10 pixels in all major browsers.

 

Although the base dimension for this grid are 960px based on 16 or 12 column grid there is a possibility to extend this to custom widths and margins. For this we are building an extension to the builder so this can be auto created for you.

For example: The grid for this design doesn't have the standard 20px margin but a custom 10 px margin. And is even farther modified by having a left and right margin of the main grid of 7px.

Most of this was done using the new builder that will be released soon.