Prototyping with the Grid 960 CSS framework

Grid 960 is a CSS framework that allows developers to quickly construct design prototypes. They are a great tool for creating layouts. Why? Because they do all the hard work for you, allowing you to get quick results.

It sounds great, but how is it done? There are a large number of articles on the Internet agitating for and against using CSS frameworks, but there is nothing to help inexperienced readers. Therefore, in today's article we will look at the process of creating a prototype.

Imagine that you received a design, and you need to impose it on the client. From this article, you will learn the basics of Grid, the design of the grid design and the coding of the prototype. We will use a fairly simple design that uses most of the features of the Grid 960, which will help you gain a basic knowledge base for further work. After you familiarize yourself with the design below, let's start learning about how the Grid 960 works.
')

Creating a Grid

Grid 960 works on the basis of class inheritance. This framework provides two grids: 12 and 16 columns. The main container is always 960px wide. Using the number 960 allows you to use most of the various combinations of columns, without complicating the work with them. For the layout of this design, we will use a grid of 12 columns, but we will not use all 12 columns. Each grid cell is assigned a margin property: 0 10px. This creates a gap of 20 pixels. When creating a string, the sum of the widths of all the elements is added to 960. Take a look at the Grid 960 demo page. You will see a grid with all kinds of combinations. Each grid cell has a class that determines how wide it will be. The following is a breakdown of column widths for a 12-column grid:

1. 60px
2. 140px
3. 220px
4. 300px
5. 380px
6. 460px
7. 540px
8. 620px
9. 700px
10. 780px
11. 860px
12. 940px

Each width corresponds to the name of the class, decorated in the form: grid_X, where X is the sequence number from the list above. If you need a block that is 940px wide, use the class grid_12. Where does the Grid 960 know what width should be used? Each grid_X is a container_Y .grid_X selector, where the Y value is 12 or 16 columns.

Let's take a look at the code itself. Here's how to create a grid of two rows in a 12-column container. Here the first line is 940 pixels wide, and the second line contains two identical columns.

< div class ="container_12" >
< div class ="grid_12" >< p > 940px </ p ></ div >

< div class ="clear" ></ div >
< div class ="grid_6" >< p > 460px </ p ></ div >
< div class ="grid_6" >< p > 460px </ p ></ div >

< div class ="clear" ></ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

When you create a row in the grid, make sure that all the child numbers of gird_X add up to the number of columns you are using. This ensures the correct width. Two divas with the grid_6 class give a total of 12. You are not limited to just these values, and you can also use 6, 4 and 2. That's it, the grid is ready for content. Now, after you have learned how the Grid 960 works, let's see how the layout is created.

Layout

Visualizing the design mesh is pretty easy. There will be one line for the title image, a line for navigation, a line with two columns for the article title and poster, a separator, 4 columns, then a footer consisting of three columns.



After rendering, you need to understand how to create a grid layout. Using the width values ​​in the class name, from the above list, let's write together the code. Remember to add a clearing div at the end of each line. Do not forget to include the CSS files included in the Grid 960.

< div class ="container_12" >
< div class ="grid_12" ></ div >
< div class ="clear" ></ div >


< div class ="grid_12" ></ div >
< div class ="clear" > </ div >

< div class ="grid_7" ></ div >
< div class ="grid_5" ></ div >

< div class ="clear" ></ div >

< div class ="grid_12" ></ div >
< div class ="clear" ></ div >

< div class ="grid_3" ></ div >

< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="clear" ></ div >


< div class ="grid_12" ></ div >
< div class ="clear" ></ div >

< div class ="grid_4" ></ div >
< div class ="grid_4" ></ div >

< div class ="grid_4" ></ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

The skeleton is ready. It's time to impose design. Green panels are simply blocks with background color and height. The height of the navigation bar is not set. Instead, it will be controlled by the size of internal links. Do not forget to add a header image.

div.spacer {
background-color: #8FC73E;
height: 1em;
}

div#navbar {
background-color: #8FC73E;
padding: 10px 0;
}

* This source code was highlighted with Source Code Highlighter .

Applying classes to adjust grid_12 blocks and setting ID

< div class ="container_12" >
< div class ="grid_12" >< a href ="images/header.png" alt ="" /></ div >
< div class ="clear" ></ div >


< div class ="grid_12" id ="navbar" ></ div >
< div class ="clear" > </ div >

< div class ="grid_7" ></ div >

< div class ="grid_5" ></ div >
< div class ="clear" ></ div >

< div class ="grid_12 spacer" ></ div >
< div class ="clear" ></ div >


< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >

< div class ="clear" ></ div >

< div class ="grid_12 spacer" ></ div >
< div class ="clear" ></ div >

< div class ="grid_4" ></ div >

< div class ="grid_4" ></ div >
< div class ="grid_4" ></ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

The central columns do not require any effects. Add some text to fill the design. Before proceeding to the top, take a look at the basement. In the screenshot, the basement has a uniform color. You will not be able to implement this with existing code. A wrapping div around these three columns will solve the problem. You think it's okay, you just need to insert a div. But this div will break the grid, because Grid 960 is based on parent and child elements when using styles (think of the container_12 .grid_4 selector). In this case, the problem will be solved by the nested grid, which the Grid 960 allows to use. Create a nested grid by adding a grid_12 block, then position grid_4 blocks inside. When using nested grids, children must have special classes. The first child must have the class “alpha”, and the last child is the class “omega”. Edit the markup to make the necessary changes for the basement.

