Posted By

rydonahue on 07/07/11


Tagged


Versions (?)

960_16 System


 / Published in: CSS
 

URL: http://960.gs

960 Grid, 16 Column

  1. /*
  2.   960 Grid System ~ Core CSS.
  3.   Learn more ~ http://960.gs/
  4.  
  5.   Licensed under GPL and MIT.
  6. */
  7.  
  8. /*
  9.   Forces backgrounds to span full width,
  10.   even if there is horizontal scrolling.
  11.   Increase this if your layout is wider.
  12.  
  13.   Note: IE6 works fine without this fix.
  14. */
  15.  
  16. body {
  17. min-width: 960px;
  18. }
  19.  
  20. /* Containers
  21. ----------------------------------------------------------------------------------------------------*/
  22. .container_16 {
  23. margin-left: auto;
  24. margin-right: auto;
  25. width: 960px;
  26. }
  27.  
  28. /* Grid >> Global
  29. ----------------------------------------------------------------------------------------------------*/
  30.  
  31. .grid_1,
  32. .grid_2,
  33. .grid_3,
  34. .grid_4,
  35. .grid_5,
  36. .grid_6,
  37. .grid_7,
  38. .grid_8,
  39. .grid_9,
  40. .grid_10,
  41. .grid_11,
  42. .grid_12,
  43. .grid_13,
  44. .grid_14,
  45. .grid_15,
  46. .grid_16 {
  47. display: inline;
  48. float: left;
  49. position: relative;
  50. margin-left: 10px;
  51. margin-right: 10px;
  52. }
  53.  
  54. .push_1, .pull_1,
  55. .push_2, .pull_2,
  56. .push_3, .pull_3,
  57. .push_4, .pull_4,
  58. .push_5, .pull_5,
  59. .push_6, .pull_6,
  60. .push_7, .pull_7,
  61. .push_8, .pull_8,
  62. .push_9, .pull_9,
  63. .push_10, .pull_10,
  64. .push_11, .pull_11,
  65. .push_12, .pull_12,
  66. .push_13, .pull_13,
  67. .push_14, .pull_14,
  68. .push_15, .pull_15,
  69. .push_16, .pull_16 {
  70. position: relative;
  71. }
  72.  
  73. /* Grid >> Children (Alpha ~ First, Omega ~ Last)
  74. ----------------------------------------------------------------------------------------------------*/
  75.  
  76. .alpha {
  77. margin-left: 0;
  78. }
  79.  
  80. .omega {
  81. margin-right: 0;
  82. }
  83.  
  84. /* Grid >> 16 Columns
  85. ----------------------------------------------------------------------------------------------------*/
  86.  
  87. .container_16 .grid_1 {
  88. width: 40px;
  89. }
  90.  
  91. .container_16 .grid_2 {
  92. width: 100px;
  93. }
  94.  
  95. .container_16 .grid_3 {
  96. width: 160px;
  97. }
  98.  
  99. .container_16 .grid_4 {
  100. width: 220px;
  101. }
  102.  
  103. .container_16 .grid_5 {
  104. width: 280px;
  105. }
  106.  
  107. .container_16 .grid_6 {
  108. width: 340px;
  109. }
  110.  
  111. .container_16 .grid_7 {
  112. width: 400px;
  113. }
  114.  
  115. .container_16 .grid_8 {
  116. width: 460px;
  117. }
  118.  
  119. .container_16 .grid_9 {
  120. width: 520px;
  121. }
  122.  
  123. .container_16 .grid_10 {
  124. width: 580px;
  125. }
  126.  
  127. .container_16 .grid_11 {
  128. width: 640px;
  129. }
  130.  
  131. .container_16 .grid_12 {
  132. width: 700px;
  133. }
  134.  
  135. .container_16 .grid_13 {
  136. width: 760px;
  137. }
  138.  
  139. .container_16 .grid_14 {
  140. width: 820px;
  141. }
  142.  
  143. .container_16 .grid_15 {
  144. width: 880px;
  145. }
  146.  
  147. .container_16 .grid_16 {
  148. width: 940px;
  149. }
  150.  
  151. /* Prefix Extra Space >> 16 Columns
  152. ----------------------------------------------------------------------------------------------------*/
  153.  
  154. .container_16 .prefix_1 {
  155. padding-left: 60px;
  156. }
  157.  
  158. .container_16 .prefix_2 {
  159. padding-left: 120px;
  160. }
  161.  
  162. .container_16 .prefix_3 {
  163. padding-left: 180px;
  164. }
  165.  
  166. .container_16 .prefix_4 {
  167. padding-left: 240px;
  168. }
  169.  
  170. .container_16 .prefix_5 {
  171. padding-left: 300px;
  172. }
  173.  
  174. .container_16 .prefix_6 {
  175. padding-left: 360px;
  176. }
  177.  
  178. .container_16 .prefix_7 {
  179. padding-left: 420px;
  180. }
  181.  
  182. .container_16 .prefix_8 {
  183. padding-left: 480px;
  184. }
  185.  
  186. .container_16 .prefix_9 {
  187. padding-left: 540px;
  188. }
  189.  
  190. .container_16 .prefix_10 {
  191. padding-left: 600px;
  192. }
  193.  
  194. .container_16 .prefix_11 {
  195. padding-left: 660px;
  196. }
  197.  
  198. .container_16 .prefix_12 {
  199. padding-left: 720px;
  200. }
  201.  
  202. .container_16 .prefix_13 {
  203. padding-left: 780px;
  204. }
  205.  
  206. .container_16 .prefix_14 {
  207. padding-left: 840px;
  208. }
  209.  
  210. .container_16 .prefix_15 {
  211. padding-left: 900px;
  212. }
  213.  
  214. /* Suffix Extra Space >> 16 Columns
  215. ----------------------------------------------------------------------------------------------------*/
  216.  
  217. .container_16 .suffix_1 {
  218. padding-right: 60px;
  219. }
  220.  
  221. .container_16 .suffix_2 {
  222. padding-right: 120px;
  223. }
  224.  
  225. .container_16 .suffix_3 {
  226. padding-right: 180px;
  227. }
  228.  
  229. .container_16 .suffix_4 {
  230. padding-right: 240px;
  231. }
  232.  
  233. .container_16 .suffix_5 {
  234. padding-right: 300px;
  235. }
  236.  
  237. .container_16 .suffix_6 {
  238. padding-right: 360px;
  239. }
  240.  
  241. .container_16 .suffix_7 {
  242. padding-right: 420px;
  243. }
  244.  
  245. .container_16 .suffix_8 {
  246. padding-right: 480px;
  247. }
  248.  
  249. .container_16 .suffix_9 {
  250. padding-right: 540px;
  251. }
  252.  
  253. .container_16 .suffix_10 {
  254. padding-right: 600px;
  255. }
  256.  
  257. .container_16 .suffix_11 {
  258. padding-right: 660px;
  259. }
  260.  
  261. .container_16 .suffix_12 {
  262. padding-right: 720px;
  263. }
  264.  
  265. .container_16 .suffix_13 {
  266. padding-right: 780px;
  267. }
  268.  
  269. .container_16 .suffix_14 {
  270. padding-right: 840px;
  271. }
  272.  
  273. .container_16 .suffix_15 {
  274. padding-right: 900px;
  275. }
  276.  
  277. /* Push Space >> 16 Columns
  278. ----------------------------------------------------------------------------------------------------*/
  279.  
  280. .container_16 .push_1 {
  281. left: 60px;
  282. }
  283.  
  284. .container_16 .push_2 {
  285. left: 120px;
  286. }
  287.  
  288. .container_16 .push_3 {
  289. left: 180px;
  290. }
  291.  
  292. .container_16 .push_4 {
  293. left: 240px;
  294. }
  295.  
  296. .container_16 .push_5 {
  297. left: 300px;
  298. }
  299.  
  300. .container_16 .push_6 {
  301. left: 360px;
  302. }
  303.  
  304. .container_16 .push_7 {
  305. left: 420px;
  306. }
  307.  
  308. .container_16 .push_8 {
  309. left: 480px;
  310. }
  311.  
  312. .container_16 .push_9 {
  313. left: 540px;
  314. }
  315.  
  316. .container_16 .push_10 {
  317. left: 600px;
  318. }
  319.  
  320. .container_16 .push_11 {
  321. left: 660px;
  322. }
  323.  
  324. .container_16 .push_12 {
  325. left: 720px;
  326. }
  327.  
  328. .container_16 .push_13 {
  329. left: 780px;
  330. }
  331.  
  332. .container_16 .push_14 {
  333. left: 840px;
  334. }
  335.  
  336. .container_16 .push_15 {
  337. left: 900px;
  338. }
  339.  
  340. /* Pull Space >> 16 Columns
  341. ----------------------------------------------------------------------------------------------------*/
  342.  
  343. .container_16 .pull_1 {
  344. left: -60px;
  345. }
  346.  
  347. .container_16 .pull_2 {
  348. left: -120px;
  349. }
  350.  
  351. .container_16 .pull_3 {
  352. left: -180px;
  353. }
  354.  
  355. .container_16 .pull_4 {
  356. left: -240px;
  357. }
  358.  
  359. .container_16 .pull_5 {
  360. left: -300px;
  361. }
  362.  
  363. .container_16 .pull_6 {
  364. left: -360px;
  365. }
  366.  
  367. .container_16 .pull_7 {
  368. left: -420px;
  369. }
  370.  
  371. .container_16 .pull_8 {
  372. left: -480px;
  373. }
  374.  
  375. .container_16 .pull_9 {
  376. left: -540px;
  377. }
  378.  
  379. .container_16 .pull_10 {
  380. left: -600px;
  381. }
  382.  
  383. .container_16 .pull_11 {
  384. left: -660px;
  385. }
  386.  
  387. .container_16 .pull_12 {
  388. left: -720px;
  389. }
  390.  
  391. .container_16 .pull_13 {
  392. left: -780px;
  393. }
  394.  
  395. .container_16 .pull_14 {
  396. left: -840px;
  397. }
  398.  
  399. .container_16 .pull_15 {
  400. left: -900px;
  401. }
  402.  
  403. /* `Clear Floated Elements
  404. ----------------------------------------------------------------------------------------------------*/
  405.  
  406. /* http://sonspring.com/journal/clearing-floats */
  407.  
  408. .clear {
  409. clear: both;
  410. display: block;
  411. overflow: hidden;
  412. visibility: hidden;
  413. width: 0;
  414. height: 0;
  415. }
  416.  
  417. /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
  418.  
  419. .clearfix:before,
  420. .clearfix:after {
  421. content: '\0020';
  422. display: block;
  423. overflow: hidden;
  424. visibility: hidden;
  425. width: 0;
  426. height: 0;
  427. }
  428.  
  429. .clearfix:after {
  430. clear: both;
  431. }
  432.  
  433. /*
  434.   The following zoom: 1 rule is specifically for IE6 + IE7.
  435.   Move to separate stylesheet if invalid CSS is a problem.
  436. */
  437.  
  438. .clearfix {
  439. zoom: 1;
  440. }

Report this snippet  

You need to login to post a comment.