Bare Bones Stylesheet

What is it?

Since 2007, I’ve used my Bare Bones Stylesheet as the foundation for every website I’ve developed. 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 variations for 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 is freely available to download. No attribution required.

How do you use it?

When I’m ready to move from Photoshop to my text editor, I start by exporting the latest revision of my Bare Bones Stylesheet and use it to setup my local development site. Along with the stylesheet, it includes a basic directory structure for CSS, images, and JavaScript files. There’s also an HTML document for demonstration purposes, but feel free to use it as a starting point for your markup as well, if you wish.

What is CSS Browser Selector?

Do you typically include a bunch of stylesheets for different versions of IE? Have you ever ended up with a bug in Chrome which only occurs in the Windows version of the browser? This is where CSS Browser Selector comes into play. It adds classes to the HTML tag which include the current operating system and browser. No more independent stylesheets for specific browsers, no more CSS hacks, no more !important declarations. For example, if your #logo margins are off in IE7, you could do something like this…

#logo {
	float: left;
	font-size: 3em;
	font-weight: bold;
	margin: 20px 0 15px;
}

.ie7 #logo {
	margin: 15px 0 10px;
}

What is Modernizr?

Oh right, I nearly forgot to mention – version 3 of my Bare Bones Stylesheet is built on HTML5, and as such, Modernizr is required to ensure it renders properly across the board. Like CSS Browser Selector, it adds classes to the HTML document so you can target specific browsers, but this time based on their capabilities. With Modernizr 2, you can build a script that only tests what you need in order to keep the file size down. It would be a good idea to roll your own Modernizr script to ensure you’re testing everything you need.

Implementation is basically the opposite of CSS Browser Selector. For example, if you’re going to add a box-shadow and want to make sure you have a fall-back style for browsers that don’t support it, you would write your fall-back first, then the browser capable style following, like so…

.content img {
	padding: 5px;
	background: #d6d6d6;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

.boxshadow .content img {
	background: #fff;
	-moz-box-shadow: 0px 1px 5px #999;
	-webkit-box-shadow: 0px 1px 5px #999;
	box-shadow: 0px 1px 5px #999;
}

Why doesn’t it validate?

Validation links in the footer are so 2007. The stylesheet includes some CSS3 hotness and vendor specific properties which aren’t valid CSS. For a little while there, I would move such properties into a separate stylesheet so the main one would return a valid result, but that’s just silly and inefficient. Validation isn’t that important.

In the head of the HTML document, there’s a meta tag which forces Internet Explorer to render the page in standards mode. As you might expect, it’s not a valid meta tag, but it’s absolutely necessary. This can be bypassed if you have access to the htaccess file, as you can envoke standards mode by manipulating the page header using the following…

Header set X-UA-Compatible IE=edge

The reason I don’t typically go the htaccess route, is that it can be easily deleted or the htaccess file missed when the site is migrated.

What’s new in version 3?

Lots! Here’s a quick list of the significant changes from previous versions…

• Updated Eric Meyer’s CSS Reset to version 2, which supports HTML5 elements.
• Bundled CSS Browser Selector and Modernizr for targeting specific browsers.
• Rewrote HTML document in HTML5.
• Added WordPress threaded comments example to HTML document and completely rewrote comment styles.
• Added examples of some CSS3 flare I commonly use – background gradients, box-shadow, text-shadow, opacity, transitions.
• Added styles for tables.
• Added iOS styles that merely disable font scaling. This area can be used to target iPad and iPhone independently.