< div class ="grid_12" id ="footer" >
< div class ="grid_4 alpha" ></ div >
< div class ="grid_4" ></ div >

< div class ="grid_4 omega" ></ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

div#footer {
background-color: #e5e5e6;
}

* This source code was highlighted with Source Code Highlighter .

Perfectly! Now the basement has a uniform color fill, and you can specify the size of the columns, if necessary. Add some text for the basement columns and go to the navigation bar. Navigation is made in the form of a simple bulleted list. Add some links and corresponding styles.

< div class ="grid_12" id ="navbar" ></ div >
< ul >
< li > Articles </ li >
< li > Topics </ li >

< li > About </ li >
< li > Editors </ li >
< li > Contact </ li >
</ ul >

</ div >

* This source code was highlighted with Source Code Highlighter .

div#navbar ul {
list-style: none;
display: block;
margin: 0 10px;
}

div#navbar ul li {
float: left;
margin: 0 1.5em;
font: bold 1em Arial;
}

* This source code was highlighted with Source Code Highlighter .

Wonderful. The page will be ready soon. All we need to do is create block effects in the upper section. This is not as easy as it sounds. Before we begin, you need to understand something about the Grid 960 and the CSS frameworks in general.

CSS frameworks will not solve all your problems.

Attentive readers probably already noticed something. There is absolutely no flexibility in our page. All elements are given specific sizes, and changing these sizes can cause problems or even ruin the whole design. In addition, due to the restriction of the Grid 960, designers cannot use some of their ideas.

For example, if the same design were 1000 pixels wide. Grid 960 creates a grid width of 960 pixels, so larger layouts cannot be used. What if you want to expand the layout to 1000 pixels, instead of 960? It's safe to say that you cannot do this without implementing a few complex code changes.

The framework restricts designers to a set of hard and fast rules. Let's say a client wants a design that is wider or already 960 pixels. It will be easier for the designer to create code from scratch to implement new tasks than to use the previously created one.

There is another, not yet identified, problem - columns of the same height. Since the center columns have the same background color, they look the same in height. In the basement, containing a block, sets the same background color behind the three columns. Grid 960 does not help you in creating the same height columns. There are, of course, ways to implement this on our own, but since we are simply creating a prototype of the design, we will not waste time on solving minor problems in the further functioning of the site. At this stage, you need to understand the idea itself.

There is another aspect of the Grid 960 that needs to be taken into account before we get to the top section. Grid 960 is based on the size of elements and indents, when creating a string of the correct size. If you use a frame or padding, the layout will break. Therefore, if you need to use them, you must provide this in the block size to reflect the changes. It is very tiring. Indicating the size of the elements in two places will always be confusing, besides the layout will be much more difficult to maintain. That's all. Let's finish the top section.

Upper section

Fortunately, you can manipulate columns of the same height in the upper section. Since the image on the right is assigned the width and height, we know the size of the other column. Create a block effect by adding a new diva with a frame inside existing divs. Do not forget to specify the size. Do not assign padding divas, because this will change the width of the blocks and break the grid. Instead, specify a margin for the child elements. This will not change the width of the parent blocks. Apply margin to line elements. This will create the desired effect and the text will recede from the edge.

< div class ="grid_7 topSection" >
< div > </ div >
</ div >
< div class ="grid_5 topSection" >

</ div >

* This source code was highlighted with Source Code Highlighter .

Use classes instead of IDs, because the topSection class applies to both blocks. It also makes it easier to change the height. Select a height value, and create a class.

div.topSection div {
border: solid 10px #e5e5e6;
height: 280px;
}

div.topSection div p {
margin: 10px;
}

* This source code was highlighted with Source Code Highlighter .

Fine! Let's look at our work.



We start filling with content. Fill in the left block with a small amount of text. Just do not get carried away, if the text is too much, it will crawl over the edge of the block. This creates a potential problem in the layout. How do you know how much text will be too large? In production design, to prevent this problem, the designer would have to create a function that outputs a certain number of words.

Now, let's insert a picture. Just before you insert it, specify the size. If you are a normal mathematician and understand the box model, you most likely already know how big it should be. If you don't know, launch Firebug and take a look at the DOM. Turn on the Inspect button and click on the block in which the picture will be placed. Open the Layout tab. Firebug will display the box model of the block you selected.



The screenshot shows the size of the image 360 ​​x 280. Find the picture and create a style. I decided to allow the entire image to fill the entire block. If you want to create 10 pixel indents, make sure to reduce the size of 20 pixels on each side.

img#poster {
width: 360px;
height: 280px;
}

* This source code was highlighted with Source Code Highlighter .

You should have the following. Feel free to change the text or image.

Remember the limitations

Now that the prototype is ready, let's summarize the work done. You've learned how to prototype design quickly. Grid 960 easily creates a grid for us. And what's next? Naturally, you need to show the client, and listen to what he says. There are a few caveats though. Has the design been tested in IE6 and IE7? Not. Do I need to do this? Not. This is only a prototype. Of course, all the features of browsers will be taken into account, prior to production.

What if customers want to create a more integrated design? In this case, you will quickly discover the limitations of the framework. What if the design should be rubber or stretchy? The framework will not be able to help you with this, so you have to do everything from scratch. Remember that CSS frameworks will not solve all your problems, but they can help with some. Grid 960 as well as other frameworks, is great for creating prototypes.

Of course, you can use the concept of Grid 960 in the further development of the code, but the framework is not recommended to be fully used in your projects. Remember that CSS frameworks, like any other tool, have their fans.

Download the archive with an example .