Usage

Set width, # of columns, and gutter width, then click Start.
Hover over a section and click the Add button to add elements.
Add an id or some additional classes to the element for more control.
Click Code to see the generated HTML and CSS code Zip to download a zip archive of the generated code.
Refresh the page at any time to start over from scratch.

News

Get the Chrome/Chromium Application (shortcut) HERE for easy access.
We can host your generated CSS files for you, gzipped and varnished. With the best server for the job. Just copy the generated link tag into your HTML head and you are good to go.

FAQ

"What are #header, #content, and #footer?"
The grid is broken up into 3 sections (#header, #content, and #footer) for the sake of simplicity. We feel these are the most common sections and almost any site could be built upon this structure.

"It keeps alerting me there isn't enough space. What does that mean?"
It is telling you that because you've ran out of space horizontally for the grid element you're trying to insert. For instance, if you have a grid that is just 10 columns wide and you try to insert an 11 column grid element to it, it won't fit and lets you know that no action was made.

"It keeps nesting my elements when I try to stack them. How do I stack grid elements on top of each other?"
You can't. If you really need to stack elements, you can go into your HTML file and copy/paste the element in question and separate the twin elements with a clearfixed div.

"I want to help by contributing code. Where can I find this project?"
GitHub: 960 Layout System
Bitbucket: 960 Layout System

"I love this project. Can I buy you guys cofee?"
Plane tickets would be prohibitively expensive. But we accept donations now:

About 960.ls

960.ls is Flask powered web application with high usage of JavaScript, developed by Dejan Noveski, Vasil Vangelovski and Cory Simmons.

The 960 Layout System was created to help streamline web designers' workflow by giving them all the power of 960.gs in a nice, easy-to-use interface that is useful for noob and guru alike.

If you encounter any bugs, feel free to let us know, and please keep in mind this project is 100% free and open-source.