Tag archive: tutorials

Reconstructing the andreas01 layout with Freestyle

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:…

Freestyle template – The navigation menu

The Freestyle template features a basic navigation menu style that can be used to create both horizontal and vertical navigation menus. I’ve been asked to explain how it works, so here is a quick rundown. One class: .menu The navigation menu is basically one or several unsorted lists (the UL element in the HTML) which…

How to use the Freestyle template grid

The latest free HTML/CSS template release, Freestyle, is built using a simple dual-grid system that makes it easy to construct any layout needed and wanted. In this post, I will explain how to use the grid. First of all, let’s look at the basic structure of div:s that are used. #layout – the wrapper The…

How to use the Freestyle template options

The Freestyle CSS template published yesterday includes a set of options that can be applied to modify the template design, all handled by applying classes to the body element in the HTML. Here is a list of the body classes that can be used, what they do and how they can be combined. Layout width…

How to add multiple image sections to “This is me” v1.0

To add support for more than one gallery section in the “This is me” and “This is me (dark)” templates, there are a few things that need to be done in the HTML and CSS code. The following step-by-step tutorial works for both the light and the dark version of the “This is me” template….

Menu