Return to Snippet

Revision: 6207
at May 9, 2008 07:43 by visuallyspun


Updated Code
/*
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;}

Revision: 6206
at May 7, 2008 13:01 by visuallyspun


Initial Code
/*
         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; }

Initial URL
http://css-tricks.com/toolbox-css/

Initial Description
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.

Initial Title
Toolbox CSS - Layout, Print and Typographic Tools

Initial Tags
css, textmate

Initial Language
CSS