Posted By

nerdfiles on 10/25/10


Tagged

css grid


Versions (?)

Dress'd CSS Grid System/Framework


 / Published in: CSS
 

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

  1. /* ======= Define: Column Layout ======= */
  2.  
  3. body { min-width: 960px; }
  4.  
  5. .column-layout {
  6. width: 960px;
  7. margin-left: auto;
  8. margin-right: auto; }
  9.  
  10.  
  11. /* ======= Define: Columns ======= */
  12.  
  13. .column-layout .columns-1,
  14. .column-layout .columns-2,
  15. .column-layout .columns-3,
  16. .column-layout .columns-4,
  17. .column-layout .columns-5,
  18. .column-layout .columns-6,
  19. .column-layout .columns-7,
  20. .column-layout .columns-8,
  21. .column-layout .columns-9,
  22. .column-layout .columns-10,
  23. .column-layout .columns-11,
  24. .column-layout .columns-12,
  25. .column-layout .columns-13,
  26. .column-layout .columns-14,
  27. .column-layout .columns-15,
  28. .column-layout .columns-16 {
  29. display: inline;
  30. float: left;
  31. margin-left: 10px;
  32. margin-right: 10px; }
  33.  
  34.  
  35. /* ======= Define: Column Widths ======= */
  36.  
  37. .column-layout .columns-1 { width: 40px; }
  38. .column-layout .columns-2 { width: 100px; }
  39. .column-layout .columns-3 { width: 160px; }
  40. .column-layout .columns-4 { width: 220px; }
  41. .column-layout .columns-5 { width: 280px; }
  42. .column-layout .columns-6 { width: 340px; }
  43. .column-layout .columns-7 { width: 400px; }
  44. .column-layout .columns-8 { width: 460px; }
  45. .column-layout .columns-9 { width: 520px; }
  46. .column-layout .columns-10 { width: 580px; }
  47. .column-layout .columns-11 { width: 640px; }
  48. .column-layout .columns-12 { width: 700px; }
  49. .column-layout .columns-13 { width: 760px; }
  50. .column-layout .columns-14 { width: 820px; }
  51. .column-layout .columns-15 { width: 880px; }
  52. .column-layout .columns-16 { width: 940px; }
  53.  
  54.  
  55. /* ======= Bulwarking Forms (.bulwark-1, .bulwark-2, and so on...) ======= */
  56.  
  57. .column-layout .bulwark-1 input.bulwark-1-columns-1 { width: 35px; }
  58. .column-layout .bulwark-1 input.bulwark-1-columns-2 { width: 95px; }
  59. .column-layout .bulwark-1 input.bulwark-1-columns-3 { width: 155px; }
  60. .column-layout .bulwark-1 input.bulwark-1-columns-4 { width: 215px; }
  61. .column-layout .bulwark-1 input.bulwark-1-columns-5 { width: 275px; }
  62. .column-layout .bulwark-1 input.bulwark-1-columns-6 { width: 335px; }
  63. .column-layout .bulwark-1 input.bulwark-1-columns-7 { width: 395px; }
  64. .column-layout .bulwark-1 input.bulwark-1-columns-8 { width: 455px; }
  65. .column-layout .bulwark-1 input.bulwark-1-columns-9 { width: 515px; }
  66. .column-layout .bulwark-1 input.bulwark-1-columns-10 { width: 575px; }
  67. .column-layout .bulwark-1 input.bulwark-1-columns-11 { width: 635px; }
  68. .column-layout .bulwark-1 input.bulwark-1-columns-12 { width: 695px; }
  69. .column-layout .bulwark-1 input.bulwark-1-columns-13 { width: 755px; }
  70. .column-layout .bulwark-1 input.bulwark-1-columns-14 { width: 815px; }
  71. .column-layout .bulwark-1 input.bulwark-1-columns-15 { width: 875px; }
  72. .column-layout .bulwark-1 input.bulwark-1-columns-16 { width: 935px; }
  73.  
  74. .column-layout .bulwark-1 input.bulwark-1-columns-1-style-1 { width: 23px; }
  75. .column-layout .bulwark-1 input.bulwark-1-columns-2-style-1 { width: 83px; }
  76. .column-layout .bulwark-1 input.bulwark-1-columns-3-style-1 { width: 143px; }
  77. .column-layout .bulwark-1 input.bulwark-1-columns-4-style-1 { width: 203px; }
  78. .column-layout .bulwark-1 input.bulwark-1-columns-5-style-1 { width: 263px; }
  79. .column-layout .bulwark-1 input.bulwark-1-columns-6-style-1 { width: 323px; }
  80. .column-layout .bulwark-1 input.bulwark-1-columns-7-style-1 { width: 383px; }
  81. .column-layout .bulwark-1 input.bulwark-1-columns-8-style-1 { width: 443px; }
  82. .column-layout .bulwark-1 input.bulwark-1-columns-9-style-1 { width: 503px; }
  83. .column-layout .bulwark-1 input.bulwark-1-columns-10-style-1 { width: 563px; }
  84. .column-layout .bulwark-1 input.bulwark-1-columns-11-style-1 { width: 623px; }
  85. .column-layout .bulwark-1 input.bulwark-1-columns-12-style-1 { width: 683px; }
  86. .column-layout .bulwark-1 input.bulwark-1-columns-13-style-1 { width: 743px; }
  87. .column-layout .bulwark-1 input.bulwark-1-columns-14-style-1 { width: 803px; }
  88. .column-layout .bulwark-1 input.bulwark-1-columns-15-style-1 { width: 863px; }
  89. .column-layout .bulwark-1 input.bulwark-1-columns-16-style-1 { width: 923px; }
  90.  
  91.  
  92. /* ======= Define: Form Field Widths (input.columns-1-style-1, input.columns-1-style-2, and so on...) ======= */
  93.  
  94. .column-layout input.columns-1-style-1 { width: 28px; }
  95. .column-layout input.columns-2-style-1 { width: 88px; }
  96. .column-layout input.columns-3-style-1 { width: 148px; }
  97. .column-layout input.columns-4-style-1 { width: 208px; }
  98. .column-layout input.columns-5-style-1 { width: 268px; }
  99. .column-layout input.columns-6-style-1 { width: 328px; }
  100. .column-layout input.columns-7-style-1 { width: 388px; }
  101. .column-layout input.columns-8-style-1 { width: 448px; }
  102. .column-layout input.columns-9-style-1 { width: 508px; }
  103. .column-layout input.columns-10-style-1 { width: 568px; }
  104. .column-layout input.columns-11-style-1 { width: 628px; }
  105. .column-layout input.columns-12-style-1 { width: 688px; }
  106. .column-layout input.columns-13-style-1 { width: 748px; }
  107. .column-layout input.columns-14-style-1 { width: 808px; }
  108. .column-layout input.columns-15-style-1 { width: 868px; }
  109. .column-layout input.columns-16-style-1 { width: 928px; }
  110.  
  111.  
  112. /* ======= Define: Form Field Vertical Position ======= */
  113.  
  114. .column-layout label.columns-1 { position: relative; top: -4px; }
  115. .column-layout label.columns-2 { position: relative; top: -4px; }
  116. .column-layout label.columns-3 { position: relative; top: -4px; }
  117. .column-layout label.columns-4 { position: relative; top: -4px; }
  118. .column-layout label.columns-5 { position: relative; top: -4px; }
  119. .column-layout label.columns-6 { position: relative; top: -4px; }
  120. .column-layout label.columns-7 { position: relative; top: -4px; }
  121. .column-layout label.columns-8 { position: relative; top: -4px; }
  122. .column-layout label.columns-9 { position: relative; top: -4px; }
  123. .column-layout label.columns-10 { position: relative; top: -4px; }
  124. .column-layout label.columns-11 { position: relative; top: -4px; }
  125. .column-layout label.columns-12 { position: relative; top: -4px; }
  126. .column-layout label.columns-13 { position: relative; top: -4px; }
  127. .column-layout label.columns-14 { position: relative; top: -4px; }
  128. .column-layout label.columns-15 { position: relative; top: -4px; }
  129. .column-layout label.columns-16 { position: relative; top: -4px; }
  130.  
  131. .column-layout dt label.columns-1 { position: relative; top: 4px; }
  132. .column-layout dt label.columns-2 { position: relative; top: 4px; }
  133. .column-layout dt label.columns-3 { position: relative; top: 4px; }
  134. .column-layout dt label.columns-4 { position: relative; top: 4px; }
  135. .column-layout dt label.columns-5 { position: relative; top: 4px; }
  136. .column-layout dt label.columns-6 { position: relative; top: 4px; }
  137. .column-layout dt label.columns-7 { position: relative; top: 4px; }
  138. .column-layout dt label.columns-8 { position: relative; top: 4px; }
  139. .column-layout dt label.columns-9 { position: relative; top: 4px; }
  140. .column-layout dt label.columns-10 { position: relative; top: 4px; }
  141. .column-layout dt label.columns-11 { position: relative; top: 4px; }
  142. .column-layout dt label.columns-12 { position: relative; top: 4px; }
  143. .column-layout dt label.columns-13 { position: relative; top: 4px; }
  144. .column-layout dt label.columns-14 { position: relative; top: 4px; }
  145. .column-layout dt label.columns-15 { position: relative; top: 4px; }
  146. .column-layout dt label.columns-16 { position: relative; top: 4px; }
  147.  
  148.  
  149. /* ======= Horizontal Controls (Macro-Level) ======= */
  150.  
  151. /* Haul and Propel */
  152.  
  153. .haul-1, .propel-1,
  154. .haul-2, .propel-2
  155. .haul-3, .propel-3,
  156. .haul-4, .propel-4,
  157. .haul-5, .propel-5,
  158. .haul-6, .propel-6,
  159. .haul-7, .propel-7,
  160. .haul-8, .propel-8,
  161. .haul-9, .propel-9,
  162. .haul-10, .propel-10,
  163. .haul-11, .propel-11,
  164. .haul-12, .propel-12,
  165. .haul-13, .propel-13,
  166. .haul-14, .propel-14,
  167. .haul-15, .propel-15, { position: relative; }
  168.  
  169. /* Column - Haul (Above Flow) */
  170.  
  171. .haul-1 { left: -60px; }
  172. .haul-2 { left: -120px; }
  173. .haul-3 { left: -180px; }
  174. .haul-4 { left: -240px; }
  175. .haul-5 { left: -300px; }
  176. .haul-6 { left: -360px; }
  177. .haul-7 { left: -420px; }
  178. .haul-8 { left: -480px; }
  179. .haul-9 { left: -540px; }
  180. .haul-10 { left: -600px; }
  181. .haul-11 { left: -660px; }
  182. .haul-12 { left: -720px; }
  183. .haul-13 { left: -780px; }
  184. .haul-14 { left: -840px; }
  185. .haul-15 { left: -900px; }
  186.  
  187. /* Column - Propel (Above Flow) */
  188.  
  189. .propel-1 { left: 60px; }
  190. .propel-2 { left: 120px; }
  191. .propel-3 { left: 180px; }
  192. .propel-4 { left: 240px; }
  193. .propel-5 { left: 300px; }
  194. .propel-6 { left: 360px; }
  195. .propel-7 { left: 420px; }
  196. .propel-8 { left: 480px; }
  197. .propel-9 { left: 540px; }
  198. .propel-10 { left: 600px; }
  199. .propel-11 { left: 660px; }
  200. .propel-12 { left: 720px; }
  201. .propel-13 { left: 780px; }
  202. .propel-14 { left: 840px; }
  203. .propel-15 { left: 900px; }
  204.  
  205. /* Column - Prepend (In Flow) */
  206.  
  207. .prepend-1 { padding-left: 60px; }
  208. .prepend-2 { padding-left: 120px; }
  209. .prepend-3 { padding-left: 180px; }
  210. .prepend-4 { padding-left: 240px; }
  211. .prepend-5 { padding-left: 300px; }
  212. .prepend-6 { padding-left: 360px; }
  213. .prepend-7 { padding-left: 420px; }
  214. .prepend-8 { padding-left: 480px; }
  215. .prepend-9 { padding-left: 540px; }
  216. .prepend-10 { padding-left: 600px; }
  217. .prepend-11 { padding-left: 660px; }
  218. .prepend-12 { padding-left: 720px; }
  219. .prepend-13 { padding-left: 780px; }
  220. .prepend-14 { padding-left: 840px; }
  221. .prepend-15 { padding-left: 900px; }
  222.  
  223. /* Column - Append (In Flow) */
  224.  
  225. .append-1 { padding-right: 60px; }
  226. .append-2 { padding-right: 120px; }
  227. .append-3 { padding-right: 180px; }
  228. .append-4 { padding-right: 240px; }
  229. .append-5 { padding-right: 300px; }
  230. .append-6 { padding-right: 360px; }
  231. .append-7 { padding-right: 420px; }
  232. .append-8 { padding-right: 480px; }
  233. .append-9 { padding-right: 540px; }
  234. .append-10 { padding-right: 600px; }
  235. .append-11 { padding-right: 660px; }
  236. .append-12 { padding-right: 720px; }
  237. .append-13 { padding-right: 780px; }
  238. .append-14 { padding-right: 840px; }
  239. .append-15 { padding-right: 900px; }
  240.  
  241. /* Column - Push - Pushing a Sibling (In Flow) */
  242.  
  243. .push-1 { margin-right: 90px; }
  244. .push-2 { margin-right: 170px; }
  245. .push-3 { margin-right: 250px; }
  246. .push-4 { margin-right: 330px; }
  247. .push-5 { margin-right: 410px; }
  248. .push-6 { margin-right: 490px; }
  249. .push-7 { margin-right: 570px; }
  250. .push-8 { margin-right: 650px; }
  251. .push-9 { margin-right: 730px; }
  252. .push-10 { margin-right: 810px; }
  253.  
  254. /* Column - Pull - Pulling a Sibling (In Flow) */
  255.  
  256. .pull-1 { margin-right: -90px; }
  257. .pull-2 { margin-right: -170px; }
  258. .pull-3 { margin-right: -250px; }
  259. .pull-4 { margin-right: -330px; }
  260. .pull-5 { margin-right: -410px; }
  261. .pull-6 { margin-right: -490px; }
  262. .pull-7 { margin-right: -570px; }
  263. .pull-8 { margin-right: -650px; }
  264. .pull-9 { margin-right: -730px; }
  265. .pull-10 { margin-right: -810px; }
  266.  
  267. /* Column - Jump - Jumping an Element (In Flow) */
  268.  
  269. .jump-1 { margin-left: 90px; }
  270. .jump-2 { margin-left: 170px; }
  271. .jump-3 { margin-left: 250px; }
  272. .jump-4 { margin-left: 330px; }
  273. .jump-5 { margin-left: 410px; }
  274. .jump-6 { margin-left: 490px; }
  275. .jump-7 { margin-left: 570px; }
  276. .jump-8 { margin-left: 650px; }
  277. .jump-9 { margin-left: 730px; }
  278. .jump-10 { margin-left: 810px; }
  279.  
  280. /* Column - Withdraw - Withdrawing an Element (In Flow) */
  281.  
  282. .withdraw-1 { margin-left: -90px; }
  283. .withdraw-2 { margin-left: -170px; }
  284. .withdraw-3 { margin-left: -250px; }
  285. .withdraw-4 { margin-left: -330px; }
  286. .withdraw-5 { margin-left: -410px; }
  287. .withdraw-6 { margin-left: -490px; }
  288. .withdraw-7 { margin-left: -570px; }
  289. .withdraw-8 { margin-left: -650px; }
  290. .withdraw-9 { margin-left: -730px; }
  291. .withdraw-10 { margin-left: -810px; }
  292.  
  293.  
  294. /* ======= Define: Beginning/Ending Columns ======= */
  295.  
  296. .column-layout .begin { margin-left: 0 !important; }
  297. .column-layout .end { margin-right: 0 !important; }

Report this snippet  

You need to login to post a comment.