Sep 14 2010
I have just uploaded Variant Classic, a new free website template that is not really new. If you have followed this website for some time, you may recognize the look: It is the previous design of andreasviklund.com! To read more about this template and see a live demo, go to the Variant Classic page. To download the template directly, click the screenshot below:
Aug 31 2010
For the launch of the refreshed andreasviklund.com, I am happy to present a new template for you: Variant Mini! It was created as an attempt to combine the concept of including several layout options with using as little CSS as possible, and I am quite satisfied with the result. Three layout options are included in the template package, and despite having the basic HTML tags styled to fit together in the design, only about 30 lines of CSS code is used.
Feel free to experiment with Variant Mini, it should be easy to build upon. I hope that it could also be a good starting point for XHTML/CSS beginners thanks to the simple code structure. If you make any interesting modification or add-on to the template, feel free to share it in the Variant Mini section of the all-new forum!
Jul 9 2010
I have just uploaded a new free XHTML/CSS template, this time a somewhat different kind of design called Variant Fashion. It is not as simple as you may be used to, but it should still be easy to get familiar with. The primary difference compared to previous designs is that Variant Fashion includes a number of different layout options, as well as visual style options. You can combine any of the layouts with any of the color schemes, and you make the changes by editing a few IDs and classes in the HTML source. The template has all CSS in one single file, meaning that the stylesheet includes examples of how to customize a template into something different.
Below you can see what Variant Fashion looks like (all four screens are taken from the included HTML examples, click the image to download the template):
I will soon write a tutorial on how to use the included layout variations and color schemes, as well as explaining how to make your own adjustments. Until then, you can look at the differences between the examples, for example how the sidebar and the content divs are marked up in the two left/right sidebar examples: Moving the sidebar to the right is simply a matter of changing the sidebar div ID from “sidebar” to “sidebaralt” and the content div ID from “content” to “contentalt”. In a similar fashion, to use the light style you only need to apply class=”lightstyle” to the body tag. The CSS will take care of the rest.
If you find any errors or things that can be improved, feel free to post a comment or send me an e-mail through the contact page. I will add more visual styles and color schemes to this template in the future, this first version is just a basic release to see if this kind of code organization works well for template users.
Jun 27 2010
Saturday passed and it is now two hours into Sunday, so this post is a bit late. But the news will hopefully be interesting to you anyway! I have uploaded two new free website templates, called [Variant Rounded->http://andreasviklund.com/templates/variant-rounded/] and [Variant Portal->http://andreasviklund.com/templates/variant-portal/]. As I have in the past, I try to keep the designs simple and useful. Variant Rounded is an 800px-friendly template with more design than content in its basic 3-column layout. Variant Portal is lighter, less colorful, 1024px-friendly and made for sites with more text content that needs to be in focus. Both templates have been tested in multiple web browsers and on mobile devices, and I have not found any problems. The code is valid XHTML 1.0 Strict and CSS2. Basic accessibility features are included, such as skip links and full functionality with screen readers. Like most of my previous designs, these two new templates should be perfectly functional even in browsers that do not support CSS, thanks to the simple code structure.
Screenshots are below, click the images to download each template:
Latest comments