Jan 18 2012
The second version of The Grid template has been updated to version 2.1, fixing a minor error in the sample content. A package of sample layouts built from the template will be released separately at the end of this week, showing the flexibility that the grid system provides for creating both simple and complex layouts.
Download The Grid v2.1 (.zip, 164 Kb)
Oct 13 2011
The new version 2.0 of The Grid template includes two separate grid layouts, one that is 960 pixels wide and another that is 1200 pixels wide. Both grids use 12 columns with 20 pixels of spacing, but the column widths are diferent. The 960 pixels grid use a column width of 60 pixels while the 1200 pixels grid use a column width of 80 pixels. Since both the included grids have a similar set up, you can use any of them with the layouts created with the template. The only thing that needs to be modified to switch between the two width options is the <body> tag.
The 960px grid is the default setting. To use it, keep the <body> tag free from additional classes, and just let it be written out as:
[html] <body>The wider grid is applied by adding a class to the <body> tag. The class, named “wider”, activates a part of the CSS which changes the grid width and all the relevant parts of the layout that are affected by the width. To switch to using the 1200px grid, modify the <body> tag to make it look like this:
[html] <body class="wider">No matter how the columns and rows are set up in the template, the layout and the background image will adjust to the width thanks to the body class. The exception is the header image which needs an additional edit of the HTML code. Change the header image filename by adding “-1200″ to the file name, like this:
[html] <div id="headerimage" class="col c12">…and you are ready to use your layout in a wider format!
Oct 12 2011
The Grid template has got a lot of positive feedback since its release in the beginning of September. It was the most downloaded template on this site during last month, and since I learned a lot from creating it I wanted to continue working with it to learn even more.
Today I am releasing a new version of The Grid: version 2.0. It has a number of significant updates and additions, including a second and wider (1200px) grid system which can be applied by adding class=”wider” to the HTML body tag, a number of text styles and two new examples of how to arrange navigation menus with The Grid. Rather than replacing the original version with this new one, I am publishing it as a template of its own. With the new features, I have used more code and made more advanced examples than the first version of the template had – so the original version may be easier to use for web design beginners and for those who prefer to keep things as simple as possible.
Check out the live demo of The Grid v2.0 or download the template directly: the-grid-v2.zip (164 Kb).
Source images (in Adobe Photoshop .PSD format) for the background and header images are available here: the-grid-psd.zip (564 Kb).
Sep 2 2011
A new template has been added to the website template page: The Grid. It is the first template I release which is using a grid layout system, and it provides a lot of freedom for template users to create advanced multi-column layouts. As always, I have kept the code as short and simple as possible to make it easy to work with. Four layout examples have been included to give you an idea about the flexibility of using a grid system. More layout examples and a tutorial about how the grid system works (and how you create the layout you want) will be published next week.
This is what The Grid template looks like. To download the template, click the screenshot below. To read more, see a live demo or screenshots of the different layout examples, go to the The Grid template page
In case anyone would want to modify the background or the sample header image that is included, here is a .zip containing the .PSD source files for both the header and the background images: the-grid-psd.zip (242 KB)
Latest comments