CSS Frameworks: Grid System 960. What is it?

A lot is being said about CSS Frameworks these days: Blueprint, Grid System 960, Elastic, etc… there are many who say they can be a good starting point for the development of your own works.

But is it really so? Today we will see in details the use of one of these CSS frameworks: Grid System 960.

What is a CSS framework?

A css framework is an instrument which provides the developer with a well-defined architecture, based on quite precise written down rules which allow to carry out web applications without having to start from scratch.

And what is the CSS framework Grid System 960?

The CSS framework Grid System 960 is nothing but a bunch of style sheets with ready made rules which envisage the general container disposed on a grid. The framework makes available two grids: one formed by 12 columns and another by16. In both grids obviously the width of the general container always remains 960px.

Why choosing a size of 960px?

All modern monitors support by now a minimal resolution of 1024×768 pixel. The number 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This renders a lot more flexible the combinations relative to the dimensions of the columns that can be made.

In the following image you can see an example of two websites carried out utilizing the two grids put at the disposal by the framework Grid System 960: the first utilizes the 12-column grid while the second makes use of the 16-column grid.

960-grid-system-framework

How the CSS framework Grid System 960 is used?

After having downloaded the framework, the first thing to do is load the necessary files for working with our grid:

<link rel="stylesheet" type="text/css" media="all" href="path/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="path/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="path/text.css" />

Un piccolo consiglio che voglio darti: non apportare modifiche direttamente al file 960.css perché altrimenti queste verrebbero perse nel momento in cui, in futuro, si eseguirebbe un update del framework.

Thus we create a separate style sheet from those of the framework which we will call “style.css” which is going to contain the rules we want to assign to the website we are developing and we load it as well:

<link rel="stylesheet" type="text/css" media="all" href="path/style.css" />

How can I choose the container/grid to use?

Now we have to choose the type of grid we want to use between the two made available by the framework,the  12-column grid (.container_12) or the 16-column grid (.container_16). We already placed emphasis on the fact that the two grids both have a dimension of 960px, the only difference is that the 12-column grid divides the dimension by 12 while that of 16 splits it up by 16.

The class which allows to choose between the types of grids is the following:

<!-- select the 12-column grid -->
<div class="container_12">

or:

<!-- select the 16-column grid -->
<div class="container_16">

How do we establish the size of the columns?

When we want to divide our container in more columns it’s enough to simply use the class .grid_XX, in which “XX” represents the number of columns (of the grid chosen as container) of which will be composed the column we want to obtain.

For example, if we want to have two columns ( lateral menu and content) it is enough to indicate it like this in the layout of the website we are developing:

<div class="container_12">
	<div class="grid_7">main content</div>
	<div class="grid_5">lateral menu</div>
</div>

The class “grid_7” indicates that the lateral menu column should have a size equal to 7 columns of the chosen grid.

As you can see, the sum of the first column (grid_7) with the second column (grid_5) is exactly 12, the total of columns which compose the grid of the container we have chosen (container_12). In this way it is not necessary to know the width each single column should have and it becomes way easier to resize our columns during the development.

Let’s see another example, this time we have been asked to subdivide our layout in three columns of equal size, without having to do complicated calculations to specify the size in pixels that each column should have, enough applying a little bit of math to obtain the following:

<div class="container_12">
	<div class="grid_4">section 1</div>
	<div class="grid_4">section 2</div>
	<div class="grid_4">section 3</div>
</div>

Even here as you can see the sum of the three columns grid_4 is exactly 12 (4 + 4 + 4).

Do margins exist between a column and another?

As a predefined setting the columns have a certain margin between them.  Each class grid_XX has 10px of margin both on the right and on the left. This entails that two adjacent columns have between them a total margin of 20px rendering the presentation of the contents more legible and harmonious.

In case we want that the first and/or last column of our layout don’t have any margin enough adding the class “alpha” for not assigning the left margin of the desired column or the class “omega” to avoid assigning the right margin.

Let’s see an example:

<div class="container_12">
	<div class="grid_4 alpha">section 1</div>
	<div class="grid_4">section 2</div>
	<div class="grid_4 omega">section 3</div>
</div>

In the example we mentioned above the first column won’t have a left margin and the last column will have no right margin.

What in case we want to leave one or more empty spaces before or after a column?

If you want to insert one or more empty spaces before or after a column enough to make use of the classes “prefix_XX” or “suffix_XX” which serve exactly to specify the number of columns (_XX) that we want to leave empty. Let’s see an example:

<div class="container_12">
    <div class="grid_7 prefix_1">
        ...
    </div>
    <div class="grid_3 suffix_1">
        ...
    </div>
</div>

In the example we just mentioned we have left an empty space (“prefix_1“: equal to the size of a column of the chosen grid) before defining a column of the size grid_7, followed by a column with the size grid_3 and an empty space immediately after (“suffix_1“).

Be aware that the sum of the two columns is in addition to the empty spaces we have left in the beginning of the first column and immediately after the second (grid_7 + grid_3 + prefix_1 + suffix_1) always results to be 12.

Conclusions

The CSS framework, as you had the chance to see yourself, can remarkably save time during the development of your projects. Obviously nothing prohibits the personalization of the framework according to your real needs as these solutions can never be universal, especially with regard to the typography of your works. Therefore the advice is not to stop at the simple use of a framework but to go further, personalizing it to the point of creating one that is all yours to use as a starting point for your future works.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: , ,

The Author

Nando is administrator of Edi Group, a Sicilian web agency founded in 2005. He deals with the development of web applications in php language and the implementation and administration of databases. And besides Microsoft Trainer with years of experience in regional and private training courses as a designer and lecturer.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

5 comments

Trackback e pingback

  1. How to design a corporate/business layout? | Your Inspiration Web
    [...] Let’s open the 960 grid system framework that you can download from this site. In this case we will …
  2. YIW Minimal: a free & clean template for a simple yet professional website | Your Inspiration Web
    [...] As we’ve already seen in the planning phase, Your Inspiration Minimal was designed with the 960 framework in mind. …
  3. From Psd to Xhtml: how to transform the layout in XHTML+CSS? | Your Inspiration Web
    [...] layout following the disposal grid of this framework. As explained  from Nando in his article on 960gs,  we have …
  4. TUT: CSS Frameworks: Grid System 960. What is it? | mmc blog
    [...] http://www.yourinspirationweb.com/en/css-frameworks-grid-system-960-what-is-it/ [...]
  5. My log book | My Blog
    […] http://www.yourinspirationweb.com/en/css-frameworks-grid-system-960-what-is-it/ […]

Leave a Reply

Current day month ye@r *