Here, Have My Bare Bones Stylesheet
Monday, May 28th, 2007
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 my bare bones stylesheet.
Go ahead, take it! Do what you will with it.
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.
<h1 id="logo"><a href="#"><span> </span>Site Name</a></h1>
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.
21 people have had something to contribute so far.
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)
Reply
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.
Reply
@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.
Reply
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.
Reply
bitchin
Reply
I will try this out actually. Too bad that I can’t redo my site right now. But I’ll try CSSEdit it sounds sweet.
Reply
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.
Reply
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.
Reply
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.
Reply
This looks tight Matt. Clean and inspiring. You’re the third person to tease CSSEdit to me today.
Thanks!
Reply
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.
Reply
@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.
Reply
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.
Reply
[...] this article was triggered by a post of Matt Brett’s in which he discussed and offered his Bare Bones Stylesheet — a document which he uses for each project that helps him make his work go that much faster. [...]
Reply
Now if we could just have Back in Black.
Reply
@Sherwin Techico: Sorry I didn’t reply to you sooner - slipped through the cracks.
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.
Reply
Good point specially in the kind of job you have - it’s not advisable to busy people like you.
Reply
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…
Reply
[...] I used Matt Brett’s Basic Bare Bones CSS to help me get started. Now this worked awesomely well, and helped me get along to moving [...]
Reply
[...] many articles on such things as how to Write Better CSS or articles which provide someone’s Bare Bones Style Sheet. I’ll always keep watch for an eye opening way of doing things that just makes more sense [...]
Reply
[...] homepage and article/post templates. This is where I have a bit of a head start, in that I use my Barebones Stylesheet as a base and build from that. Since its release, my Barebones Stylesheet has evolved into a full [...]
Reply