CSS Framework 12 col 55px gutter 30px =990px


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /*
  2. Variable Grid System.
  3. Learn more ~ http://www.spry-soft.com/grids/
  4. Based on 960 Grid System - http://960.gs/
  5.  
  6. Licensed under GPL and MIT.
  7. */
  8.  
  9.  
  10. /* Containers
  11. ----------------------------------------------------------------------------------------------------*/
  12. .container_12 {
  13. margin-left: auto;
  14. margin-right: auto;
  15. width: 1020px;
  16. }
  17.  
  18. /* Grid >> Global
  19. ----------------------------------------------------------------------------------------------------*/
  20.  
  21. .grid_1,
  22. .grid_2,
  23. .grid_3,
  24. .grid_4,
  25. .grid_5,
  26. .grid_6,
  27. .grid_7,
  28. .grid_8,
  29. .grid_9,
  30. .grid_10,
  31. .grid_11,
  32. .grid_12 {
  33. display:inline;
  34. float: left;
  35. position: relative;
  36. margin-left: 15px;
  37. margin-right: 15px;
  38. }
  39.  
  40. /* Grid >> Children (Alpha ~ First, Omega ~ Last)
  41. ----------------------------------------------------------------------------------------------------*/
  42.  
  43. .alpha {
  44. margin-left: 0;
  45. }
  46.  
  47. .omega {
  48. margin-right: 0;
  49. }
  50.  
  51. /* Grid >> 12 Columns
  52. ----------------------------------------------------------------------------------------------------*/
  53.  
  54. .container_12 .grid_1 {
  55. width:55px;
  56. }
  57.  
  58. .container_12 .grid_2 {
  59. width:140px;
  60. }
  61.  
  62. .container_12 .grid_3 {
  63. width:225px;
  64. }
  65.  
  66. .container_12 .grid_4 {
  67. width:310px;
  68. }
  69.  
  70. .container_12 .grid_5 {
  71. width:395px;
  72. }
  73.  
  74. .container_12 .grid_6 {
  75. width:480px;
  76. }
  77.  
  78. .container_12 .grid_7 {
  79. width:565px;
  80. }
  81.  
  82. .container_12 .grid_8 {
  83. width:650px;
  84. }
  85.  
  86. .container_12 .grid_9 {
  87. width:735px;
  88. }
  89.  
  90. .container_12 .grid_10 {
  91. width:820px;
  92. }
  93.  
  94. .container_12 .grid_11 {
  95. width:905px;
  96. }
  97.  
  98. .container_12 .grid_12 {
  99. width:990px;
  100. }
  101.  
  102.  
  103.  
  104. /* Prefix Extra Space >> 12 Columns
  105. ----------------------------------------------------------------------------------------------------*/
  106.  
  107. .container_12 .prefix_1 {
  108. padding-left:85px;
  109. }
  110.  
  111. .container_12 .prefix_2 {
  112. padding-left:170px;
  113. }
  114.  
  115. .container_12 .prefix_3 {
  116. padding-left:255px;
  117. }
  118.  
  119. .container_12 .prefix_4 {
  120. padding-left:340px;
  121. }
  122.  
  123. .container_12 .prefix_5 {
  124. padding-left:425px;
  125. }
  126.  
  127. .container_12 .prefix_6 {
  128. padding-left:510px;
  129. }
  130.  
  131. .container_12 .prefix_7 {
  132. padding-left:595px;
  133. }
  134.  
  135. .container_12 .prefix_8 {
  136. padding-left:680px;
  137. }
  138.  
  139. .container_12 .prefix_9 {
  140. padding-left:765px;
  141. }
  142.  
  143. .container_12 .prefix_10 {
  144. padding-left:850px;
  145. }
  146.  
  147. .container_12 .prefix_11 {
  148. padding-left:935px;
  149. }
  150.  
  151.  
  152.  
  153. /* Suffix Extra Space >> 12 Columns
  154. ----------------------------------------------------------------------------------------------------*/
  155.  
  156. .container_12 .suffix_1 {
  157. padding-right:85px;
  158. }
  159.  
  160. .container_12 .suffix_2 {
  161. padding-right:170px;
  162. }
  163.  
  164. .container_12 .suffix_3 {
  165. padding-right:255px;
  166. }
  167.  
  168. .container_12 .suffix_4 {
  169. padding-right:340px;
  170. }
  171.  
  172. .container_12 .suffix_5 {
  173. padding-right:425px;
  174. }
  175.  
  176. .container_12 .suffix_6 {
  177. padding-right:510px;
  178. }
  179.  
  180. .container_12 .suffix_7 {
  181. padding-right:595px;
  182. }
  183.  
  184. .container_12 .suffix_8 {
  185. padding-right:680px;
  186. }
  187.  
  188. .container_12 .suffix_9 {
  189. padding-right:765px;
  190. }
  191.  
  192. .container_12 .suffix_10 {
  193. padding-right:850px;
  194. }
  195.  
  196. .container_12 .suffix_11 {
  197. padding-right:935px;
  198. }
  199.  
  200.  
  201.  
  202. /* Push Space >> 12 Columns
  203. ----------------------------------------------------------------------------------------------------*/
  204.  
  205. .container_12 .push_1 {
  206. left:85px;
  207. }
  208.  
  209. .container_12 .push_2 {
  210. left:170px;
  211. }
  212.  
  213. .container_12 .push_3 {
  214. left:255px;
  215. }
  216.  
  217. .container_12 .push_4 {
  218. left:340px;
  219. }
  220.  
  221. .container_12 .push_5 {
  222. left:425px;
  223. }
  224.  
  225. .container_12 .push_6 {
  226. left:510px;
  227. }
  228.  
  229. .container_12 .push_7 {
  230. left:595px;
  231. }
  232.  
  233. .container_12 .push_8 {
  234. left:680px;
  235. }
  236.  
  237. .container_12 .push_9 {
  238. left:765px;
  239. }
  240.  
  241. .container_12 .push_10 {
  242. left:850px;
  243. }
  244.  
  245. .container_12 .push_11 {
  246. left:935px;
  247. }
  248.  
  249.  
  250.  
  251. /* Pull Space >> 12 Columns
  252. ----------------------------------------------------------------------------------------------------*/
  253.  
  254. .container_12 .pull_1 {
  255. left:-85px;
  256. }
  257.  
  258. .container_12 .pull_2 {
  259. left:-170px;
  260. }
  261.  
  262. .container_12 .pull_3 {
  263. left:-255px;
  264. }
  265.  
  266. .container_12 .pull_4 {
  267. left:-340px;
  268. }
  269.  
  270. .container_12 .pull_5 {
  271. left:-425px;
  272. }
  273.  
  274. .container_12 .pull_6 {
  275. left:-510px;
  276. }
  277.  
  278. .container_12 .pull_7 {
  279. left:-595px;
  280. }
  281.  
  282. .container_12 .pull_8 {
  283. left:-680px;
  284. }
  285.  
  286. .container_12 .pull_9 {
  287. left:-765px;
  288. }
  289.  
  290. .container_12 .pull_10 {
  291. left:-850px;
  292. }
  293.  
  294. .container_12 .pull_11 {
  295. left:-935px;
  296. }
  297.  
  298.  
  299.  
  300.  
  301. /* Clear Floated Elements
  302. ----------------------------------------------------------------------------------------------------*/
  303.  
  304. /* http://sonspring.com/journal/clearing-floats */
  305.  
  306. .clear {
  307. clear: both;
  308. display: block;
  309. overflow: hidden;
  310. visibility: hidden;
  311. width: 0;
  312. height: 0;
  313. }
  314.  
  315. /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
  316.  
  317. .clearfix:after {
  318. clear: both;
  319. content: ' ';
  320. display: block;
  321. font-size: 0;
  322. line-height: 0;
  323. visibility: hidden;
  324. width: 0;
  325. height: 0;
  326. }
  327.  
  328. .clearfix {
  329. display: inline-block;
  330. }
  331.  
  332. * html .clearfix {
  333. height: 1%;
  334. }
  335.  
  336. .clearfix {
  337. display: block;
  338. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.