Ecsyle - Roy Lindauer: CSS Templates

CSS Templates

I build a lot of websites. In fact I build too many websites. Every time I do build a site, I notice that I spend far too much time troubleshooting the basic layout in IE6, IE7, and Firefox2.*. Life would be so much simpler if I simply had a few common layout templates I could use as my base. And that is exactly what I have created. They are nothing to look at right now, but they provide a very simple framework for quickly developing the html/css structure of a website. I have tested the layouts in Internet Explorer 6 and 7, Firefox 2, Opera 9, Safari 2 for OS X, and Safari 3 for Windows.

The designs I have created or have to work with usually fall within the following layouts.

2 Column w/Sidebar on Left
2 Column w/Sidebar on Right
2 Column Liquid w/Sidebar on Left
2 Column Liquid w/Sidebar on Right
3 Column Home Page w/Large Graphic Area

It is easy enough to pick and pull what I need from these basic structures.

Each layout uses a baseline.css which is used to baseline the html document into something usable and consistent from the very start of the project. Then there is the layout specific stylesheet which defines the overall structure. Once I have setup my values in the structure style sheet, I usually just create an additional stylesheet for colors, images, typography, etc. I try to leave the base stylesheets alone once they are set. It leaves less room for error. I have also attempted to develop a naming convention that makes sense, at least to me, so that most elements are classified appropriately. Classification is definitely one of my shortcomings, especially when I am under a crunch. I can’t be the only one with style definitions such as “article2” and “page_wrapper_wrapper”.

Baseline.css is based on several other baselines stylesheets I have found online. I wish that I would have remembered where I found them so that I could credit them in the source. If anyone recognizes the styles, please let me know so that I can update the SVN repo.

I have also tried to limit the number of hacks used, and think that I have been able to create very simple layouts that work across most modern browsers without running into too many quirks.

Feedback would be greatly appreciated as I intend to continue to develop these layouts.

Take a peek at the CSS Templates