Posted By

nerdfiles on 07/17/10


Tagged

css system grid


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

LeeRJohnson
wirenaught


Getting Dressed Grid System


 / Published in: CSS
 

URL: http://nerdfiles.net/gdgs/

Eric Meyer Reset, other stuff I have picked up. Roughly based on 960.gs/Blueprint in naming and methods. Note: If you still give a shit about IE6: http://code.google.com/p/ie7-js/\r\n\r\n\r\n(8/25/2010) Note: Doing some serious re-work on this, fleshing it out to be more of a Framework for rapid web application development.

  1. /*
  2. @author: Aaron Alexander
  3. @author_uri: http://nerdfiles.net/
  4. @lastmod: 07-16-2010 @ 14:25
  5. */
  6.  
  7. /* ======= Modified Eric Meyer's Reset Reloaded (See: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) ======= */
  8.  
  9. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; }
  10. :focus { outline: 0; }
  11. ol, ul { list-style: none; }
  12. table { table-layout: fixed; border-collapse: separate; border-spacing: 0; empty-cells: show; }
  13. caption, th, td { text-align: left; font-weight: normal; }
  14. blockquote:before, blockquote:after, q:before, q:after { content: ""; }
  15. blockquote, q { quotes: "" ""; }
  16. hr { border: 0; border-top: 1px solid #999; background-color: #999; color: #999; height: 1px; margin: 1em 2em; clear: both; }
  17. html { height: 100%; overflow-y: scroll; }
  18.  
  19.  
  20. /* ======= Color Palette (See: http://colorschemedesigner.com/) ======= */
  21.  
  22. /*
  23. Primary:
  24. Secondary:
  25. Tertiary:
  26. Color 1:
  27. Color 2:
  28. Color 3:
  29. Color 4:
  30. Color 5:
  31. Anchor Fresh:
  32. Anchor Visited:
  33. Anchor Hover:
  34. Anchor Active:
  35. */
  36.  
  37.  
  38. /* ======= Font Embeds Template (See: http://www.font-face.com) ======= */
  39.  
  40. @font-face {
  41. font-family: 'Bergamo';
  42. src: url('bergamo/BergamoStd-Regular-webfont.eot'); /* IE6+ */
  43. src: local('?'),
  44. url('bergamo/BergamoStd-Regular-webfont.woff') format('woff'), /* FF3.6 */
  45. url('bergamo/BergamoStd-Regular-webfont.ttf') format('truetype'),
  46. url('bergamo/BergamoStd-Regular-webfont.svg#webfontwfBzOZwD') format('svg'); /* Saf3+,Chrome,FF3.5,Opera10+ */
  47. font-weight: normal;
  48. font-style: normal;
  49. }
  50.  
  51.  
  52. /* ======= Typography (See: http://lamb.cc/typograph/, http://www.typechart.com/, http://www.awayback.com/revised-font-stack/) ======= */
  53.  
  54. body {
  55. font: 0.8em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  56. text-rendering: optimizeLegibility; }
  57.  
  58. h1, h2, h3, h4, h5 {
  59. font-family: Bergamo;
  60. font-weight: normal;
  61. margin: 0.5em 0; }
  62. h1 { font-size: 1.8em; }
  63. h2 { font-size: 1.7em; }
  64. h3 { font-size: 1.6em; }
  65. h4 { font-size: 1.5em; }
  66. h5 { font-size: 1.4em; }
  67. h6 { font-size: 1.3em; font-weight: normal; line-height:2; }
  68.  
  69. p { margin: 1em 0; }
  70.  
  71.  
  72. /* ======= Links ======= */
  73.  
  74. a:link { }
  75. a:visited { }
  76. a:hover { }
  77. a:focus { }
  78. a:active { }
  79.  
  80. a:link img { }
  81. a:visited img { }
  82. a:hover img { }
  83. a:focus img { }
  84. a:active img { }
  85.  
  86.  
  87. /* ======= Images (See: http://dummyimage.com/) ======= */
  88.  
  89. img.align-right {
  90. float: right;
  91. margin: 0 0 0 1em; }
  92. img.align-left {
  93. float: left;
  94. margin: 0 1em 0 0; }
  95. img.align-center {
  96. display: block;
  97. margin: 0 auto; }
  98.  
  99.  
  100. /* ======= Floats ======= */
  101.  
  102. .float-left { float: left; }
  103. .float-right { float: right; }
  104.  
  105.  
  106. /* ======= Text Alignment ======= */
  107.  
  108. .text-left { text-align: left; }
  109. .text-right { text-align: right; }
  110. .text-justify { text-align: justify; }
  111.  
  112.  
  113. /* ======= Utilities ======= */
  114.  
  115. .show-grid { background: url(grid.gif) center repeat-y fixed; }
  116. .bleach { display: none; }
  117. .cloak { visibility: hidden; }
  118. .uncloak { visibility: visible; }
  119. .expose { outline: 2px #c30 solid; }
  120.  
  121.  
  122. /* ======= Clearing ======= */
  123.  
  124. .clear { clear: both; }
  125. .clear-left { clear: left; }
  126. .clear-right { clear: right; }
  127.  
  128.  
  129. /* ======= Columns and Containers ======= */
  130.  
  131. .container-16 {
  132. width: 960px;
  133. margin: 0 auto; }
  134. .columns-16,
  135. .columns-15,
  136. .columns-14,
  137. .columns-13,
  138. .columns-12,
  139. .columns-11,
  140. .columns-10,
  141. .columns-9,
  142. .columns-8,
  143. .columns-7,
  144. .columns-6,
  145. .columns-5,
  146. .columns-4,
  147. .columns-3,
  148. .columns-2,
  149. .columns-1 {
  150. /*
  151.   *zoom: 1;
  152.   *display: inline;
  153.   */
  154. float: left;
  155. margin: 0 10px; }
  156.  
  157.  
  158. /* ======= Default Widths ======= */
  159.  
  160. .columns-16 { width: 940px; }
  161. .columns-15 { width: 880px; }
  162. .columns-14 { width: 820px; }
  163. .columns-13 { width: 760px; }
  164. .columns-12 { width: 700px; }
  165. .columns-11 { width: 640px; }
  166. .columns-10 { width: 580px; }
  167. .columns-9 { width: 520px; }
  168. .columns-8 { width: 460px; }
  169. .columns-7 { width: 400px; }
  170. .columns-6 { width: 340px; }
  171. .columns-5 { width: 280px; }
  172. .columns-4 { width: 220px; }
  173. .columns-3 { width: 160px; }
  174. .columns-2 { width: 100px; }
  175. .columns-1 { width: 40px; }
  176.  
  177.  
  178. /* ======= Widths With Shoulder / Lining (gonna get messy) ======= */
  179.  
  180. .lining-1 .columns-16[class~="start"],
  181. .shoulder-1 .columns-16[class~="start"] { width: 930px; }
  182. .lining-1 .columns-15[class~="start"],
  183. .shoulder-1 .columns-15[class~="start"] { width: 870px; }
  184. .lining-1 .columns-14[class~="start"],
  185. .shoulder-1 .columns-14[class~="start"] { width: 810px; }
  186. .lining-1 .columns-13[class~="start"],
  187. .shoulder-1 .columns-13[class~="start"] { width: 750px; }
  188. .lining-1 .columns-12[class~="start"],
  189. .shoulder-1 .columns-12[class~="start"] { width: 690px; }
  190. .lining-1 .columns-11[class~="start"],
  191. .shoulder-1 .columns-11[class~="start"] { width: 630px; }
  192. .lining-1 .columns-10[class~="start"],
  193. .shoulder-1 .columns-10[class~="start"] { width: 570px; }
  194. .lining-1 .columns-9[class~="start"],
  195. .shoulder-1 .columns-9[class~="start"] { width: 510px; }
  196. .lining-1 .columns-8[class~="start"],
  197. .shoulder-1 .columns-8[class~="start"] { width: 450px; }
  198. .lining-1 .columns-7[class~="start"],
  199. .shoulder-1 .columns-7[class~="start"] { width: 390px; }
  200. .lining-1 .columns-6[class~="start"],
  201. .shoulder-1 .columns-6[class~="start"] { width: 330px; }
  202. .lining-1 .columns-5[class~="start"],
  203. .shoulder-1 .columns-5[class~="start"] { width: 270px; }
  204. .lining-1 .columns-4[class~="start"],
  205. .shoulder-1 .columns-4[class~="start"] { width: 210px; }
  206. .lining-1 .columns-3[class~="start"],
  207. .shoulder-1 .columns-3[class~="start"] { width: 150px; }
  208. .lining-1 .columns-2[class~="start"],
  209. .shoulder-1 .columns-2[class~="start"] { width: 90px; }
  210. .lining-1 .columns-1[class~="start"],
  211. .shoulder-1 .columns-1[class~="start"] { width: 30px; }
  212.  
  213. .lining-1 .columns-16[class~="end"],
  214. .shoulder-1 .columns-16[class~="end"] { width: 930px; }
  215. .lining-1 .columns-15[class~="end"],
  216. .shoulder-1 .columns-15[class~="end"] { width: 870px; }
  217. .lining-1 .columns-14[class~="end"],
  218. .shoulder-1 .columns-14[class~="end"] { width: 810px; }
  219. .lining-1 .columns-13[class~="end"],
  220. .shoulder-1 .columns-13[class~="end"] { width: 750px; }
  221. .lining-1 .columns-12[class~="end"],
  222. .shoulder-1 .columns-12[class~="end"] { width: 690px; }
  223. .lining-1 .columns-11[class~="end"],
  224. .shoulder-1 .columns-11[class~="end"] { width: 630px; }
  225. .lining-1 .columns-10[class~="end"],
  226. .shoulder-1 .columns-10[class~="end"] { width: 570px; }
  227. .lining-1 .columns-9[class~="end"],
  228. .shoulder-1 .columns-9[class~="end"] { width: 510px; }
  229. .lining-1 .columns-8[class~="end"],
  230. .shoulder-1 .columns-8[class~="end"] { width: 450px; }
  231. .lining-1 .columns-7[class~="end"],
  232. .shoulder-1 .columns-7[class~="end"] { width: 390px; }
  233. .lining-1 .columns-6[class~="end"],
  234. .shoulder-1 .columns-6[class~="end"] { width: 330px; }
  235. .lining-1 .columns-5[class~="end"],
  236. .shoulder-1 .columns-5[class~="end"] { width: 270px; }
  237. .lining-1 .columns-4[class~="end"],
  238. .shoulder-1 .columns-4[class~="end"] { width: 210px; }
  239. .lining-1 .columns-3[class~="end"],
  240. .shoulder-1 .columns-3[class~="end"] { width: 150px; }
  241. .lining-1 .columns-2[class~="end"],
  242. .shoulder-1 .columns-2[class~="end"] { width: 90px; }
  243. .lining-1 .columns-1[class~="end"],
  244. .shoulder-1 .columns-1[class~="end"] { width: 30px; }
  245.  
  246. .lining-1 * .columns-16[class~="end"],
  247. .shoulder-1 * .columns-16[class~="end"] { width: 940px; }
  248. .lining-1 * .columns-15[class~="end"],
  249. .shoulder-1 * .columns-15[class~="end"] { width: 880px; }
  250. .lining-1 * .columns-14[class~="end"],
  251. .shoulder-1 * .columns-14[class~="end"] { width: 820px; }
  252. .lining-1 * .columns-13[class~="end"],
  253. .shoulder-1 * .columns-13[class~="end"] { width: 760px; }
  254. .lining-1 * .columns-12[class~="end"],
  255. .shoulder-1 * .columns-12[class~="end"] { width: 700px; }
  256. .lining-1 * .columns-11[class~="end"],
  257. .shoulder-1 * .columns-11[class~="end"] { width: 640px; }
  258. .lining-1 * .columns-10[class~="end"],
  259. .shoulder-1 * .columns-10[class~="end"] { width: 580px; }
  260. .lining-1 * .columns-9[class~="end"],
  261. .shoulder-1 * .columns-9[class~="end"] { width: 520px; }
  262. .lining-1 * .columns-8[class~="end"],
  263. .shoulder-1 * .columns-8[class~="end"] { width: 460px; }
  264. .lining-1 * .columns-7[class~="end"],
  265. .shoulder-1 * .columns-7[class~="end"] { width: 400px; }
  266. .lining-1 * .columns-6[class~="end"],
  267. .shoulder-1 * .columns-6[class~="end"] { width: 340px; }
  268. .lining-1 * .columns-5[class~="end"],
  269. .shoulder-1 * .columns-5[class~="end"] { width: 280px; }
  270. .lining-1 * .columns-4[class~="end"],
  271. .shoulder-1 * .columns-4[class~="end"] { width: 220px; }
  272. .lining-1 * .columns-3[class~="end"],
  273. .shoulder-1 * .columns-3[class~="end"] { width: 160px; }
  274. .lining-1 * .columns-2[class~="end"],
  275. .shoulder-1 * .columns-2[class~="end"] { width: 100px; }
  276. .lining-1 * .columns-1[class~="end"],
  277. .shoulder-1 * .columns-1[class~="end"] { width: 40px; }
  278.  
  279. /* ======= Lining ======= */
  280.  
  281. .lining-1 { padding: 10px; }
  282. .lining-2 { padding: 20px; }
  283. .lining-3 { padding: 30px; }
  284. .lining-4 { padding: 40px; }
  285. .lining-5 { padding: 50px; }
  286. .lining-6 { padding: 60px; }
  287.  
  288.  
  289. /* ======= Shoulder ======= */
  290.  
  291. .shoulder-1 { padding: 0 10px; }
  292. .shoulder-2 { padding: 0 20px; }
  293. .shoulder-3 { padding: 0 30px; }
  294. .shoulder-4 { padding: 0 40px; }
  295. .shoulder-5 { padding: 0 50px; }
  296. .shoulder-6 { padding: 0 60px; }
  297.  
  298. /**
  299.  * @todo
  300.  * Consider halving the increments on
  301.  * Linings and Shoulders; complete the
  302.  * increment to, say, .lining-10
  303.  **/
  304.  
  305.  
  306. /* ======= Head ======= */
  307.  
  308. .head-1 { margin-top: 0.5em; }
  309. .head-2 { margin-top: 1.0em; }
  310. .head-3 { margin-top: 1.5em; }
  311. .head-4 { margin-top: 2.0em; }
  312. .head-5 { margin-top: 2.5em; }
  313. .head-6 { margin-top: 3.0em; }
  314.  
  315.  
  316. /* ======= Foot ======= */
  317.  
  318. .foot-1 { margin-bottom: 0.5em; }
  319. .foot-2 { margin-bottom: 1.0em; }
  320. .foot-3 { margin-bottom: 1.5em; }
  321. .foot-4 { margin-bottom: 2.0em; }
  322. .foot-5 { margin-bottom: 2.5em; }
  323. .foot-6 { margin-bottom: 3.0em; }
  324.  
  325.  
  326. /* ======= Scarf ======= */
  327.  
  328. .scarf-1 { padding-top: 0.5em; }
  329. .scarf-2 { padding-top: 1.0em; }
  330. .scarf-3 { padding-top: 1.5em; }
  331. .scarf-4 { padding-top: 2.0em; }
  332. .scarf-5 { padding-top: 2.5em; }
  333. .scarf-6 { padding-top: 3.0em; }
  334.  
  335.  
  336. /* ======= Socks ======= */
  337.  
  338. .socks-1 { padding-bottom: 0.5em; }
  339. .socks-2 { padding-bottom: 1.0em; }
  340. .socks-3 { padding-bottom: 1.5em; }
  341. .socks-4 { padding-bottom: 2.0em; }
  342. .socks-5 { padding-bottom: 2.5em; }
  343. .socks-6 { padding-bottom: 3.0em; }
  344.  
  345.  
  346. /* ======= Prepend ======= */
  347.  
  348. .prepend-1 { padding-left: 60px; }
  349. .prepend-2 { padding-left: 120px; }
  350. .prepend-3 { padding-left: 180px; }
  351. .prepend-4 { padding-left: 240px; }
  352. .prepend-5 { padding-left: 300px; }
  353. .prepend-6 { padding-left: 360px; }
  354. .prepend-7 { padding-left: 420px; }
  355. .prepend-8 { padding-left: 480px; }
  356. .prepend-9 { padding-left: 540px; }
  357. .prepend-10 { padding-left: 600px; }
  358.  
  359.  
  360. /* ======= Append ======= */
  361.  
  362. .append-1 { padding-right: 60px; }
  363. .append-2 { padding-right: 120px; }
  364. .append-3 { padding-right: 180px; }
  365. .append-4 { padding-right: 240px; }
  366. .append-5 { padding-right: 300px; }
  367. .append-6 { padding-right: 360px; }
  368. .append-7 { padding-right: 420px; }
  369. .append-8 { padding-right: 480px; }
  370. .append-9 { padding-right: 540px; }
  371. .append-10 { padding-right: 600px; }
  372.  
  373.  
  374. /* ======= Push ======= */
  375.  
  376. .push-1 { margin-left: 70px; }
  377. .push-2 { margin-left: 130px; }
  378. .push-3 { margin-left: 190px; }
  379. .push-4 { margin-left: 250px; }
  380. .push-5 { margin-left: 310px; }
  381. .push-6 { margin-left: 370px; }
  382. .push-7 { margin-left: 430px; }
  383. .push-8 { margin-left: 490px; }
  384. .push-9 { margin-left: 550px; }
  385. .push-10 { margin-left: 610px; }
  386.  
  387.  
  388. /* ======= Pull ======= */
  389.  
  390. .pull-1 { margin-left: -50px; }
  391. .pull-2 { margin-left: -110px; }
  392. .pull-3 { margin-left: -170px; }
  393. .pull-4 { margin-left: -230px; }
  394. .pull-5 { margin-left: -290px; }
  395. .pull-6 { margin-left: -350px; }
  396. .pull-7 { margin-left: -410px; }
  397. .pull-8 { margin-left: -470px; }
  398. .pull-9 { margin-left: -530px; }
  399. .pull-10 { margin-left: -590px; }
  400.  
  401.  
  402. /* ======= Start/End ======= */
  403.  
  404. .start { margin-left: 0; }
  405. .end { margin-right: 0; }
  406.  
  407.  
  408. /* ======= Clearing - Semantic Solution 1 (See: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/) ======= */
  409.  
  410. .clearfix:after {
  411. visibility: hidden;
  412. display: block;
  413. font-size: 0;
  414. content: " ";
  415. clear: both;
  416. height: 0; }
  417. * html .clearfix { zoom: 1; }
  418. *:first-child+html .clearfix { zoom: 1; }
  419.  
  420.  
  421. /* ======= Clearing - Semantic Solution 2 ======= */
  422.  
  423. .seal {
  424. overflow: hidden;
  425. _overflow: visible;
  426. _height: 1%; }
  427.  
  428.  
  429. /* ======= Your CSS Goes Below ======= */

Report this snippet  

You need to login to post a comment.