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.

Cheers!