CSS Template: Back To Basics

By | 2019-01-13

I was cruising through some old backups, doing some house cleaning, and I found a trove of old templates that fooled around with, way back in 2002. I thought I’d dust some of them off, and update them a bit.

Yes, I have backups going back that far. There some stuff in there going back as far as 1990, believe it or not! Don’t sweat me about that. I’m cleaning it up, slowly but surely.

This post actually covers a package of templates, called Back to Basics. The original idea was to build a basic site template, and just change the color settings as needed.

While that sounds pretty simple when using todays tools such as CSS, back then it was a real drag. Using tables to control the layout of the page was the order of the day, and changing fonts, colors, etc. was a real drag.

By updating the templates to standard HTML and CSS for layout design, I was able to make the templates super easy to configure. The size savings was amazing as well, conserving about 71%, if my math is correct.

Before:
html size73.7 k
css sizeN/A
After:
html size22.3 k
css size3.3 k

Quite a savings, no?

As I mentioned, there are three versions of the same template, red, green, and blue:

By changing the color and font settings in the CSS file, you can change it site-wide, which is one of the great things about using CSS. Plus, your html code is muddled up with a bunch of font tags and things like that.

Currently, they are configured with the 2002 font settings (Verdana, Arial, Sans-Serif), but try changing just the font-family selector up at the top of the CSS file, and you’ll see how easy it is to work with these guys.

Downloads are below.

Author: dwirch

Derek Wirch is a seasoned IT professional with an impressive career dating back to 1986. He brings a wealth of knowledge and hands-on experience that is invaluable to those embarking on their journey in the tech industry.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.