Book Image

Instant 960 Grid System

By : Diego de Tres
Book Image

Instant 960 Grid System

By: Diego de Tres

Overview of this book

Grid systems were an integral part of World War II, helping graphic designers to achieve coherency in devising a flexible system. This book exploits the vast potential of grid systems to create organized and properly aligned websites for mobile platforms. Instant 960 Grid System is a practical, hands-on guide explaining how to build a website using targeting mobile devices, from tablets to smartphones. This book shows you how to build quick and organized websites, clearing out the confusion that surrounds column allocation. It will take you through a number of clear and practical exercises that will help you to take advantage of the 960 Grid Systems. You will also learn how to build your own portfolio, starting with the layout in Photoshop to the final product available in HTML. If you want to understand and familiarize yourself with how to use the 960 Grid System and at the same time want to prepare your website quickly to run on smartphones and tablets, then this book is for you. Not only will it cover the creation of a quickly-produced neat and concise website for different platforms, but it will also teach you how to make it responsive.
Table of Contents (7 chapters)


In four easy steps, you can prepare your environment to start with the 960 Grid System.

Step 1 – what do I need?

Before you start, you will need to check that you have all of the following required elements:

  • Code editor: You can use any code editor you want as 960 Grid System supports HTML, CSS, and JavaScript. I preferred to use Sublime Text ( because it is light, flexible, and multiplatform. But feel free to pick the one you are comfortable with, for example, DreamWeaver, Coda, Textmate, Aptana, Visual Studio, Notepad++, Editplus, Emacs, Vim, and so on.

  • Graphic editor: For this book, we used Adobe Photoshop. But 960 Grid System has templates for many graphic editors, such as Gimp, Illustrator, Corel Draw, Fireworks, and InDesign.

  • Browser: I recommend Chrome because it is the fastest in my humble opinion and has great developer tools. But feel free to use what you prefer, that is, Firefox, Safari, Internet Explorer, and so on.

Step 2 – preparing the folders

Organization is everything. Before we start our project, we need to create our folders to receive our layout created in Photoshop, and we also need to create the HTML, stylesheets, images, and JavaScript that we'll need for our project.

Create the folders shown in the following screenshot on your desktop or any preferred path in your computer:

Step 3 – downloading

The easiest way to download is as a compressed package from

On the site, click on Big ol' DOWNLOAD button :) as shown in the following screenshot:

Unpack the zip file and find the Photoshop template called 960_grid_12_col.psd inside the folders Templates/Photoshop.

Copy this file to our folder layouts and rename it to desktop.psd. We will create the layout of our portfolio using this file as the base.

And inside the folder code/css, copy the files 960.css and reset.css to our folder called css. These files will be used as the grid framework to our project.

Now, your project folder needs to be like the following screenshot:

Step 4 – linking the files

Now that we have all the files we will use, it's time to link the files. To do that, we need to create our HTML file called index.html inside the folder www and link the stylesheets we downloaded before:

<!doctype html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link href="css/960.css" rel="stylesheet" type="text/css">


Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

And that's it!

By this point, you should have all the necessary files to start building your portfolio.