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)

What’s Changed?

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.

reset.css

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.

22 Comments

Matt, great stuff here. I love the idea of streamlining your workflow with a few tools like this.

I have but one big question that I consider when looking at any generalized CSS file: Does it any impact your creativity of each project? Do you at all ever feel constricted by it?

No, not at all. The reason for that, is that all values are left blank. There’s not even placeholder colours for text, no fonts set, all margins and padding on containers are still zeroed by reset.css. Typography is the only area that contains values, and even then, it’s only in font-size, line-height, and margins, as those things tend to be the same or similar with each project. But all of the common selectors I would normally write out are already there, ready to be filled in.

To be honest, I’ve never used a bare bones stylesheet such as this for my projects.

What are the chances of any given project taking advantage of all the defined selectors and stuff in the file? I definitely like the whole reset css file thing as that always helps.

Matt, when you work on projects that don’t require a good portion of the stuff in the CSS, do you still start with the bare bones and remove them, or just manually create them from scratch?

This isn’t the end all, be all. There are definitely changes that have to be made, and yes, I end up removing things I don’t need – which is easier and quicker than writing them if I do. I would say that I use about 80% of it for each project. All of the .content styles are relevant for each project, and in most cases, .sidebar as well.

My main containers are always the same – #wrapper, #header, #mid, #content, #sidebar, and #footer. The odd time, I’ll throw in #rightbar for three column layouts. The -inner containers aren’t used all that much. But again, they’re there if I need them.

Hey Matt,

Suffice to say you’ve just made a lot of peoples lives easier. While there is nothing like writing your own CSS I would be shocked to see someone not using Meyer’s reset.css and your barebones is certainly an addition for anyone using wordpress.

Very well done to you Sir for the DPS site also. Good job.

Gavin

Thanks Gavin!

There’s actually been a couple occasions where reset.css has been a burden. Whenever there’s third party software outside of the main site that shares the design, I end up having to write a new stylesheet specifically for it as reset.css interferes with the software’s style. For example, forums. Throw reset.css into the mix of a vBulletin forum and you’ve got one hell of a mess to clean up.

No problem. 🙂

I’ve had to add to reset, as I expect most have to also. I’ve tried my hardest to stay away from forum styling as it’s never the nicest job in the world.

It’s strange as I looked at 960.gs for the first time yesterday and caught your reset post this morning and its given me a kick up the butt to have a barebones folder established on the corner of my desktop to use at the start of every project instead of amending an old project file.

Gavin

yea i use something similar. its the best way to motivate yourself for coding the actual theme out of a design cause you dont need to write every fuckin class etc again.

i recommend this to everyone out there who loves the design process but hates the coding part of the job 😉

max

That’s great Matt, thank you. I’ve been thinking of making my own templates for a while now but this will certainly keep me going in the mean time.

Weird. I normally have to make adjustments to the markup for IE browsers, but I’ve always been able to find a way to have identical markup for every browser while making exceptions in the CSS. Seems like you’d have a lot of extra code to write.

You really still support IE5? I’m almost certain Microsoft doesn’t even support that browser.

I was just showing the markup for all the browsers that support conditionals.

My fulltime job is with a company that develops MS software. Believe it or not there are still companies out there that use IE 5 (mostly for internal use).

I’d say 99.9% for the CSS I write works in all browsers. I’m just preparing for future IE updates that will eventually destroy everything… again. There’s no complicated extra code writing… just add a new rule preceded by #ie… simple.

This technique allows for a single stylesheet which is easier for me to maintain.

Most of the projects that I work on end up getting handed off to another developer. The least amount of files I hand over the easier it is to train on maintenance.

I use TXP CMS so all of the theme code is located in the CMS admin. So, when I hand over a project it’s a couple of folders, and 2 stylesheets. Couldn’t be simpler.

Why does the h3, h4, etc, have upper margin on them? Surely the element above with its lower margin spaces it out enough?

I think of headings as being divisions in the content, and as such, like to give a little more space than usual to show that.

Something I don’t get then, if I was to say have the p have a bottom margin of 15px, and then set the h3 directly below to have a upper margin of 15px IT WOULD NOT have a 30px space between them, but rather have the 15px still! As though they have merged together, why is that??? x

This is because of margin collapse. Anytime stacked boxes are touching margins, they collapse to the largest of the two. So if you had a p with margin bottom 20 and a h3 with margin top 15, you would end up with a collapsed margin of 20px between them.

This does not happen vertically however, vertically (left to right) margins do not collapse.

Here is some further reading, reasons and workarounds
http://www.andybudd.com/archives/2003/11/no_margi

Hope that helps.

Thanks loads for this. I discovered your site as a user of DPS – and loved your re-vamp of it!

I’m now planning on combining my design, photography portfolios along with my blog using wordpress. I am a designer by trade and, along with constantly improving my understanding of CSS which I have been doing, I could use learning wordpress. I also find updating my portfolio sites hard work (my design one hasn’t been changed for over 6 months now!) i.e I’m lazy! So wordpress can hopefully make it much easier too.

I have an idea in mind, so hopefully with time I can pull it off!

Hey Matt, looks like you’ve picked up some good habits since last time you released your bare bones style sheet. I just recently switched to using Eric Myer’s reset style sheet and using ems for more reliable font scaling.

You mention that you use subversion to export you base style sheet; could you explain a little more about that or maybe direct me with a link? I use subversion for updating WP, but would like to see how I could use it to speed up development time.

Thanks!

@Craig Erskrine,

Thanks for the tip in regards to the reset and body conditionals. I have

been using the reset and seperate style SHITS for IE.

Johann

Under your heading ‘Better Font Scaling With EM’ this has just completely clarified my understanding of using ems and in a really efficient way.

I had used px for years, and never saw the benefit of switching. After constantly ready about using ems, and the usability factor, I knew I had to switch.

I’ve been struggling to get on with ems because I found at first that if I set an em size in the body, it clashed with other size references in other tags.

Your method refrenced above is excellent, I’ve just implemented it into a new site that I’m working on and it has all finally clicked for me!

Comments are automatically closed on articles over 5 years old.