Advanced Search

960 Grid | Blueprint Hybrid - CSS

/ Published in: CSS
Save to your folder(s)
When I use the 960 Grid this is the code I use along with a CSS Reset. I really like Blueprint's default HTML Element styles, but I like the grid of 960.gs. This is a mashup of the code.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* Reset Styles */
  2. html,body,div,span,applet,object,iframe,
  3. h1,h2,h3,h4,h5,h6,p,blockquote,pre,
  4. a,abbr,acronym,address,big,cite,code,
  5. del,dfn,em,font,img,ins,kbd,q,s,samp,
  6. small,strike,strong,sub,sup,tt,var,
  7. b,u,i,center,
  8. dl,dt,dd,ol,ul,li,
  9. fieldset,form,label,legend,
  10. table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}
  11. body{line-height:1;}
  12. ol,ul{list-style:none;}
  13. blockquote,q{quotes:none;}
  14. blockquote:before,blockquote:after,
  15. q:before,q:after{content:'';content:none;}
  16. /* remember to define focus styles! */
  17. :focus{outline:0;}
  18. /* remember to highlight inserts somehow! */
  19. ins{text-decoration:none;}
  20. del{text-decoration:line-through;}
  21. /* tables still need 'cellspacing="0"' in the markup */
  22. table{border-collapse:collapse;border-spacing:0;}
  23. /* Grid Styles */
  24. /*
  25. 960 Grid System ~ Core CSS.
  26. Learn more ~ http://960.gs/
  27. Licensed under GPL and MIT.
  28. */
  29. /* Containers
  30. ----------------------------------------------------------------------------------------------------*/
  31. .container_12,
  32. .container_16{margin-left:auto;margin-right:auto;width:960px;}
  33. /* Grid >> Global
  34. ----------------------------------------------------------------------------------------------------*/
  35. .grid_1,
  36. .grid_2,
  37. .grid_3,
  38. .grid_4,
  39. .grid_5,
  40. .grid_6,
  41. .grid_7,
  42. .grid_8,
  43. .grid_9,
  44. .grid_10,
  45. .grid_11,
  46. .grid_12,
  47. .grid_13,
  48. .grid_14,
  49. .grid_15,
  50. .grid_16{display:inline;float:left;margin-left:10px;margin-right:10px;}
  51. .container_12 .grid_3,
  52. .container_16 .grid_4{width:220px;}
  53. .container_12 .grid_6,
  54. .container_16 .grid_8{width:460px;}
  55. .container_12 .grid_9,
  56. .container_16 .grid_12{width:700px;}
  57. .container_12 .grid_12,
  58. .container_16 .grid_16{width:940px;}
  59. /* Grid >> Children (Alpha ~ First,Omega ~ Last)
  60. ----------------------------------------------------------------------------------------------------*/
  61. .alpha{margin-left:0;}
  62. .omega{margin-right:0;}
  63. /* Grid >> 12 Columns
  64. ----------------------------------------------------------------------------------------------------*/
  65. .container_12 .grid_1{width:60px;}
  66. .container_12 .grid_2{width:140px;}
  67. .container_12 .grid_4{width:300px;}
  68. .container_12 .grid_5{width:380px;}
  69. .container_12 .grid_7{width:540px;}
  70. .container_12 .grid_8{width:620px;}
  71. .container_12 .grid_10{width:780px;}
  72. .container_12 .grid_11{width:860px;}
  73. /* Grid >> 16 Columns
  74. ----------------------------------------------------------------------------------------------------*/
  75. .container_16 .grid_1{width:40px;}
  76. .container_16 .grid_2{width:100px;}
  77. .container_16 .grid_3{width:160px;}
  78. .container_16 .grid_5{width:280px;}
  79. .container_16 .grid_6{width:340px;}
  80. .container_16 .grid_7{width:400px;}
  81. .container_16 .grid_9{width:520px;}
  82. .container_16 .grid_10{width:580px;}
  83. .container_16 .grid_11{width:640px;}
  84. .container_16 .grid_13{width:760px;}
  85. .container_16 .grid_14{width:820px;}
  86. .container_16 .grid_15{width:880px;}
  87. /* Prefix Extra Space >> Global
  88. ----------------------------------------------------------------------------------------------------*/
  89. .container_12 .prefix_3,
  90. .container_16 .prefix_4{padding-left:240px;}
  91. .container_12 .prefix_6,
  92. .container_16 .prefix_8{padding-left:480px;}
  93. .container_12 .prefix_9,
  94. .container_16 .prefix_12{padding-left:720px;}
  95. /* Prefix Extra Space >> 12 Columns
  96. ----------------------------------------------------------------------------------------------------*/
  97. .container_12 .prefix_1{padding-left:80px;}
  98. .container_12 .prefix_2{padding-left:160px;}
  99. .container_12 .prefix_4{padding-left:320px;}
  100. .container_12 .prefix_5{padding-left:400px;}
  101. .container_12 .prefix_7{padding-left:560px;}
  102. .container_12 .prefix_8{padding-left:640px;}
  103. .container_12 .prefix_10{padding-left:800px;}
  104. .container_12 .prefix_11{padding-left:880px;}
  105. /* Prefix Extra Space >> 16 Columns
  106. ----------------------------------------------------------------------------------------------------*/
  107. .container_16 .prefix_1{padding-left:60px;}
  108. .container_16 .prefix_2{padding-left:120px;}
  109. .container_16 .prefix_3{padding-left:180px;}
  110. .container_16 .prefix_5{padding-left:300px;}
  111. .container_16 .prefix_6{padding-left:360px;}
  112. .container_16 .prefix_7{padding-left:420px;}
  113. .container_16 .prefix_9{padding-left:540px;}
  114. .container_16 .prefix_10{padding-left:600px;}
  115. .container_16 .prefix_11{padding-left:660px;}
  116. .container_16 .prefix_13{padding-left:780px;}
  117. .container_16 .prefix_14{padding-left:840px;}
  118. .container_16 .prefix_15{padding-left:900px;}
  119. /* Suffix Extra Space >> Global
  120. ----------------------------------------------------------------------------------------------------*/
  121. .container_12 .suffix_3,
  122. .container_16 .suffix_4{padding-right:240px;}
  123. .container_12 .suffix_6,
  124. .container_16 .suffix_8{padding-right:480px;}
  125. .container_12 .suffix_9,
  126. .container_16 .suffix_12{padding-right:720px;}
  127. /* Suffix Extra Space >> 12 Columns
  128. ----------------------------------------------------------------------------------------------------*/
  129. .container_12 .suffix_1{padding-right:80px;}
  130. .container_12 .suffix_2{padding-right:160px;}
  131. .container_12 .suffix_4{padding-right:320px;}
  132. .container_12 .suffix_5{padding-right:400px;}
  133. .container_12 .suffix_7{padding-right:560px;}
  134. .container_12 .suffix_8{padding-right:640px;}
  135. .container_12 .suffix_10{padding-right:800px;}
  136. .container_12 .suffix_11{padding-right:880px;}
  137. /* Suffix Extra Space >> 16 Columns
  138. ----------------------------------------------------------------------------------------------------*/
  139. .container_16 .suffix_1{padding-right:60px;}
  140. .container_16 .suffix_2{padding-right:120px;}
  141. .container_16 .suffix_3{padding-right:180px;}
  142. .container_16 .suffix_5{padding-right:300px;}
  143. .container_16 .suffix_6{padding-right:360px;}
  144. .container_16 .suffix_7{padding-right:420px;}
  145. .container_16 .suffix_9{padding-right:540px;}
  146. .container_16 .suffix_10{padding-right:600px;}
  147. .container_16 .suffix_11{padding-right:660px;}
  148. .container_16 .suffix_13{padding-right:780px;}
  149. .container_16 .suffix_14{padding-right:840px;}
  150. .container_16 .suffix_15{padding-right:900px;}
  151. /* Clear Floated Elements
  152. ----------------------------------------------------------------------------------------------------*/
  153. /* http://sonspring.com/journal/clearing-floats */
  154. .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
  155. /* http://www.positioniseverything.net/easyclearing.html */
  156. .clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0;}
  157. .clearfix{display:inline-block;}
  158. * html .clearfix{height:1%;}
  159. .clearfix{display:block;}
  160. /* Text Styles */
  161. /* -------------------------------------------------------------- 
  162. typography.css
  163. * Sets up some sensible default typography.
  164. -------------------------------------------------------------- */
  165. /* Default font settings. 
  166. The font-size percentage is of 16px. (0.75 * 16px = 12px) */
  167. body{font-size:75%;color:#222;background:#fff;font-family:Arial,FreeSans,Helvetica,sans-serif;}
  168. /* Headings
  169. -------------------------------------------------------------- */
  170. h1,h2,h3,h4,h5,h6{font-weight:normal;color:#111;}
  171. h1{font-size:3em;line-height:1;margin-bottom:0.5em;}
  172. h2{font-size:2em;margin-bottom:0.75em;}
  173. h3{font-size:1.5em;line-height:1;margin-bottom:1em;}
  174. h4{font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
  175. h5{font-size:1em;font-weight:bold;margin-bottom:1.5em;}
  176. h6{font-size:1em;font-weight:bold;}
  177. h1 img,h2 img,h3 img,
  178. h4 img,h5 img,h6 img{margin:0;}
  179. /* Text elements
  180. -------------------------------------------------------------- */
  181. p{margin:0 0 1.5em;}
  182. p img.left{float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
  183. p img.right{float:right;margin:1.5em 0 1.5em 1.5em;}
  184. a:focus,
  185. a:hover{color:#000;}
  186. a{color:#009;text-decoration:underline;}
  187. blockquote{margin:1.5em;color:#666;font-style:italic;}
  188. strong{font-weight:bold;}
  189. em,dfn{font-style:italic;}
  190. dfn{font-weight:bold;}
  191. sup,sub{line-height:0;}
  192. abbr,
  193. acronym{border-bottom:1px dotted #666;}
  194. address{margin:0 0 1.5em;font-style:italic;}
  195. del{color:#666;}
  196. pre{margin:1.5em 0;white-space:pre;}
  197. pre,code,tt{font:1em 'andale mono','lucida console',monospace;line-height:1.5;}
  198. /* Lists
  199. -------------------------------------------------------------- */
  200. li ul,
  201. li ol{margin:0 1.5em;}
  202. ul,ol{margin:0 1.5em 1.5em 1.5em;}
  203. ul{list-style-type:disc;}
  204. ol{list-style-type:decimal;}
  205. dl{margin:0 0 1.5em 0;}
  206. dl dt{font-weight:bold;}
  207. dd{margin-left:1.5em;}
  208. /* Tables
  209. -------------------------------------------------------------- */
  210. table{margin-bottom:1.4em;width:100%;}
  211. th{font-weight:bold;}
  212. thead th{background:#c3d9ff;}
  213. th,td,caption{padding:4px 10px 4px 5px;}
  214. tr.even td{background:#e5ecf9;}
  215. tfoot{font-style:italic;}
  216. caption{background:#eee;}
  217. /* Misc classes
  218. -------------------------------------------------------------- */
  219. .small{font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
  220. .large{font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
  221. .hide{display:none;}
  222. .inner{padding:10px;}
  223. .borders{border:1px solid #CACA96;}
  224. .center{text-align:center;}
  225. .quiet{color:#666;}
  226. .loud{color:#000;}
  227. .highlight{background:#ff0;}
  228. .added{background:#060;color:#fff;}
  229. .removed{background:#900;color:#fff;}
  230. /* Form Styles */
  231. /* -------------------------------------------------------------- 
  232. forms.css
  233. * Sets up some default styling for forms
  234. * Gives you classes to enhance your forms
  235. Usage:* For text fields,use class .title or .text
  236. -------------------------------------------------------------- */
  237. label{font-weight:bold;}
  238. fieldset{padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
  239. legend{font-weight:bold;font-size:1.2em;}
  240. /* Form fields
  241. -------------------------------------------------------------- */
  242. input.text,input.title,
  243. textarea,select{margin:0.5em 0;border:1px solid #bbb;}
  244. input.text:focus,input.title:focus,
  245. textarea:focus,select:focus{border:1px solid #666;}
  246. input.text,
  247. input.title{width:300px;padding:5px;}
  248. input.title{font-size:1.5em;}
  249. textarea{width:390px;height:250px;padding:5px;}
  250. /* Success,notice and error boxes
  251. -------------------------------------------------------------- */
  252. .error,
  253. .notice,
  254. .success{padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
  255. .error{background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
  256. .notice{background:#FFF6BF;color:#514721;border-color:#FFD324;}
  257. .success{background:#E6EFC2;color:#264409;border-color:#C6D880;}
  258. .error a{color:#8a1f11;}
  259. .notice a{color:#514721;}
  260. .success a{color:#264409;}

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.