Jeremy Smith's blog

Entry Is Labelled

CSS-ing Case Round 8: Copying the Examples

<DISCLAIMER>

Do not use the markup and CSS found in this post in any official way associated with Case Western Reserve University. These are not official; not endorsed by ITS (my employer, as is the University in general); and not endorsed by University Marketing & Communications. These are all experimental and are being shown for learning purposes only. Again, do not use them. They were created by someone who is most definitely not a professional web designer. As a matter of fact, small animals may have been harmed in the making of these templates; they are not FDA approved; and no oversight committee was employed to guarantee the sanity of this endeavor. If you are looking for templates to create your Case Western affiliated web site, you should be over at the Web Toolkit and not here.

</DISCLAIMER>

Round 8

In this round, I went through each and every one of the basic examples and advanced examples and replicated them.

The result was a contrived set of markup. The reason it is getting contrived is that, for example, you just wouldn't include the markup for the following:

tertiary_navigation.png

If all you were going to do in the CSS was display: none it. There are a lot of instances like that in the markup, and the result is a contrived set of markup that exists only to serve my I-want-unified-markup desires.

But way back in CSS-ing Case: Round 1, I said I was going to do it — unified markup with just switching in and out CSS stylesheets to switch between all the different templates and color schemes. So, even if it is just a proof of concept, I'm still going to do it.

After I accomplish that proof-of-concept goal, though, I plan on producing actual usable versions of markup and CSS for the templates (though, don't forget to heed the disclaimer about not actually using the "usable" versions).

I, also, needed to split out all of the color stylesheets into two versions (which can be seen here and here), one for advanced and another for the basic templates. This was because items such as the "Highlights" box look like this in advanced:

Highlights1.png

But like this in the basic templates:

Highlights2.png

There was no way to switch those colors around in a single "define-the-colors" CSS file. I had to split the colors up into two different versions — one for the advanced template and one for the basic templates. I thought about using Javascript to handle the color switch-a-roos for those "little" color things so I could end up with one stylesheet for each color. But that was just too much of an atrocious thing to do. In dealing with web standards, you are often faced with trying to reduce your own guilt in how many (and which) hacks you resort to. I can live with the Javascript solution to putting in the pipe list delimiters for IE. But resorting to Javascript to do some CSS color switching just to reduce some complexity in the CSS files (something that can be solved in other ways like packaging up the CSS files differently)... that was too much hackery for me.

Using the stylesheets in their current form is pretty easy. You need to use the main.css file. Then, you need to choose between one of the templates:

After choosing your layout, then you just pick one of the color stylesheets: cranberry.css, forest.css, lime.css, navy.css, olive.css, purple.css, teal.css, or turquoise.css. (Make sure to choose the color stylesheet underneath the basic or advanced directory according to which template you chose.)

For example, if you wanted the "advanced" layout in lime, you would include the following in the markup:

<style type="text/css" media="screen">
@import "styles/main.css";
@import "styles/advanced/styles.css"
@import "styles/advanced/color/lime.css"
</style>

If you wanted the "Basic" layout with the headline area in teal:

<style type="text/css" media="screen">
@import "styles/main.css";
@import "styles/basic/headline.css"
@import "styles/basic/color/teal.css"
</style>

So, the next steps. I need to fix IE (again). I need to work up a print stylesheet and a handheld stylesheet. At that point, I will feel like I've accomplished my original goal; so then, I'll split things up a bit and do some refactoring and produce the aforementioned usable markup+stylesheet packages (that, again, shouldn't actually be "used").

Comments