Skip to: Content | Main menu | Section menu

andreasviklund.com

web designer | musician | writer



Modular CSS template

11 May, 2006 (03:14) | Internet, Webdesign | By: Andreas

The Modular Template (beta) by Andreas ViklundOn January 11th, I presented a concept for a new kind of website template based on modular thinking. The idea was to provide one single template with only one CSS file, and by using blocks of markup that were calling different classes from the stylesheet, it would be possible to create hundreds of different layout variations. By also adding a general framework that the modules were placed inside (for example fluid width frame or fixed width frame), even more layouts could be created.

On January 15th I had showed the idea for a couple of people, who were all very positive about the idea. The blocks are possible to move around, multiply and combine in many different ways, and in the last version of the modular template I made I had 20 modules (such as 2-column, sidebar, double sidebar, header, horizontal menu, footer, adbox and so on). Unfortunally, the project grew into something that took a bit too much time, so I abandoned it to continue the work later on. I thought that the idea was too good to not realize, especially since I thought that this way of building layouts could make a great feature in a content management system. I have in fact used parts of it in custom-designed WordPress themes, but I never got as far as releasing a final template.

And today I was browsing around the net for new, interesting sites. And to my great surprise, someone has picked up the idea and turned it into reality! It is almost exactly what I was working on - but much smaller and probably better than I would have done it. The main difference is that I added a few extra layers to the cake: Make-up (layout-wide styling for typography, forms, headers, links and so on), Colorscheme (just what it sounds like) and Backdrops (background images). Designers can add each layer separately. If you have a site based on the template and you want to change the styling - add a new Make-up. It is a matter of cutting and pasting blocks of code into the CSS, even a beginner with no CSS design skill can do that. If you want to use different colorschemes for different pages - just add more colorschemes and call it from the colorscheme class of each page. One line of code to change, and the effect is very obvious…

Now, with the idea already taken this far, should I go on and finalize my own version? Or should I just drop it? Or release it as it is now and let everyone do whatever they want with it? Send me your feedback! I've spent more than many, many hours planning and coding this project, and I want to do something with it - even though a lot of people will say that I "stole the idea from Yahoo!". Comments are more than welcome!