My CSS Toolbox

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; }

Advertisements

One thought on “My CSS Toolbox

  1. Rob 2008-May-31 / 8:32 pm

    I don’t use CSS much because, in my opinion, it’s a mess. It’s like assembly language for styling … that is it’s only suitable for being generated by other programs that can add the a human interface to the equivalent of browser needlepoint.

    For example the first thing that occurred to me when I started trying to use it is how do I assign a color to my one user generated symbol so that, when the customer asks me to change a color, I can change it in one place and it’s updated everywhere?

    This is such a fundamental principal of programming that I just can’t figure out who designed CSS and what their background was. It can’t have been anything to do with programming.

    So pretty much I don’t use CSS unless the project is big enough that I write a CSS generator that lets me regenerate it with configured parameters as needed.

    I feel better now 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s