Why Use a Grid System for Joomla, WordPress or Drupal?
Web designers need to create beautiful designs. That’s obvious. But, with many different platforms and screen sizes in use, they now also need beautiful designs that are also easy to scale and modify. Grid systems are one solution They are an attempt by designers to create work that is both beautiful and practical.
Various grid systems now form the basis of almost all new Joomla, WordPress and Drupal templates and themes. In this tutorial, we’ll give you an introduction to grids so that you can work with those designs more effectively. At the end, we have links to tutorials on two popular grid systems for Joomla, WordPress and Drupal.
In this tutorial we’re going to use the 960 Grid System. You can find out more and see some examples at http://960.gs/.
Why the 960 Grid System?
All modern monitors support at least 1024 × 768 pixel resolution. If we create pages with something slightly less than that, we’ll have a web site that will fit almost all of monitors with a pleasing width.
What would make layout easier, is if there were columns that had standard widths, so it’s easy to line things up, and makes figuring widths easy. You already use this concept when you create a table and the different rows span different numbers of columns. If you take the optimal width of 960 pixels, it makes standard columns a lot easier.
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 makes it a highly flexible base number to work with.
There are other grid systems with different widths, and advanced users can add columns, so if monitors get bigger, you can make bigger grids. 960px has been the most popular base system, but that could change.
Most common variations 12 column and 16 column
There are two layouts that lend themselves to easier web design.
The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.
Standard Width of Columns
940px
860px
780px
700px
620px
540px
460px
380px
300px
220px
140px
60px
You can layout a row by making sure your module widths are combined for a total of 960px. For example: 220 + 220 + 60 + 380 = 960. It doesn’t matter what sequence they are in as long as they all add up. The gutters take care of themselves, so you don’t have to do a lot of math to figure them.
One of the things that makes this convenient is that it is easy to sketch out a wire-frame on a piece of paper and discuss it with a client. (Some people still write and draw.) From any sketch you can quickly come up with the size each graphic or text element needs to be, and easily specify page placement.
Sample of the 16 column grid
As companies that produce templates go into the future, they are adopting these grid systems, and adding an interface to administer the columns and play with the layout in a visual manner . You don’t have to think about the numbers if you have math problems.
Another huge advantage to the grid system is flexibility and mobility. 12 columns on a Joomla site are all in the exact same postions as 12 columns on a WordPress site and a Drupal site. This gives template developers an opportunity to create templates with layouts that are compatible with all CMS’s.
If you’re basing your work on the grid system, next time somebody asks you to convert a WordPress site to a Joomla site, at least everything will be in the same place and the same size on the new site. Saving you a lot of effort with your css and image sizes.
You can also feel free to design the site layout without worrying which CMS you will be using. Standardization is greate in a production environment. It makes it a little easier to separate the design from the more mechanical considerations.
We’ve prepared tutorials on two framework systems that are both based on the 960gs.