When the Freestyle template was released, I wrote that it made it possible to create any layout needed thanks to the simple grid system. In an e-mail exchange with a template user, I mentioned the fact that basically any layout from my previous templates could be re-constructed quite easily. In return, I got a challenge: “So, can you turn it into something similar to andreas01?” – and I figured that it would be a good example to do.
The original andreas01 template was the very first CSS template I ever created. It was originally released in July 2005, and it got very good feedback from the CSS template design community and from template users worldwide. It has been used to build hundreds of thousands of websites, and I would guess that the popularity mostly comes from the clean design and the classic 3-column layout.
In order to put focus on the flexibility of the Freestyle template, I decided to not touch the stylesheet at all. I would use only the original CSS, with no additional inline styles added to the HTML. Because of this, the end result will not be any exact copy of the original but rather a similar design but with elements from the Freestyle template.
First of all, I looked at the different parts of the original layout to see how the grid rows and columns should be arranged. I decided to start with adding four rows: title/slogan, header image, content and footer. Then I added two columns in the title/slogan row, in a .c5 and .c7 split (adding up to the number 12, as explained in the previous grid tutorial). The header image should have the full width of the layout, so it got a single column with class=”c12″. The content section was split into three columns: .c2, .c8 and .c2, giving two narrow sidebars on each side of a wide main content area. And finally, the footer got a single column, just like the header image.
To help with positioning the column contents and making text sizes a bit more similar to the original, I also added some alignment classes to the columns. Here is a sketch of the column setup (click to see a larger version):
Here is the HTML code used to set up the rows and columns, including the body element with the classes used for this example:
<body class="light blue smaller"> <div id="layout"> <div class="row smaller"> <div class="col c5 smaller"> class="col c5 smaller" (site title) </div> <div class="col c7 aligncenter"> class="col c7 aligncenter" (slogan) </div> </div> <div class="row"> <div class="col c12 aligncenter"> class="col c12 aligncenter" (header image) </div> </div> <div class="row"> <div class="col c2 alignleft smaller"> class="col c2 alignleft smaller" (left sidebar, menu) </div> <div class="col c8"> class="col c8" (main content) </div> <div class="col c2"> class="col c2" (right sidebar) </div> </div> <div id="footer" class="row"> <div class="col c12 aligncenter"> class="col c12 aligncenter" (footer) </div> </div> </div> </body>
Two images were created: A new background image that replaced the file background-light.jpg in the original template, and a header image similar to the one in the original template but with larger dimensions (960×240 pixels) to fit the layout width.
Next, I added the content. Header titles, sample texts, the header image, a couple of sample links and the footer text. To adjust font sizes, I used the sizing classes .smaller and .larger where needed. The navigation menu is a basic unsorted list with the class=”menu” added to it. As seen in the HTML above, I also added class=”light blue smaller” to the body element to get the a color scheme similar to the original.
This is the end result, the Freestyle template with the andreas01 layout and design elements added to it. Re-constructed without editing any CSS at all:
If you want to look closer at Freestyle01, you can download it from here: freestyle01.zip. Feel free to use it as a regular template if you want to.
This article was written by Andreas Viklund
Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.