Reconstructing the andreas01 layout with Freestyle

Post 25 of 262

September 4, 2012Andreas ViklundLearn6 comments

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

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.

Reconstructing the layout

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>

Replacing the images

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.

Inserting the content and making final adjustments

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.

The end result: Freestyle01

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:

The layout from the classic andreas01 CSS template, reconstructed using the Freestyle template.

If you want to look closer at Freestyle01, you can download it from here. Feel free to use it as a regular template if you want to.

andreas01, freestyle, tutorials

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.

6 comments:

sushilSeptember 10, 2012 at 09:17Reply

Designing work is simple now.

New free template: Origo v1.0!September 27, 2012 at 11:23Reply

[…] on the Freestyle01 modification and enhanced with new CSS styles and new fonts, here is an official remake of andreas01 built using […]

SnideOctober 5, 2012 at 09:24Reply

Do you now if its possible to use html files as a wordpress template? i have been trying but when i add the html files it says css file and template missing, when i add the css file it dissapers from the list of themes

BrandonNovember 28, 2012 at 04:20Reply

All I can say is your layouts are always awesome.. I find them simply stunning.. the way its designed and the colors and nice effects.. hits the spot every time.. — I bet you will be doing big things with the animation from css3 and the javascript framework(s)… man.. I wish you had a mailing list!!