Utility Stylesheets

I find myself doing a lot of copy+paste of stylesheets I’ve created over and over whenever putting together a new layout. The reason being that a lot of the CSS is reusable and very handy. Rather than rewrite what I already have, I just keep copying it over and over.

So I’m starting to create a collection of utility stylesheets. These are stylesheets that you can reuse over and over.

visual_consistencies.css is a stylesheet that sets font sizes on headings and margin/padding values for heading, paragraph, lists, and similar elements. There are a few other rules in there as well. The overall goal is to provide a consistent visual experience for your users. This is because default heading font sizes, and padding/margin values on headings, paragraphs, etc.. change from browser to browser. This brings all of those values together and keeps things consistent.

hnav.css is something I’ve been using for over a year now (with tweaks every now and then). It allows you to create a horizontal navigation element out of an unordered list. It does not use floats (all the items are inline, not block) but is still able to provide some vertical padding to each item.

The Next Layout

The next layout I plan to release will be an updated version of a layout I put together about 8 months ago for a small project. It’s a layout I’ve gone back to a few times and still find the layout enjoyable. That’s pretty rare for me. I often come back to a layout months after I made it and despise the look. But this one I keep liking. It’s got a couple nice, new features, such as forcing the #pageWrapper element to go the height of the browser window even if the content isn’t long enough to do that. It’s also somewhat asymmetrical, which I think is visually interesting.

The layout, as used in the project, has no vertical menu and just has one column. But there is room reserved for a second column, which I plan to add. The menu will be located on the right-side of the screen. I like right-side vertical menus. It keeps the mouse cursor close to the scroll bar, allowing the user to rest their mouse hand.

I plan to also add one or two more visual tweaks.

Underscore Hack

My point here is that while originally developing the stylesheet, I started with skidoo lean and added a couple hacks. One of the hacks was something I’d never used before: the underscore hack. It’s a nice way to provide separate rules for IE and other browsers without resorting to an entirely new selector using the * html hack.

So give that page a look.

Also be sure to check out the associated min-height hack page. I think some of you will find a lot of uses for that particular hack.



3 thoughts on “Utility Stylesheets

  1. I looked for a sample of you skidoo with the center column first sourced. I couldn’t find it. Saw where you talked about it and your reasons for doing it but didn’t see and direct instructions on how to do it. I am planning to skin up my site http://www.seocompany.ca with the skidoo lean with fixed and first sourced center column with my menu in the left column and my banners and text link ads in the right column. I don’t care about ie4 or ns4 or even ie5. It would be nice if IE5.2 on the mac worked.

  2. Very neat trick, this underscore hack. I am mostly using conditional statements these days, but it’s still good to know there is another way Thanks Mr. Ruthsarian.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s