Archive for category 'Learn'
Sep 4 2012
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: “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
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: freestyle01.zip. Feel free to use it as a regular template if you want to.
By Andreas • Learn • 3 Tags: andreas01, freestyle, tutorials
Sep 3 2012
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 have been given the class=”menu”, like this:
<ul class="menu"> <li><a class="index.html">Layout #1</a></li> <li><a class="index2.html">Layout #2</a></li> <li><a class="index3.html">Layout #3</a></li> </ul>
The list adjusts to the grid system and multiple navigation menu lists can be used, meaning that you can place more than one navigation menu in the layout. If you want to use a horizontal menu, then place a list with one list item (the LI element) in each list, in a set of columns placed horizontally. If you want to use a vertical menu, place a list with several list items in a single grid column. It is also possible to combine the two forms into a grid menu. Examples of all three forms are included in the template .zip.
Freestyle does not support dropdown or popout multi-level menus by default, but it is one of the things that are considered for the next version of the template. “Current page” is another proposed feature. Is there anything else you would want to see in terms of features for the navigation menu in the next version of the Freestyle template? Post your suggestions and ideas as comment below!
By Andreas • Learn • 3 Tags: freestyle, templates, tutorials
Aug 27 2012
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 main layout is placed in a single div with the id=”layout”. It sets the general layout width, by default to 960 pixels. The Freestyle template also includes a body class that changes the width of the ID #layout to 1200 pixels, to allow an optional wider layout. Read more about how body classes in this tutorial. In this post, I will use the default 960px width.
This is the HTML we start with:
<div id="layout"> </div>
.row – the row class
Inside the layout div, there can be any number of rows. Each row is created by a div with class=”row”. The row has the same width as the layout div, by default 960 pixels. In this example, I will use three rows, which gives a HTML structure that looks like this:
<div id="layout"> <div class="row"> </div> <div class="row"> </div> <div class="row"> </div> </div>
.col and .c1 to .c12 – the columns
Inside each row, there is a third level of div:s that split the rows into smaller areas called columns. This is done using class=”col” followed by a second class that defines how wide each column is. Every row should be filled with 12 columns. But this doesn’t mean that the row should contain 12 div:s. Each div can be 1-12 columns wide, and this is controlled by classes called .c1, .c2, c3 – and so on up to .c12. For example, a div with class=”col c2″ takes up two columns in the grid, leaving room for 10 more columns. A second div with class=”col c10″ fills this space, resulting in a simple layout with a narrow left sidebar and a wide content area.
Each row should always contain column div:s that add up to 12. So in this example, where I want a single column header, a 2-column content area and a single-column footer, I would use this code:
<div id="layout">
<div class="row">
<div class="col c12">
(header section)
</div>
</div>
<div class="row">
<div class="col c3">
(left sidebar)
</div>
<div class="col c6">
(main content area)
</div>
<div class="col c3">
(right sidebar)
</div>
</div>
<div class="row">
<div class="col c12">
(footer section)
</div>
</div>
</div>
Additional column div styles
Each column div can be given additional classes, beside .col and .c1-12, to change the way content inside the div is presented. Here is a list of some of the included classes that can be used, and what they do:
.alignleft – Makes the content in the div aligned to the left.
.alignright – Makes the content in the div aligned to the right.
.aligncenter – Makes the content in the div centered. Can be used for centering site title and slogan, or the footer.
.alignjustify – Makes text in the div fill the entire width of the column.
.larger – Makes the font size in the div larger (1.2 em).
.smaller – Makes the font size in the div smaller (0.9em).
There are also a few additional classes used for design touches, such as .separator and .footer. Check the sample layouts included with the Freestyle template to learn how they can be used.
Summary
In short, it is all about keeping track of the div structure and the numbers. Inside the div id=”layout”, you can place any number of divs using the class=”row”. In each row, there is space for 12 grid columns. This can be used for a single div with class=”col c12″, or for multiple div:s as long as the c[number] adds up to 12.
In the next post, I will reconstruct the layout from the first HTML/CSS template I ever created, andreas01, and explain more about how the navigation menu styles work.
By Andreas • Learn • 2 Tags: freestyle, grid, templates, tutorials
Aug 24 2012
How to use the Freestyle template options
Freestyle (layout #6)
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 classes: (none) and “wider”
Freestyle includes two separate grid systems with different widths, both supporting 12 columns. The two options are 960 pixels and 1200 pixels. By default, the 960px grid is used. To use the wider 1200px grid, find this line in the HTML:
<body>
Apply the class “wider” to this element by rewriting the code into:
<body class="wider">
Save the changes, and when you view the template in a web browser it will now have a wider page layout. To switch back to the 960px width, simply remove the class “wider”. The width of all rows and columns used in the grid will adjust automatically.
Color scheme classes: (none) and “light”
Using the same principle, you can switch from using a light text on a dark background (which is the default option) into an inverted option with dark text on a light background. This is done with the body class “light”, like this:
<body class="light">
This works independently from the layout width, and you can use multiple body classes if you want to combine a wider layout with the light colorscheme. To do this, just add a second class to the body element:
<body class="wider light">
Removing the class “light” switches the color scheme back to using the dark background.
Link color classes: (none), “blue”, “pink” and “orange”
Finally, there are four different accent colors included, that can be applied using the same principle as above. The color option is used for links and header texts, and the default color is red. To change to a different color, add any of the classes “blue”, “pink” or “orange” to the body HTML element. Again, this option works independently from the layout width and the dark/light color scheme, so it can be applied as a third body class if wanted:
<body class="wider light pink">
If no color class is used, the default red color will be used.
And this is only the beginning…
It is perfectly possible to add more colors, new grid widths and new backgrounds. And body classes makes it easy. For example, if you want to add a new color, say “green”, you can add these two lines to the bottom of the freestyle.css file:
body.green a {color:#3eb438;}
body.green h1, body.green h2, body.green h3 {color:#3eb438;}
Then simply add class=”green” in the body HTML element to use it on your site.
By Andreas • Learn • 3 Tags: freestyle, templates, tutorials
Aug 13 2012
CSS image slideshows without scripting
Stu Nicholls has a brilliant archive of experiments and concepts that pushes the limits for what can be done using CSS. Recently, he has published a number of demos that challenges the view that javascript is needed to create beautiful image slideshows. Using clever (and standards-compliant) coding, Stu shows that it is perfectly possible to create slideshows that look great without using javascripts. For one example, check out the classic-styled left/right-click gallery with permanent image changes.
By Andreas • Learn • 1 Tags: css, gallery