I do not know how many times I have written a class for aligning a text right or left. Too many, that’s for sure.
The idea with a CSS toolbox is to include a separate stylesheet for these “utility” styles. A CSS toolbox contains styling information that is nothing unique to any particular web application. It’s a collection of common styles that can be useful on any web development project.
A CSS toolbox is not a CSS reset and it is not a CSS framework. And it contains none of the special styling that makes any web application so unique.
Using a CSS toolbox will save you some time. It saves you from writing the same styles over and over again. If you 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 it.
Here is mine:
/*
AUTHOR: YOUR NAME HERE
you@domain.com
*/
/*
RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY
*/
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { font: 62.5% Helvetica, sans-serif; }
ul { list-style: none inside; }
p { font: 1.3em/1.3em; margin-bottom: 1.3em; }
a { outline: none; }
a img { border: none; }
/*
LAYOUT TOOLS
*/
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
.transpBlack { background: url(transpBlack.png); }
.layoutCenter { margin: 0 auto; }
.textCenter { text-align: center; }
.textRight { text-align: right; }
.textLeft { text-align: left; }
/*
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; }
/*
PAGE STRUCTURE
*/
#page-wrap {
width: 775px;
margin: 0 auto;
}
/*
PRINT TOOLS
*/
.page-break { page-break-before: always; }
/*
DISPLAY VALUES
*/
.hide { display: none; }
.show { display: block; }
.invisible { visibility: hidden; }
