Advanced Search

ToolBox+ an expansion on Chris Coyier\'s Toolbox CSS

/ Published in: CSS
Save to your folder(s)
A compiled version of essential styles as a nice blue print for a new project.

Toolbox: http://www.css-tricks.com
CSS Reset: http://meyerweb.com/eric/tools/css/reset/

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* http://meyerweb.com/eric/tools/css/reset/ 
  2.    v2.0 | 20110126
  3.    License: none (public domain)
  4. */
  5. html, body, div, span, applet, object, iframe,
  6. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  7. a, abbr, acronym, address, big, cite, code,
  8. del, dfn, em, img, ins, kbd, q, s, samp,
  9. small, strike, strong, sub, sup, tt, var,
  10. b, u, i, center,
  11. dl, dt, dd, ol, ul, li,
  12. fieldset, form, label, legend,
  13. table, caption, tbody, tfoot, thead, tr, th, td,
  14. article, aside, canvas, details, embed, 
  15. figure, figcaption, footer, header, hgroup, 
  16. menu, nav, output, ruby, section, summary,
  17. time, mark, audio, video {
  18. 	margin: 0;
  19. 	padding: 0;
  20. 	border: 0;
  21. 	font-size: 100%;
  22. 	font: inherit;
  23. 	vertical-align: baseline;
  24. }
  25. /* HTML5 display-role reset for older browsers */
  26. article, aside, details, figcaption, figure, 
  27. footer, header, hgroup, menu, nav, section {
  28. 	display: block;
  29. }
  30. body {
  31. 	line-height: 1;
  32. }
  33. ol, ul {
  34. 	list-style: none;
  35. }
  36. blockquote, q {
  37. 	quotes: none;
  38. }
  39. blockquote:before, blockquote:after,
  40. q:before, q:after {
  41. 	content: '';
  42. 	content: none;
  43. }
  44. table {
  45. 	border-collapse: collapse;
  46. 	border-spacing: 0;
  47. }
  48. /*
  49. Toolbox CSS
  50. Chris Coyier
  51. http://css-tricks.com
  52. */
  53. /*
  54. LAYOUT TOOLS
  55. */
  56. .floatLeft{float:left;}
  57. .floatRight{float:right;}
  58. /* .clear{clear:both;}  <-- Originally from toolbox css
  59. MODIFIED .CLEAR CLASS */
  60.   .clear:before, .clear:after {content:"";display:table;}
  61.   .clear:after {cler:both;}
  62.   /* IE 6/7 */
  63.   .clear {zoom:1;}
  64. .layoutCenter{margin:0 auto;}
  65. .textCenter{text-align:center;}
  66. .textRight{text-align:right;}
  67. .textLeft{text-align:left;}
  68. /*
  69. PRINT TOOLS
  70. */
  71. .page-break{page-break-before:always;}
  72. /*
  73. TYPOGRAPHIC TOOLS
  74. */
  75. .error{border:1px solid #fb4343;padding:3px;color:#fb4343;}
  76. .warning{border:1px solid #d4ac0a;padding:3px;color:#d4ac0a;}
  77. .success{border:1px solid #149b0d;padding:3px;color:#149b0d;}
  78. .callOut{font-size:125%;font-weight:bold;}
  79. .strikeOut{text-decoration:line-through;}
  80. .underline{text-decoration:underline;}
  81. .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;}
  82. /*
  83. STYLING EXTRAS
  84. */
  85. a[href^="mailto"]{background:url(images/emailIcon.png) left center no-repeat;padding-left:10px;}
  86. a[href~=".pdf"]{background:url(images/pdfIcon.png) left center no-repeat;padding-left:10px;}
  87. a.button{color:black;border:1px solid black;padding:3px;}
  88. a.button:hover{background:black;color:white;}
  89. .transpBlack{background:url(images/transpBlack.png);}
  90. /*
  91. DISPLAY VALUES
  92. */
  93. .hide{display:none;}
  94. .show{display:block;}
  95. .invisible{visibility:hidden;}
  96.  
  97. /*** My extras ***/
  98. #preload /* Add under </body> on index page. */
  99. {
  100.   width: 0px; height: 0px; display: inline;
  101.   background-image: url(image1.png);
  102. /*Put images above this line */
  103.   background-image: url();
  104. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.