Jeremy Smith's blog

Entry Is Labelled

CSS-ing Case: Round 1

<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>

I often find myself in the position of needing versions of the Case templates that employ a more stripped down version of markup using CSS for all stylings and CSS for positioning. I've also always wanted a fully-CSS version of the templates where it is just a matter of swapping in different stylesheets to convert between color schemes and to convert positional and navigational elements as necessary.

I've taken two stabs at doing this in the past, but both times have stopped short of completion for various reasons. So this time, I figured I would blog about it. Then, when I get fed up with doing it, I'll have to face the public humiliation of not finishing something I started.

Hopefully, by the end of this little endeavor, I'll have a consistent piece of markup and a dozen or so CSS files that you swap in and out to change between the themes.

My first step was to take the ITS homepage and create some semantic markup for it. I stripped side bars and the real "user generated" portion of content out of it for round 1 and just put in some div place holders (I'll get to that in rounds #3 and #4 or so). So, here it is: http://blog.case.edu/jms18/examples/mockups/css-case/round1/

That's the markup I plan on using as I move forward. I may need to throw in several more id attributes to get my CSS selectors targetted correctly, and I may have to wrap up those three div's (the left and right side bar and the actual content area) in another div tag to them to align correctly, but we'll see.

In Round #2, I hope to have the CSS working with this markup. In Round #3, I'll add in the markup for the side bars and content. In Round #4, I'll style the side bars and content. Then, in rounds #5 and beyond, I'll begin generalizing what is necessary and breaking the CSS styles into separate stylesheets that can be applied piecemeal to get the color theme and presentational elements all put together.

Here's to hoping. And, oh yeah, cede the warnings above with these.

Comments

  1. gravatar

    So that's why I haven't seen any chipmunks this morning!

    I think the process you are using makes sense. That's pretty much what I did for http://blog.case.edu/webdev/ though as you know I've still not perfected that version—which is why we've not yet released that template.

    The biggest obstacles I faced were those of browser compatibility. The differences between Internet Explorer and Firefox, etc. forced me to apply a few duct-tape solutions, such as one small table in the banner. Actually that's also a result of the vertical alignment limitations in CSS.

    Good luck!

  2. gravatar
    The biggest obstacles I faced were those of browser compatibility.

    I'm sure that is the biggest obstacle I will face, too. And... I'm not looking forward to applying the IE hacks. I've never been good with that. It's my Achilles' Heel of CSS -- "I just can't do IE."