Here, Have My Bare Bones Stylesheet

Update: Bare Bones Stylesheet now has a permanent home where documentation can be found and all future releases will be posted.

A few weeks ago, I finally got around to doing something I’ve been meaning to get to for ages. I created a bare bones stylesheet that I can use as a starting point for new projects. I established a set of common selectors months ago and found myself spending (or rather, wasting) time at the beginning of the CSS phase of every project re-writing virtually the same CSS. It only made sense to create a template for myself to save time, but you know how it is. “Create Bare Bones Stylesheet” sat as an unmarked to-do in Basecamp forever.

Download (1 KB)

There’s a few things in there that might have you scratching your head. Let’s see if I can head off those questions before you ask them…

What’s the deal with that huge comment at the top?

Every site I’ve worked on for the past 2-3 years has been built on top of WordPress. That’s the standard info. that WP needs in the default stylesheet to present it properly in the presentation area of the WP admin.

There’s some other goofy-looking comments with @ signs, what are those?

I use CSSEdit for writing and editing my CSS. It has a nice little sidebar where you can put selectors inside folders, which is great for organization. But not everyone uses CSSEdit and more often these days I find myself collaborating with others. For this reason, I also use comment flags inside each folder.

What are the “-inner” identifiers for?

I’m assuming most people won’t find the need for these, but many sites I’ve rolled out have required such containers. Think of a situation where the site itself is a fixed width and centered in the browser, but there’s a repeating background image that needs to span from edge-to-edge. I would apply the background to the top level identifier (header, mid, footer for example) then apply the fixed width and positioning to the “inner” container.

What’s the XHTML that goes with #logo?

I’m planning to release my bare bones XHTML template in the days to come, but if you plan to use this stylesheet in the mean time, you’ll need the XHTML for the image replacement technique I use for logos.

</pre>
<div id="logo"><a href="#">Site Name<span>&mbsp;</span></a></div>
<pre>

What’s the difference between the 2 versions of nav?

One is a plain unordered list nav, the other uses the CSS sprite technique for image replacement with hover states. Whichever you go with, you’ll need to remove the other in order for your stylesheet to validate.