Toolbox CSS
May 7, 2008 by chriscoyier · 13 Comments 
What is Toolbox CSS?
Toolbox CSS is styling information that has nothing uniquely to do with any particular website. These are a collection of common styles that can be useful on any web project. How many times have you written a class for clearing a float? Too many, is my guess. The idea with Toolbox CSS is to include a separate stylesheet for these “utility” styles.
What ISN’T Toolbox CSS?
Toolbox CSS isn’t a CSS reset. Toolbox CSS isn’t a CSS framework. Toolbox CSS contains none of the styling “soul” that makes any web project unique.
Why use Toolbox CSS?
Using Toolbox CSS will save you time. It saves you from writing the same styles over and over and over. Need to float something to left? You can always count on your toolbox. It also helps you keep consistency amongst your sites. If you always use the same toolbox, your markup will share the same common class names and makes it easier for you to jump back into and understand.
The Code
The code for the Toolbox CSS is below. Or, use the direct link.
/*
Toolbox CSS
Chris Coyier
http://css-tricks.com
*/
/*
LAYOUT TOOLS
*/
.floatLeft { float: left; }
.floatRight { float: right; }
.clear { clear: both; }
.layoutCenter { margin: 0 auto; }
.textCenter { text-align: center; }
.textRight { text-align: right; }
.textLeft { text-align: left; }
/*
PRINT TOOLS
*/
.page-break { page-break-before: always; }
/*
TYPOGRAPHIC TOOLS
*/
.error { border: 1px solid #fb4343; padding: 3px; color: #fb4343; }
.warning { border: 1px solid #d4ac0a; padding: 3px; color: #d4ac0a; }
.success { border: 1px solid #149b0d; padding: 3px; color: #149b0d; }
.callOut { font-size: 125%; font-weight: bold; }
.strikeOut { text-decoration: line-through; }
.underline { text-decoration: underline; }
.resetTypeStyle { font-weight: normal; font-style: normal; font-size: 100%;
text-decoration: none; background-color: none; word-spacing: normal;
letter-spacing: 0px; text-transform: none; text-indent: 0px; }
/*
STYLING EXTRAS
*/
a[href^="mailto"] { background: url(images/emailIcon.png) left center no-repeat; padding-left: 10px; }
a[href~=".pdf"] { background: url(images/pdfIcon.png) left center no-repeat; padding-left: 10px; }
a.button { color: black; border: 1px solid black; padding: 3px; }
a.button:hover { background: black; color: white; }
.transpBlack { background: url(images/transpBlack.png); }
/*
DISPLAY VALUES
*/
.hide { display: none; }
.show { display: block; }
.invisible { visibility: hidden; }A Little Explanation
The Page Break: By inserting the “page-break” class, a new page will be started when printing the website to a printer. Useful before large images or major sections.
Styling Extras: These make reference to a couple of image files that I haven’t included here. There are lots of places for you to find nice icons, try Icon Finder.
Display Values: There is a difference between display: none and visibility: hidden. Setting the display value to none will remove the layout box from the page, causing re-flow. Sometimes desirable, sometimes not. If you simply wish to hide an element but leave the space that it occupied intact, use the visibility attribute.
I was taught that for a “.clear” class, you should have
height: 1px;
line-height: 1px;
font-size: 1px;
margin-top: -1px;
clear: both;
Is this overkill? My understanding was this was for fixing some IE problems.
Thoughts?
A demo page for these would be nice, it’s obvious what some sill do, the typography classes are not quite as obvious.
Thanks, better than a framework, and simple!
Looks great! I really like the Styling Extras section. Most useful, forehead-smacking win for me is the resetTypeStyle class… brilliant. Legal questions – if we modify this heavily do we add our name as a mod in the pseudo-copyright area? If we remove it altogether will you hunt us down and… ?
@Pat I’ve seen that kind of thing before, but I think it’s unnecessary. I’m not quite sure what problem this actually solves and it looks like it might actually cause more potential problems than it solves. I’m open to hearing more about it though!
@Kevin: You can do whatever you want with it, go ahead and remove the name, I don’t mind!
Pretty good idea…
Nice article and tool’s CSS!
I did find a small error though : the line: a[href~=".pdf] … is missing a ” after the word pdf and thus the CSS will stop right there with excecution. It should read correctly: a[href~=".pdf"] … .
Keep up your good work, love your articles.
@Pat – over kill…
KISS is always the best method.
@Chris – This is much better than a silly reset or some framework that only adds bloated junk to websites.
@Marlyse Thanks, that indeed was a syntax error in the code displayed in the article, I have that fixed.
What browsers support this stylesheet?
This is a big step backwards if you believe design and structure should be separated. It’s really only a shortcutted version of using inline styles… not exactly ideal.
@Tobias I agree, class’s should describe the content they mark up, so a style-sheet can apply the style for a particular situation, design, or page.
@Jermayn reset style-sheets are nice if your worried about keeping things like font sizes, line heights, margins etc.. consistent across multiple browsers. There are some that may be bloated, but generally they serve a more universal function imo.
The most powerful aspect of this I believe is the ability to jump back and forth between different sites, and feel comfortable.
Anyone could create a toolbox for themselves based upon what they’re comfortable with, but to be honest: who would? Especially when someone else has done it for you.
Good work.
The names of the classes are not semantic and contain visual references – which is a big “nono”. If the client, for instance, decides to change the text alignment of some container you’d have two bad choices: 1. search and replace all the ‘class=”textRight”‘ with something else, which defeats the whole idea of CSS and could cause unwanted results (like changing something you shouldn’t), or 2. change the style only, inside the class declaration, which is correct usage of CSS, but would leave you with a class named “textRight” that aligns the text on the left. Which will make a total mess out of the presentation layer.
Also, attribute selectors are not fully supported and should not be used.
Otherwise, it’s a nice idea, but a bit hard to implement, as is.