Advanced Search

Toolbox CSS - Layout, Print and Typographic Tools

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2. Toolbox CSS
  3. Chris Coyier
  4. http://css-tricks.com
  5. */
  6. /*
  7. LAYOUT TOOLS
  8. */
  9. .floatLeft{float:left;}
  10. .floatRight{float:right;}
  11. .clear{clear:both;}
  12. .layoutCenter{margin:0 auto;}
  13. .textCenter{text-align:center;}
  14. .textRight{text-align:right;}
  15. .textLeft{text-align:left;}
  16. /*
  17. PRINT TOOLS
  18. */
  19. .page-break{page-break-before:always;}
  20. /*
  21. TYPOGRAPHIC TOOLS
  22. */
  23. .error{border:1px solid #fb4343;padding:3px;color:#fb4343;}
  24. .warning{border:1px solid #d4ac0a;padding:3px;color:#d4ac0a;}
  25. .success{border:1px solid #149b0d;padding:3px;color:#149b0d;}
  26. .callOut{font-size:125%;font-weight:bold;}
  27. .strikeOut{text-decoration:line-through;}
  28. .underline{text-decoration:underline;}
  29. .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;}
  30. /*
  31. STYLING EXTRAS
  32. */
  33. a[href^="mailto"]{background:url(images/emailIcon.png) left center no-repeat;padding-left:10px;}
  34. a[href~=".pdf]{background:url(images/pdfIcon.png) left center no-repeat;padding-left:10px;}
  35. a.button{color:black;border:1px solid black;padding:3px;}
  36. a.button:hover{background:black;color:white;}
  37. .transpBlack{background:url(images/transpBlack.png);}
  38. /*
  39. DISPLAY VALUES
  40. */
  41. .hide{display:none;}
  42. .show{display:block;}
  43. .invisible{visibility:hidden;}

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.