prototyping with the grid 960 css framework _ nettuts+

7/31/2019 Prototyping With the Grid 960 CSS Framework _ Nettuts+

1/14

Advertise Here

Adam Hawkins on Dec 1st 2008 with 213 comments

Tutorial Details

Difficulty: Intermediate

Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. They are excellent tools for creating mock ups. Why? Because they do all

the heavy lifting allowing you to get faster results.

Prototyping With The Grid 960 CSS Framework | Nettuts+ http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/

1 of 14 15/12/2011 16:27


2/14

That sounds nice, but how do we do that? There are a lot of articles on the internet blasting or supporting CSS frameworks, but none have any content to help

inexperienced readers decide. This one is different. This article covers the entire prototyping process. Imagine you are given a design and you need a mock up

for the client. This article explains the basics of Grid 960, planning the grid for a design, and coding the prototype. The sample design will exploit most

capabilities of Grid 960 giving you a firm knowledge base to work on. After youve seen the design below, its time to learn about how Grid 960 works.


2 of 14 15/12/2011 16:27


3/14


3 of 14 15/12/2011 16:27

P t t i With Th G id 960 CSS F k | N tt t + htt // t t t l /t t i l /ht l t h i / t t i ith th id 960 f k/


4/14

1. Making the Grid

Grid 960 works by using classes through inheritance. Grid 960 provides two grids: 12 and 16 columns. The main container is always 960px wide. Using 960

allows the most combinations of column while being easy to work with. We will use the 12 column grid to code this design, but we will not use all 12

columns. Every grid cell has a margin: 0 10px. This creates a gutter of 20px. When creating a row, the total width of all elements add up to 960. Take a look

at Grid 960s demo page. You will see a nice grid with all sorts of combinations. Each grid cell has a class that specifies what width it will be. Here is the

break down of column widths for a 12 column grid.

60px1.

140px2.

220px3.300px4.

380px5.

460px6.

540px7.

620px8.

700px9.

780px10.

860px11.

940px12.

Each width corresponds to a class name formed like this:grid_Xwhere X is a number from the above list. If you want a block with width 940 use class

grid_12. How does Grid 960 know what width it is supposed to be? Each grid_x is a selectorcontainer_Y .grid_Xwhere Y is either 12 or 16 for columns.

Lets dive into some code. Heres how to create a two row grid in a 12 column container. Let the first row be 940px, and the second row contain two equal

columns.

view plaincopy to clipboardprint?

1.

940px
2.
3.

4.

460px
5.
460px
6.7.
8.


4 of 14 15/12/2011 16:27

Prototyping With The Grid 960 CSS Framework | Nettuts+ http://net tutsplus com/tutorials/html css techniques/prototyping with the grid 960 css framework/


5/14

9.

When creating a row in the grid, make sure all the child grid_X numbers add up to the number of columns youre using. This ensures the correct width. Two

grid_6 divs add up to 12. You are no limited to the same numbers. You could also use 6, 4, and 2. There you have it, a quick grid ready for content. Now that

you know how Grid 960 works, lets see how to create the mockup.

2.The Mock Up

Visualizing the designs grid is easy. There is one row for the header image, a row for the nav bar, a row with 2 columns for the headline story and poster, a

spacer, 4 columns, a spacer, than a footer with 3 columns. Click on the image for the code.

After checking out the visual, you should understand how to create the mockups grid. Using the widths, match up the class #s from the list and lets throw

some code together. Remember to add the clearing div at the end of each row. Dont forget to include the stylsheets included in the Grid 960 package.


1.

2.

3.

4. 5.

6.


5 of 14 15/12/2011 16:27

Prototyping With The Grid 960 CSS Framework | Nettuts+ http://net tutsplus com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/


6/14

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19. 20.

21.

22.

23.

24.

25.

26. 27.

28.

29.

30.

The skeleton is ready. Time to start overlaying the design. The green bars are just divs with a background color and height. The navbar does not have a set

height. Instead, it will be controlled by the size of the links inside. Dont forget to add the header image as well.


div.spacer {1.

background-color: #8FC73E;2.

height: 1em;3.

}4.

5.

div#navbar{6.background-color: #8FC73E;7.


6 of 14 15/12/2011 16:27

Prototyping With The Grid 960 CSS Framework | Nettuts+ http://net tutsplus com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/


7/14

padding: 10px 0;8.

}9.

Apply the class to correct grid_12 divs and set the ID.


1.

2.

3.

4.

5.

6. 7.

8.

9.

10.

11.

12.

13.

14.15.

16.

17.

18.

19.

20.

21. 22.

23.

24.

25.

26.

27.

28.

29.30.

Prototyping With The Grid 960 CSS Framework | Nettuts+ http://net.tutsplus.com/tutorials/html css techniques/prototyping with the grid 960 css framework/

7 of 14 15/12/2011 16:27


8/14



9/14


1.

2.

Articles3.

Topics4.

5.

About6.

Editors7.

Contact8.

9.

10.

11.


div#navbarul {1.

list-style: none;2.

display: block;3.

margin: 0 10px;4.

}5.6.

div#navbarul li {7.

float: left;8.

margin: 0 1.5em;9.

font: bold 1em Arial;10.

}11.

Sweet. The page is really coming together. All thats left is creating the block effects on the top section. This is more sinister than it appears. Before we diving

in, you need to realize some things about Grid 960 and CSS frameworks in general.

3. CSS Frameworks Do Not Solve All Your Problems

Astute readers may have realized something. The page is extremely rigid. Everything has a defined size and changing the size creates problems or potentiallybreaks the design. Designers also sacrifice some of our design goals because what Grid 960 allows. For example, the sample design was 1000px wide. Grid

yp g | p p q p yp g g

9 of 14 15/12/2011 16:27


10/14



11/14

}4.

5.

div.topSection div p {6.

margin: 10px;7.

}8.

Cool! Lets check out the progress.

Ready to fill the two boxes? Go ahead and fill the left one some with some sample text. Dont make to much or it will overflow the box. This creates a

potential problem in the final design. How do you know how much text is too much? For the production design, the designer would need to create a function

to only allow X amount of words to stop the over flow. Time to get the poster image ready. Before inserting an image determine the dimensions. If you are

good a math and understanding the box model, you most likely already know how big it should be. If you dont, fire up FireBug and take a peak into the

DOM. Click on Inspect. Get down to the div in question and click on it. Open the Layout tab. FireBug will display a helpful box model reference. Check out

the image for help. Click on the image for fullsize.

11 of 14 15/12/2011 16:27



12/14

The screenshot shows the poster div is 360280. Find an image and create a style. I decided to let the image fill the entire div (unlike in the sample design.) If

you wanted to create a 10px margin make sure to reduce the dimensions by 20px on each side.


img#poster{1.

width: 360px;2.

height: 280px;3.

}4.

You should get this. The mockup is complete. Feel free to throw in some real text and change the image around.

12 of 14 15/12/2011 16:27


13/14



14/14

they have their uses. With that in mind, go forth and prototype!

Tags: 360CSS

By Adam HawkinsThis author has yet to write their bio.

Like 162 people like this.

14 of 14 15/12/2011 16:27

prototyping with the grid 960 css framework _ nettuts+

Documents