advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

visuallyspun on 05/07/08


Tagged

css textmate tools Toolbox


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

basicmagic
Wiederkehr
jonhenshaw
shellydennison


Toolbox CSS - Layout, Print and Typographic Tools

Published in: CSS 

URL: http://css-tricks.com/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.


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

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: webarnes on May 14, 2008

typo?

a[href~=".pdf]{background:url(images/pdfIcon.png) left center no-repeat;padding-left:10px;}

should this be:

a[href~=".pdf"]{background:url(images/pdfIcon.png) left center no-repeat;padding-left:10px;}

note: .pdf"

william

Posted By: shellydennison on May 9, 2008

This is a great idea!

Posted By: jonhenshaw on May 8, 2008

This is awesome! Thanks for sharing!

You need to login to post a comment.