Posted By

andyr on 03/05/11


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

wirenaught


CSS 960 Grid (12,16 Col)


 / Published in: CSS
 

  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.  
  23. .container_12,
  24. .container_16 {
  25. margin-left: auto;
  26. margin-right: auto;
  27. width: 960px;
  28. }
  29.  
  30. /* `Grid >> Global
  31. ----------------------------------------------------------------------------------------------------*/
  32.  
  33. .grid_1,
  34. .grid_2,
  35. .grid_3,
  36. .grid_4,
  37. .grid_5,
  38. .grid_6,
  39. .grid_7,
  40. .grid_8,
  41. .grid_9,
  42. .grid_10,
  43. .grid_11,
  44. .grid_12,
  45. .grid_13,
  46. .grid_14,
  47. .grid_15,
  48. .grid_16 {
  49. display: inline;
  50. float: left;
  51. margin-left: 10px;
  52. margin-right: 10px;
  53. }
  54.  
  55. .push_1, .pull_1,
  56. .push_2, .pull_2,
  57. .push_3, .pull_3,
  58. .push_4, .pull_4,
  59. .push_5, .pull_5,
  60. .push_6, .pull_6,
  61. .push_7, .pull_7,
  62. .push_8, .pull_8,
  63. .push_9, .pull_9,
  64. .push_10, .pull_10,
  65. .push_11, .pull_11,
  66. .push_12, .pull_12,
  67. .push_13, .pull_13,
  68. .push_14, .pull_14,
  69. .push_15, .pull_15 {
  70. position: relative;
  71. }
  72.  
  73. .container_12 .grid_3,
  74. .container_16 .grid_4 {
  75. width: 220px;
  76. }
  77.  
  78. .container_12 .grid_6,
  79. .container_16 .grid_8 {
  80. width: 460px;
  81. }
  82.  
  83. .container_12 .grid_9,
  84. .container_16 .grid_12 {
  85. width: 700px;
  86. }
  87.  
  88. .container_12 .grid_12,
  89. .container_16 .grid_16 {
  90. width: 940px;
  91. }
  92.  
  93. /* `Grid >> Children (Alpha ~ First, Omega ~ Last)
  94. ----------------------------------------------------------------------------------------------------*/
  95.  
  96. .alpha {
  97. margin-left: 0;
  98. }
  99.  
  100. .omega {
  101. margin-right: 0;
  102. }
  103.  
  104. /* `Grid >> 12 Columns
  105. ----------------------------------------------------------------------------------------------------*/
  106.  
  107. .container_12 .grid_1 {
  108. width: 60px;
  109. }
  110.  
  111. .container_12 .grid_2 {
  112. width: 140px;
  113. }
  114.  
  115. .container_12 .grid_4 {
  116. width: 300px;
  117. }
  118.  
  119. .container_12 .grid_5 {
  120. width: 380px;
  121. }
  122.  
  123. .container_12 .grid_7 {
  124. width: 540px;
  125. }
  126.  
  127. .container_12 .grid_8 {
  128. width: 620px;
  129. }
  130.  
  131. .container_12 .grid_10 {
  132. width: 780px;
  133. }
  134.  
  135. .container_12 .grid_11 {
  136. width: 860px;
  137. }
  138.  
  139. /* `Grid >> 16 Columns
  140. ----------------------------------------------------------------------------------------------------*/
  141.  
  142. .container_16 .grid_1 {
  143. width: 40px;
  144. }
  145.  
  146. .container_16 .grid_2 {
  147. width: 100px;
  148. }
  149.  
  150. .container_16 .grid_3 {
  151. width: 160px;
  152. }
  153.  
  154. .container_16 .grid_5 {
  155. width: 280px;
  156. }
  157.  
  158. .container_16 .grid_6 {
  159. width: 340px;
  160. }
  161.  
  162. .container_16 .grid_7 {
  163. width: 400px;
  164. }
  165.  
  166. .container_16 .grid_9 {
  167. width: 520px;
  168. }
  169.  
  170. .container_16 .grid_10 {
  171. width: 580px;
  172. }
  173.  
  174. .container_16 .grid_11 {
  175. width: 640px;
  176. }
  177.  
  178. .container_16 .grid_13 {
  179. width: 760px;
  180. }
  181.  
  182. .container_16 .grid_14 {
  183. width: 820px;
  184. }
  185.  
  186. .container_16 .grid_15 {
  187. width: 880px;
  188. }
  189.  
  190. /* `Prefix Extra Space >> Global
  191. ----------------------------------------------------------------------------------------------------*/
  192.  
  193. .container_12 .prefix_3,
  194. .container_16 .prefix_4 {
  195. padding-left: 240px;
  196. }
  197.  
  198. .container_12 .prefix_6,
  199. .container_16 .prefix_8 {
  200. padding-left: 480px;
  201. }
  202.  
  203. .container_12 .prefix_9,
  204. .container_16 .prefix_12 {
  205. padding-left: 720px;
  206. }
  207.  
  208. /* `Prefix Extra Space >> 12 Columns
  209. ----------------------------------------------------------------------------------------------------*/
  210.  
  211. .container_12 .prefix_1 {
  212. padding-left: 80px;
  213. }
  214.  
  215. .container_12 .prefix_2 {
  216. padding-left: 160px;
  217. }
  218.  
  219. .container_12 .prefix_4 {
  220. padding-left: 320px;
  221. }
  222.  
  223. .container_12 .prefix_5 {
  224. padding-left: 400px;
  225. }
  226.  
  227. .container_12 .prefix_7 {
  228. padding-left: 560px;
  229. }
  230.  
  231. .container_12 .prefix_8 {
  232. padding-left: 640px;
  233. }
  234.  
  235. .container_12 .prefix_10 {
  236. padding-left: 800px;
  237. }
  238.  
  239. .container_12 .prefix_11 {
  240. padding-left: 880px;
  241. }
  242.  
  243. /* `Prefix Extra Space >> 16 Columns
  244. ----------------------------------------------------------------------------------------------------*/
  245.  
  246. .container_16 .prefix_1 {
  247. padding-left: 60px;
  248. }
  249.  
  250. .container_16 .prefix_2 {
  251. padding-left: 120px;
  252. }
  253.  
  254. .container_16 .prefix_3 {
  255. padding-left: 180px;
  256. }
  257.  
  258. .container_16 .prefix_5 {
  259. padding-left: 300px;
  260. }
  261.  
  262. .container_16 .prefix_6 {
  263. padding-left: 360px;
  264. }
  265.  
  266. .container_16 .prefix_7 {
  267. padding-left: 420px;
  268. }
  269.  
  270. .container_16 .prefix_9 {
  271. padding-left: 540px;
  272. }
  273.  
  274. .container_16 .prefix_10 {
  275. padding-left: 600px;
  276. }
  277.  
  278. .container_16 .prefix_11 {
  279. padding-left: 660px;
  280. }
  281.  
  282. .container_16 .prefix_13 {
  283. padding-left: 780px;
  284. }
  285.  
  286. .container_16 .prefix_14 {
  287. padding-left: 840px;
  288. }
  289.  
  290. .container_16 .prefix_15 {
  291. padding-left: 900px;
  292. }
  293.  
  294. /* `Suffix Extra Space >> Global
  295. ----------------------------------------------------------------------------------------------------*/
  296.  
  297. .container_12 .suffix_3,
  298. .container_16 .suffix_4 {
  299. padding-right: 240px;
  300. }
  301.  
  302. .container_12 .suffix_6,
  303. .container_16 .suffix_8 {
  304. padding-right: 480px;
  305. }
  306.  
  307. .container_12 .suffix_9,
  308. .container_16 .suffix_12 {
  309. padding-right: 720px;
  310. }
  311.  
  312. /* `Suffix Extra Space >> 12 Columns
  313. ----------------------------------------------------------------------------------------------------*/
  314.  
  315. .container_12 .suffix_1 {
  316. padding-right: 80px;
  317. }
  318.  
  319. .container_12 .suffix_2 {
  320. padding-right: 160px;
  321. }
  322.  
  323. .container_12 .suffix_4 {
  324. padding-right: 320px;
  325. }
  326.  
  327. .container_12 .suffix_5 {
  328. padding-right: 400px;
  329. }
  330.  
  331. .container_12 .suffix_7 {
  332. padding-right: 560px;
  333. }
  334.  
  335. .container_12 .suffix_8 {
  336. padding-right: 640px;
  337. }
  338.  
  339. .container_12 .suffix_10 {
  340. padding-right: 800px;
  341. }
  342.  
  343. .container_12 .suffix_11 {
  344. padding-right: 880px;
  345. }
  346.  
  347. /* `Suffix Extra Space >> 16 Columns
  348. ----------------------------------------------------------------------------------------------------*/
  349.  
  350. .container_16 .suffix_1 {
  351. padding-right: 60px;
  352. }
  353.  
  354. .container_16 .suffix_2 {
  355. padding-right: 120px;
  356. }
  357.  
  358. .container_16 .suffix_3 {
  359. padding-right: 180px;
  360. }
  361.  
  362. .container_16 .suffix_5 {
  363. padding-right: 300px;
  364. }
  365.  
  366. .container_16 .suffix_6 {
  367. padding-right: 360px;
  368. }
  369.  
  370. .container_16 .suffix_7 {
  371. padding-right: 420px;
  372. }
  373.  
  374. .container_16 .suffix_9 {
  375. padding-right: 540px;
  376. }
  377.  
  378. .container_16 .suffix_10 {
  379. padding-right: 600px;
  380. }
  381.  
  382. .container_16 .suffix_11 {
  383. padding-right: 660px;
  384. }
  385.  
  386. .container_16 .suffix_13 {
  387. padding-right: 780px;
  388. }
  389.  
  390. .container_16 .suffix_14 {
  391. padding-right: 840px;
  392. }
  393.  
  394. .container_16 .suffix_15 {
  395. padding-right: 900px;
  396. }
  397.  
  398. /* `Push Space >> Global
  399. ----------------------------------------------------------------------------------------------------*/
  400.  
  401. .container_12 .push_3,
  402. .container_16 .push_4 {
  403. left: 240px;
  404. }
  405.  
  406. .container_12 .push_6,
  407. .container_16 .push_8 {
  408. left: 480px;
  409. }
  410.  
  411. .container_12 .push_9,
  412. .container_16 .push_12 {
  413. left: 720px;
  414. }
  415.  
  416. /* `Push Space >> 12 Columns
  417. ----------------------------------------------------------------------------------------------------*/
  418.  
  419. .container_12 .push_1 {
  420. left: 80px;
  421. }
  422.  
  423. .container_12 .push_2 {
  424. left: 160px;
  425. }
  426.  
  427. .container_12 .push_4 {
  428. left: 320px;
  429. }
  430.  
  431. .container_12 .push_5 {
  432. left: 400px;
  433. }
  434.  
  435. .container_12 .push_7 {
  436. left: 560px;
  437. }
  438.  
  439. .container_12 .push_8 {
  440. left: 640px;
  441. }
  442.  
  443. .container_12 .push_10 {
  444. left: 800px;
  445. }
  446.  
  447. .container_12 .push_11 {
  448. left: 880px;
  449. }
  450.  
  451. /* `Push Space >> 16 Columns
  452. ----------------------------------------------------------------------------------------------------*/
  453.  
  454. .container_16 .push_1 {
  455. left: 60px;
  456. }
  457.  
  458. .container_16 .push_2 {
  459. left: 120px;
  460. }
  461.  
  462. .container_16 .push_3 {
  463. left: 180px;
  464. }
  465.  
  466. .container_16 .push_5 {
  467. left: 300px;
  468. }
  469.  
  470. .container_16 .push_6 {
  471. left: 360px;
  472. }
  473.  
  474. .container_16 .push_7 {
  475. left: 420px;
  476. }
  477.  
  478. .container_16 .push_9 {
  479. left: 540px;
  480. }
  481.  
  482. .container_16 .push_10 {
  483. left: 600px;
  484. }
  485.  
  486. .container_16 .push_11 {
  487. left: 660px;
  488. }
  489.  
  490. .container_16 .push_13 {
  491. left: 780px;
  492. }
  493.  
  494. .container_16 .push_14 {
  495. left: 840px;
  496. }
  497.  
  498. .container_16 .push_15 {
  499. left: 900px;
  500. }
  501.  
  502. /* `Pull Space >> Global
  503. ----------------------------------------------------------------------------------------------------*/
  504.  
  505. .container_12 .pull_3,
  506. .container_16 .pull_4 {
  507. left: -240px;
  508. }
  509.  
  510. .container_12 .pull_6,
  511. .container_16 .pull_8 {
  512. left: -480px;
  513. }
  514.  
  515. .container_12 .pull_9,
  516. .container_16 .pull_12 {
  517. left: -720px;
  518. }
  519.  
  520. /* `Pull Space >> 12 Columns
  521. ----------------------------------------------------------------------------------------------------*/
  522.  
  523. .container_12 .pull_1 {
  524. left: -80px;
  525. }
  526.  
  527. .container_12 .pull_2 {
  528. left: -160px;
  529. }
  530.  
  531. .container_12 .pull_4 {
  532. left: -320px;
  533. }
  534.  
  535. .container_12 .pull_5 {
  536. left: -400px;
  537. }
  538.  
  539. .container_12 .pull_7 {
  540. left: -560px;
  541. }
  542.  
  543. .container_12 .pull_8 {
  544. left: -640px;
  545. }
  546.  
  547. .container_12 .pull_10 {
  548. left: -800px;
  549. }
  550.  
  551. .container_12 .pull_11 {
  552. left: -880px;
  553. }
  554.  
  555. /* `Pull Space >> 16 Columns
  556. ----------------------------------------------------------------------------------------------------*/
  557.  
  558. .container_16 .pull_1 {
  559. left: -60px;
  560. }
  561.  
  562. .container_16 .pull_2 {
  563. left: -120px;
  564. }
  565.  
  566. .container_16 .pull_3 {
  567. left: -180px;
  568. }
  569.  
  570. .container_16 .pull_5 {
  571. left: -300px;
  572. }
  573.  
  574. .container_16 .pull_6 {
  575. left: -360px;
  576. }
  577.  
  578. .container_16 .pull_7 {
  579. left: -420px;
  580. }
  581.  
  582. .container_16 .pull_9 {
  583. left: -540px;
  584. }
  585.  
  586. .container_16 .pull_10 {
  587. left: -600px;
  588. }
  589.  
  590. .container_16 .pull_11 {
  591. left: -660px;
  592. }
  593.  
  594. .container_16 .pull_13 {
  595. left: -780px;
  596. }
  597.  
  598. .container_16 .pull_14 {
  599. left: -840px;
  600. }
  601.  
  602. .container_16 .pull_15 {
  603. left: -900px;
  604. }
  605.  
  606. /* `Clear Floated Elements
  607. ----------------------------------------------------------------------------------------------------*/
  608.  
  609. /* http://sonspring.com/journal/clearing-floats */
  610.  
  611. .clear {
  612. clear: both;
  613. display: block;
  614. overflow: hidden;
  615. visibility: hidden;
  616. width: 0;
  617. height: 0;
  618. }
  619.  
  620. /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
  621.  
  622. .clearfix:before,
  623. .clearfix:after {
  624. content: '\0020';
  625. display: block;
  626. overflow: hidden;
  627. visibility: hidden;
  628. width: 0;
  629. height: 0;
  630. }
  631.  
  632. .clearfix:after {
  633. clear: both;
  634. }
  635.  
  636. /*
  637. The following zoom:1 rule is specifically for IE6 + IE7.
  638. Move to separate stylesheet if invalid CSS is a problem.
  639. */
  640.  
  641. .clearfix {
  642. zoom: 1;
  643. }

Report this snippet  

You need to login to post a comment.