Let's celebrate summer! Dive deep with our first summer discounts! Get now 30% OFF on selected recently updated extensions. Learn more

960 Grid System 2.0 (free extension) Support

Quick and easy add a 960 CSS Grid for most flexible web site design

With the 960 Grid System Dreamweaver Extension you can quick and easy add a 960 CSS Grid for most flexible web site design! Just add as many rows and cells as you need for your header, content, sidebars or footer. The extension gives you the tools to add new CSS Grid Cells, increase or decrease their size, split or join cells and much more with just a single action click. All the counting of grid cell sizes and placement, that is needed for the 960 Grid System is done automatically for you!

Also in Dreamweaver Design View there are special visual aid tools that show outlines for the grid and cells so you can see them during your web site design work in Dreamweaver.

You can also check out our DMXzone Bootstrap 3 and Bootstrap 3 Elements extensions!

Overview

Features Highlights:

  • Add 960 Grid System - Use it to create a slick page layout in minutes
  • Add Rows and Cells - Add as many as you need for your content, sidebar, header, footer etc.
  • Manage the CSS Grid Cell Size - Increase of decrease, so it fits your design
  • Great Preview in Dreamweaver - You can easily follow your Grid in the Design View
  • Extended grid columns support - Next to the support for mixed 12 and 16 column grids, now the extension also supports standalone 12, 16 and even 24 column grids
  • New and improved Dreamweaver Design View - Now the grid cells and containers are highlighted on hover and easily selectable by their new tab label (only DW CS3+). The tab label also contains the number of columns a cell or containers spans
  • Full support for Right-to-Left Text alignment - Now available as option on the property inspector of any 960 Grid container

960 Grid system 2.0 New Features Overview
With this movie we will show you the new features included in our Free Dreamweaver 960 Grid System 2.0 extension.

 
 

Hotel Website with a Grid System Demo

Click the Show/Hide button in the upper right corner in the demo site to see the 960 Grid System.
building a hotel Website

Easy to Navigate Toolbar

All the needed options are easy to access from the toolbar. You can add, merge, delete cells and many many more.

 

Fully Visual Grid View available in Dreamweaver Design View

Once you add your Grid, you can easily explore it from the Design View in Dreamweaver.

 

Greatly Integrated in Dreamweaver

The padding and width of the grid cells are easily to be edited from the inline Property inspector.

Background info about the Dreamweaver Insert Panel (CS4+) or Insert Bar (CS3-)

Dreamweaver CS4 or higher

Dreamweaver CS3 or lower

Features

  • Grid Cells Management
    • Add Cell to Left -  will add a new grid cell on the left side of the current selected cell
    • Add Cell to Right - will add a new grid cell on the right side of the current selected cell
    • Merge with Right Cell - will merge the contents of the current grid cell with its right neighbor
    •  Merge with Left Cell - will merge the contents of the current grid cell with its left neighbor
    •  Delete Cell

  • Grid Rows Management
    •  Add New Row  - will add a new row under the current cell

  • General Aligning and Selection functions
    •  Spread Cells - will make all grid cells on the same row equal in size
    •  Select Cell - selects the sells and opens the Property inspector
    • Show Grid - shows the Grid cells for the page layout

  • Property Inspector
    • Expand to Left - will expand the width of the current grid cell getting the needed width from its left neighbor 
    • Contact from Left -  will contract the width of the current grid cell and increase the width of its left neighbor 
    •  Expand to Right - will expand the width of the current grid cell getting the needed width from its right neighbor
    •  Contact from Right - will contract the width of the current grid cell and increase the width of its right neighbor
    • Padding Before and After - increases/decreases the numbers of columns before/after the cell
 
 

Showcases

Videos

960 Grid system 2.0 New Features Overview
With this movie we will show you the new features included in our Free Dreamweaver 960 Grid System 2.0 extension.

 

Using Dreamweaver Repeating Regions in 960 Grid System Templates
With this movie we will show you how easy it is to use Dreaweaver Repeating Regions in Templates built with our free 960 Grid System extension

 

Creating a Basic Page Layout with 960 Grid
With this movie we will show you how to create a Basic Page Layout with 960 grid System using our free 960 Grid System extension

 

Requirements

Type: Behavior
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC+
Browser: Safari 2.0, IE 7, Firefox 3.6+, Opera 9.5, Safari 3, Chrome 9+, IE 8, Safari 4+

History

Version 2.0.0

  • Extended grid columns support! Next to the support for mixed 12 and 16 column grids, now the extension also supports standalone 12, 16 and even 24 column grids
  • New and improved Dreamweaver Design View!  Now the grid cells and containers are highlighted on hover and easily selectable by their new tab label (only DW CS3+). The tab label also contains the number of columns a cell or containers spans
  • Full support for Right-to-Left Text alignment. Now available as option on the property inspector of any 960 Grid container
  • Improved CSS Reset file to meet the latest web standards
  • Improved the default text CSS typography
  • New Grid Cells are now inserted empty i.e. there is no default "cell content:" text in them
  • Improved Property Inspector Icons
  • Automatic update dependent files on page open
  • Improved dependent file copy and include process

Version 1.0.2

  • Improved design view display of the grid in older (pre CS5) Dreamweaver versions 

Version 1.0.1

  • Improved working with dynamic pages and server behaviors in Dreamweaver 
  • Improved compatibility when working with Dreamweaver templates
  • Various optimizations

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com which is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Reviews

Tricky

November 10, 2010 by josh gray

As always, very tricky! Tricky, tricky, tricky! Thats why we love you George... Thanks for the freeness.

 -JG

Thanks so much for this

November 11, 2010 by Sergio Nero

Just to say thank you :)

Works like a charm

November 12, 2010 by branislav mirkov

Hi

Just wanted to say that 960 extension works like a charm.

Well, you have to have knowledge in html/css, otherwise it is hard to know what is happening. 

 

Thank you for this wonderful extension. 

Works as stated

November 13, 2010 by Howard Walker Walker

At first I could not find the extension, but after branislov mirkov (thanks a lot)told me to press ctrl + F2 it appeared along with lots of other things. Perhaps I should have used CS4 more during my 3 years of ownership. The cells appear and generally do what they say they do. Could be useful after further investigation. Great for a free extension.

See all 17 Reviews

You must me logged in to write a review.