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 960.gs 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)

Chapter 1. Instant 960 Grid System

Welcome to Instant 960 Grid System. This book has been especially created to provide you with all the information that you need to create a responsive website using 960 Grid System. You will learn how to use grids, beginning with the layout in Photoshop to the final product in HTML; for example, building your own portfolio.

This document contains the following sections:

So, what is 960 Grid System? finds out what a grid is, how it can help you, when you can use it, and why designers and developers prefer to use only 12 or 16 columns.

Installation helps you learn how to prepare your environment to use 960 Grid System stylesheets from Photoshop to the files and folders of the project.

Quick start – using 960 Grid System from Photoshop to code lets you discover the real power of the 960 Grid System, positioning the elements of your layout in just a few minutes by just applying some classes in your HTML tags. Further, you'll learn how to apply the colors and sizes to your website in order to make it look as beautiful as a Photoshop version.

Top 3 features you need to know about 960 Grid System helps you learn the features of 960 Grid System In this day and age, where everybody owns a smartphone or tablet, it is unacceptable that we build a website which runs only on the desktop. Because of that, I'll teach you how to prepare your website for the present and the future with fluid grids, fluid media, and media queries, also known as responsive web design.

People and places you should get to know provides you with many useful links to the project page, as well as a number of helpful articles, tutorials, blogs, and the Twitter feeds of people to follow.