Heyo! I'm Matt Brett, a freelance web designer living in beautiful BC, Canada. I specialize in WordPress development and generally making things that are awesome. When I'm not working, I'm playing video games, and I've published 136 game reviews over the past few years.

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.

22 Comments

  1. Hey Matt, pretty cool that you released your css base

    But here: #sidebar p a:link, #sidebar p a:visited, #sidebar p a:active, ….

    I normally only goes with: #sidebar p a {},

    And every type of link goes the same way.

    My question is, why you specify everything? Is it to prevent incompatibility with some browser or something like that??

    (I only test in Firefox, IE6 and IE7, and my method works perfect in them)

  2. Geez I'm too new to CSSEdit — folders seem like a sweet idea. Definitely going to be using them from here on out. Thanks for the tip! Really cool of you to offer a resource like this — I'm always interested in checking out the process of other designers/developers. I'll look forward to checking out your XHTML starter template as well.

  3. @Sávio: While I don't normally style visited or active links different, it's easy to pull them apart since I've already declared them all. I've read a few times that it's important to declare all of the pseudo-classes and it's pretty much just become a habit now.

    @Jon: Indeed, folders are great. I've experimented with different ways of formatting my CSS (inline as you do, etc.) but with CSSEdit, I don't really need to do that. Saving vertical space isn't an issue since I can access anything quickly from the sidebar anyway. I prefer everything on a new line for increased readability.

  4. Thanks a lot man. I've taken a look at this and I am pretty impressed. I've made a few tweaks of my own to it, but I pretty much like it.

    I have a barebones wordpress template that I usually work with. I guess I'll get this to work with it so then I'm pretty much set.

  5. Thanks Matt, this is going to help kickstart a bunch of projects I have just laying around. Especially since I'm just getting in to CSSEdit.

  6. This is a great idea! I need to do my own template for myself. Also, a nice XHTML template would be good.

    Time saving is somewhere on my list of tasks to take care of.

  7. Cheers dude, I'll look into this. A Base file is always a good idea for work, saves A LOT of time and gets the ball rolling nice a quick.

  8. I think I need to make one of these, it seems logical. I find it nerdy, but I like seeing how other developers do there CSS and how they format it.

  9. @Savio: Yes, what Matt just stated. "LoVe:HAte" your links as Andy Budd stated (probably as well as other standards evangelists). But I guess if all of the states will use the same look, feel and behavior (i.e. underline), then you can just do #sidebar p a {}. Meanwhile, like Matt, I also do this as its been a good habit.

    @Matt: I'm assuming your stylesheet is bare-bones in terms of WP projects correct? At first, I was thinking its in terms of browser-defaults; something like Eric Meyer's reset. Anyways, I can't wait to check this out w/ WP (if so). Thanks.

  10. You're my design hero! Honestly! I really love your work but am totally at a loss as to how to work with WordPress so you just helped me out a ton! I have a new layout I would love to use with WordPress but I can't seem to get a handle on the templates quite yet. I'm excited about your XHTML template as it will help me learn even more. :)

    As for CSS, PHP and the like, I use ConTEXT as I really love the colour coding.

  11. Pingback: Improving Your Process: Templating and Theming - Monday By Noon

  12. @Sherwin Techico: Sorry I didn't reply to you sooner – slipped through the cracks. :P Anyway, pretty much every project I do is built on WordPress, but there's nothing in my stylesheet that reflects that. I always build XHTML/CSS templates, then work the WP template tags into my templates. So it's not like I'm using selectors from one of the default themes or anything.

    @Timothy Diokno: I've thought about releasing my current design as a theme once I move on, but I don't think that'll ever happen. I've watched other theme developers go through tons of crap after trying to do something good for others. Hardly seems worth the bother. Case in point.

  13. NP Matt. I know you're busy making other sexay-goodness sites =)

    It'll be cool if you can do a newer write-up on a WP project like how you did with your blog in the past year-or-so's Reboot. That would be quite interesting indeed…

  14. Pingback: James Bayliss » Blog Archive » Jamesy V2

  15. Pingback: Improving Your Process: 9 Ways to Improve Yourself - Monday By Noon

  16. Pingback: Matt Brett » FAQ: “How do you build your WordPress themes?”

  17. Pingback: Matt Brett » The Return of My Bare Bones Stylesheet

Sorry, Comments Are Closed

Comments are automatically closed on posts older than 365 days. If you have something you'd like to contribute, feel free to hit me up on Twitter.