Update: Bare Bones Stylesheet now has a permanent home where documentation can be found and all future releases will be posted.
Nearly two years ago, I introduced my Bare Bones Stylesheet – the basis for every project I’ve worked on since that time. It’s not a full blown framework, but rather a collection of selectors I commonly use. Everything from structural elements, to typography is covered. A couple options for different logo and nav treatments are included, along with basically everything else I might need. Since I work exclusively with WordPress, there are even some selectors for common template elements, like comments. It’s by no means the end all be all solution for coding CSS based layouts, but it’s proved to be a great starting point for me, and I’d like to share the goodness once again.
Download (6 KB)
Quick and Easy First Step
The first step for me when starting to code a new design, is setting up the template files and directories. There’s always a CSS directory that contains the main stylesheet, along with a few others for print and that bastard Internet Explorer. Those are all present from the get-go. ie.css even includes a couple work-arounds I typically use.
It seems like forever ago that I adopted Eric Meyer’s reset.css, but I guess it hasn’t been that long. Once I made it part of my process, I never looked back. It just seems silly writing all of the override CSS each time when a single stylesheet can simply set everything to zero for you out of the gate.
Better Font Scaling With EM
I used to set my body font size to “small”, but always had a hard time remembering what 1.2em of “small” was. When I found discovered why I was seeing people set the body to 62.5%, I was thrilled and immediately jumped on board.
The quick and dirty reasoning is this – by setting the body to 62.5%, you can easily what the pixel equivalent would be as 62.5% cuts the body size down from 16px to 10px. From there, going up by .1em is like going up by 1px. For example, 1.2em = 12px, 1.6em = 16px, etc. It’s a hotly debated topic, which you can read more about at Clagnut.
How Do You Use It?
Whenever I’m ready to move from Photoshop to TextMate, I start by exporting the latest revision of my Bare Bones Stylesheet from subversion and use it to setup my local development directory. Since the index.html document contains the CSS includes in the head area, it makes a good starting point. I typically wipe out everything inside the body and start fresh. As I mentioned earlier, the HTML doc is there for demonstration purposes. Feel free to use it as a starting point for your markup as well, if you wish.
With the first release, I wrote out what I thought would be frequently asked questions. They still apply with version 2.0, so please have a read through the original release notes as well.