Posted By

HendyNurrizal on 05/07/11


Tagged

css base system reset grid 972px


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

maltem
rascoop


Base CSS with 972px Grid System


 / Published in: CSS
 

This base CSS include clearfix, reset CSS, and 972px Grid System by Malikaholic.com. You have your own risk by using this CSS.

  1. /*////////////////////////////////////////////////////////////////////
  2.  
  3.  
  4. M A L I K A H O L I C
  5. 972 Grid System
  6.  
  7. Author : Hendy Nurrizal
  8. Twitter : HendyNurrizal
  9. Author URL : opencart-themes.com
  10. Version : 1.7
  11. Codename : betawi
  12. Last Update : Apr 30, 2011
  13.  
  14. Copyright © 2011. Opencart-themes.com
  15. Licensed under GPL and MIT.
  16.  
  17.  
  18. ////////////////////////////////////////////////////////////////////*/
  19.  
  20.  
  21.  
  22. /* !>>>>> PREFERENCES <<<<< */
  23.  
  24. @main-color : #FF3366;
  25. @serif : @cambria;
  26. @san-serif : @lucida;
  27. @monospace : @courier;
  28.  
  29. @link-color : @main-color;
  30. @visited-link-color : @main-color;
  31. @active-link-color : @main-color;
  32.  
  33. @base-font-color : #404040;
  34. @base-font : @san-serif;
  35.  
  36. @page-bg-color : #FFF;
  37. @code-font : @monospace;
  38.  
  39. /* Heading Style */
  40. @heading-font : @serif;
  41. @heading-font-style : normal;
  42. @heading-font-weight : normal;
  43.  
  44. /* Table */
  45. @table-head-color : #CCC;
  46. @table-border : 1px solid #DDD;
  47.  
  48.  
  49. /* !>>>>> WEB TYPOGRAPHY <<<<< */
  50.  
  51. /* Serif */
  52. @palatino : Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  53. @baskerville: Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
  54. @cambria : Cambria, Georgia, serif;
  55. @hoefler : "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;
  56. @droid : 'Droid Serif', "Baskerville old face", Garamond, "Times New Roman", serif;
  57.  
  58. /* Sans-serif */
  59. @gillsans : "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  60. @trebuchet: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  61. @verdana : Verdana, Geneva, sans-serif;
  62. @lucida : "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  63. @helvetica : "Helvetica Neue", Helvetica, Arial, sans-serif;
  64. @lato : 'Lato', arial, serif;
  65.  
  66. /* Monospace */
  67. @courier : "Courier New", Courier, monospace;
  68. @consolas : Consolas, "Lucida Console", Monaco, monospace;
  69.  
  70.  
  71.  
  72. /* !>>>>> CSS RESET <<<<< */
  73.  
  74. 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;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body {line-height:1;color:black;background:white;}table {border-collapse:separate;border-spacing:0;}caption, th, td {text-align:left;font-weight:normal;}blockquote:before, blockquote:after,q:before, q:after {content:"";}blockquote, q {quotes:"" "";}
  75.  
  76. /* HTML5 tags */
  77. header, section, footer,aside, nav, article, figure {display: block;}
  78.  
  79.  
  80. /* !>>>>> Main Styles <<<<< */
  81.  
  82. html {
  83. font-family: @base-font;
  84. font-size: 62.5%; /* Scale from 16px to 10px based font */
  85. min-width: 992px;
  86. }
  87. body {
  88. font-size: 12px;
  89. font-weight: normal;
  90. line-height: 1.5em;
  91. color:@base-font-color;
  92. background-color: @page-bg-color;
  93. }
  94.  
  95.  
  96.  
  97. /* !>>>>> W3C Default style sheet for HTML 4 <<<<< */
  98.  
  99. html, address,
  100. blockquote,
  101. body, dd, div,
  102. dl, dt, fieldset, form,
  103. frame, frameset,
  104. h1, h2, h3, h4,
  105. h5, h6, noframes,
  106. ol, p, ul, center,
  107. dir, hr, menu, pre { display: block; unicode-bidi: embed }
  108.  
  109.  
  110.  
  111. /* !>>>>> Heading <<<<< */
  112.  
  113. h1,h2,h3,h4,h5,h6 { font-family: @heading-font; font-style: @heading-font-style;font-weight: @heading-font-weight;}
  114. h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }
  115. h1 { font-size: 3em; line-height: 1em; margin: 1em 0 0.25em; }
  116. h2 { font-size: 2.4em; line-height: 1em;margin: 1em 0 0.25em; }
  117. h3 { font-size: 2em; line-height: 1em; margin: 1em 0 0.25em; }
  118. h4 { font-size: 1.5em; line-height: 1.20; margin: 1em 0 0.25em; }
  119. h5 { font-size: 1.25em;line-height: 1em;font-weight: bold; margin: 1em 0 0.25em; }
  120. h6 { font-size: 1.25em;line-height: 1em;font-weight: bold; }
  121.  
  122.  
  123.  
  124. /* !>>>>> Text Formating <<<<< */
  125.  
  126. abbr, acronym { cursor:help; border-bottom:.1em dotted; }
  127. b, strong { font-weight: bolder;}
  128. big { font-size: larger; }
  129. blockquote, q { margin: 0 4em; font-style: italic; padding: 1em; font-family: @serif; font-size: 1.2em }
  130. i, cite, em, dfn,
  131. var, address { font-style: italic }
  132. del { text-decoration: line-through }
  133. small, sub, sup { font-size:smaller; }
  134. hr { border: 1px solid #CCC }
  135. sub { vertical-align: sub }
  136. sup { vertical-align: super }
  137. p { margin-bottom: 1em; }
  138. br:before { content: "\A"; white-space: pre-line }
  139.  
  140.  
  141.  
  142. /* !>>>>> Code Formating <<<<< */
  143.  
  144. pre, tt, code,
  145. kbd, samp { font-family: @code-font; line-height: 1.5em; padding: .25em .5em; font-size: 1.1em; }
  146. pre { border: 1px solid #AAA; overflow: scroll; padding: 1em; white-space: pre }
  147.  
  148.  
  149.  
  150. /* !>>>>> List <<<<< */
  151.  
  152. li ul, li ol { margin:0 1.5em; }
  153. ul, ol { margin: 0 1.5em 1.5em 3em; }
  154. ul { list-style-type: disc; }
  155. ol { list-style-type: decimal; }
  156. dl { margin: 0 0 1.5em 0; }
  157. dl dt { font-weight: bold; }
  158. dd { margin-left: 1.5em;}
  159. ol ul, ul ol,
  160. ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
  161.  
  162. .list { border-bottom: 1px solid #DDD; margin-bottom: 10px; padding-bottom: 10px; }
  163.  
  164.  
  165. /* !>>>>> Forms <<<<< */
  166.  
  167. form { font-family: @san-serif }
  168. div.form-slot {
  169. background-color: #F4F4F4;
  170. border: 1px solid #CCC;
  171. padding: 15px;
  172. }
  173. div.form-slot h4 {
  174. font-family: @helvetica;
  175. font-weight: bold;
  176. line-height: 1em;
  177. margin: 0 0 15px;
  178. }
  179. div.form-slot p {
  180. font-size: 11px;
  181. line-height: 1.2em;
  182. }
  183. div.form-slot .separator {
  184. border-bottom: 1px solid #CCC;
  185. margin-bottom: 15px;
  186. }
  187. input[type=reset], input[type=submit], input[type=button], button {
  188. background-color: #CCC;
  189. border: 1px solid #AAA;
  190. float: left;
  191. font-weight: bold;
  192. margin: 2px;
  193. padding: 5px 8px;
  194. }
  195. input[type=text], input[type=password] {
  196. height: 18px;
  197. margin: .2em 0;
  198. max-width: 268px;
  199. }
  200. input[type=file] {
  201. height: 24px;
  202. margin-bottom: 4px;
  203. padding: 5px;
  204. }
  205. textarea { min-width: 120px;}
  206. optgroup { padding: 0 1em; font-weight: bold; }
  207. option { line-height: 1.5em; padding: 0 1em; }
  208. label {
  209. cursor: default;
  210. display: block;
  211. font-weight: bold;
  212. padding: 0 15px 0 0;
  213. text-align: left;
  214. }
  215. label.radio {
  216. cursor: pointer;
  217. width: auto;
  218. font-weight: normal;
  219. padding: 0 20px 0 0;
  220. }
  221. label.radio input {
  222. cursor: pointer;
  223. height: auto;
  224. margin: 0;
  225. }
  226. label small {
  227. color: #666;
  228. display: block;
  229. font-family: @helvetica;
  230. font-weight: normal;
  231. line-height: 1.2em;
  232. }
  233. fieldset {
  234. border: 1px solid #DDD;
  235. display: inline;
  236. margin-bottom: 1em;
  237. padding: 10px;
  238. }
  239. fieldset fieldset {
  240. border: 1px solid #AAA;
  241. display: inline;
  242. padding: .25em 1.5em 1em;
  243. width: auto;
  244. }
  245. legend {
  246. color: @main-color;
  247. font-family: @serif;
  248. font-size: 1.4em;
  249. font-style: italic;
  250. padding: .5em;
  251. }
  252. fieldset fieldset legend {
  253. color: @base-font-color;
  254. font-size: 1.2em;
  255. font-style: italic;
  256. margin: 0;
  257. }
  258. button, textarea,
  259. input, select { display: inline-block }
  260.  
  261. /* make buttons play nice in IE */
  262. button { width: auto; overflow: visible; }
  263.  
  264. label, input[type=button], input[type=submit], button { cursor: pointer; }
  265.  
  266.  
  267. /* !>>>>> Specific Form Elements <<<<< */
  268. /* !Overrides basic styles */
  269. fieldset p {
  270. padding: 0 10px;
  271. }
  272. fieldset.one-line {
  273. border-bottom: none;
  274. border-left: none;
  275. border-right: none;
  276. display: block;
  277. height: 1px;
  278. }
  279. .form-unit {
  280. border: 1px solid #FFF;
  281. padding: 5px 10px;
  282. }
  283. label.radio {
  284. border: 1px solid #FFF;
  285. padding: 10px;
  286. }
  287. .form-unit.over,
  288. label.radio.over {
  289. background-color: #fff4e6;
  290. border: 1px solid #fff0d5;
  291. }
  292. .grid-4 fieldset { width: 206px; }
  293. .grid-5 fieldset { width: 268px; }
  294. .grid-6 fieldset { padding: 15px 30px; width: 290px; }
  295. .grid-6 input[type=text],
  296. .grid-6 input[type=password] { width: 260px; }
  297. .grid-6 select { max-width: 260px; }
  298. .grid-12 .buttons {
  299. border-top: 1px dotted #DDD;
  300. margin-top: 15px;
  301. padding: 15px 0;
  302. }
  303.  
  304. /* !>>>>> Tables <<<<< */
  305.  
  306. table {
  307. border: 0;
  308. display: table;
  309. margin-bottom: 1.4em;
  310. max-width: 100%;
  311. width:100%;
  312. }
  313. tfoot {
  314. font-style: italic;
  315. display: table-footer-group;
  316. text-align: center;
  317. }
  318. tfoot th {
  319. background-color: @table-head-color*1.2;
  320. border-top: 3px double @table-head-color;
  321. }
  322. td, th {
  323. border-bottom: @table-border;
  324. display: table-cell;
  325. padding: .5em 1em;
  326. vertical-align: middle;
  327. }
  328. th {
  329. font-weight: bolder;
  330. text-align: center
  331. }
  332. caption {
  333. display: table-caption;
  334. font-family: @serif;
  335. font-size: 1.4em;
  336. font-style: italic;
  337. padding: 1em;
  338. text-align: center;
  339. }
  340. tr { display: table-row }
  341. thead { display: table-header-group }
  342. tbody { display: table-row-group }
  343. col { display: table-column }
  344. colgroup { display: table-column-group }
  345. thead th { background-color: @table-head-color; }
  346. tr.even td { background-color: @table-head-color*1.2;}
  347. td[colspan] { text-align: center; }
  348.  
  349.  
  350.  
  351. /* !>>>>> Links <<<<< */
  352.  
  353. a, a:link, a:visited,
  354. a:active { text-decoration: underline; cursor: pointer }
  355. a:link { color: @link-color; }
  356. a:visited { color: @visited-link-color; }
  357. a:active { color: @active-link-color; }
  358. :focus { outline: thin dotted invert }
  359.  
  360.  
  361.  
  362. /* !>>>>> Global Clear Fix <<<<< */
  363.  
  364. article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }/* our ie CSS file */article { zoom:1; }aside { zoom:1; }div { zoom:1; }footer { zoom:1; }form { zoom:1; }header { zoom:1; }nav { zoom:1; }section { zoom:1; }ul { zoom:1; }
  365.  
  366.  
  367.  
  368. /* !>>>>> Text & Container Alignment <<<<< */
  369.  
  370. .align-left,
  371. .alignleft { float: left; padding: 0 18px 18px 0;}
  372. .align-right,
  373. .alignright { float: right; padding: 0 0 18px 18px; }
  374. .float-left { float: left; }
  375. .float-right { float: right; }
  376. .text-left { text-align: left; }
  377. .text-center { text-align: center; }
  378. .text-right { text-align: right; }
  379.  
  380.  
  381.  
  382. /* !>>>>> Rounded Container <<<<< */
  383.  
  384. round {
  385. -moz-border-radius:10px;
  386. -webkit-border-radius:10px;
  387. border-radius:10px;
  388. }
  389. .round > .round {
  390. -moz-border-radius:5px;
  391. -webkit-border-radius:5px;
  392. border-radius:5px;
  393. }
  394.  
  395.  
  396. /* !>>>>> Misc <<<<< */
  397.  
  398. .more-link:after,
  399. .more-link::after{ /* CSS3 */
  400. content:" »";
  401. }
  402.  
  403. /* !>>>>> Message <<<<< */
  404.  
  405. .success, .attention, .warning, .wait, .error, .tooltip { font-family: @lucida }
  406. .success,
  407. .attention {
  408. padding: 10px;
  409. margin-bottom: 10px;
  410. background: #E4F1C9;
  411. border: 1px solid #A5BD71;
  412. font-size: 11px;
  413. text-align: center;
  414. }
  415. .warning {
  416. color: #b20202;
  417. padding: 5px 0px;
  418. margin-bottom: 10px;
  419. background: #FFDFE0;
  420. border: 1px solid #FF9999;
  421. font-size: 11px;
  422. text-align: center;
  423. }
  424. .wait {
  425. padding: 5px 0px;
  426. margin-bottom: 10px;
  427. background: #FBFAEA;
  428. border: 1px solid #EFEBAA;
  429. font-size: 11px;
  430. text-align: center;
  431. }
  432. .required {
  433. color: #FF0000;
  434. font-weight: bold;
  435. }
  436. .error {
  437. color: #FF0000;
  438. display: block;
  439. }
  440. .help {
  441. cursor: pointer;
  442. color: #666;
  443. display: block;
  444. font-family: @helvetica;
  445. font-weight: normal;
  446. font-size: smaller;
  447. line-height: 1.2em;
  448. margin-bottom: 1em;
  449. }
  450. .tooltip {
  451. border: 1px solid #FDDA5C;
  452. background: #FBFF95;
  453. padding: 10px;
  454. font-size: 11px;
  455. line-height: 1.2em;
  456. width: 250px;
  457. }
  458. .attention img {
  459. display: block;
  460. float: right;
  461. }
  462.  
  463. /* !>>>>> 972px - 16 Grids Framework - by Malikaholic.com <<<<< */
  464.  
  465. .container-slot { margin: 0 auto; padding: 0 10px; width: 972px; }
  466.  
  467. .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, grid-16 { float: left; margin-left: 20px; }
  468. .first { margin-left: 0; clear: left; }
  469. .last { clear: right; }
  470.  
  471. .grid-1 { width: 42px; }
  472. .grid-2 { width: 104px; }
  473. .grid-3 { width: 166px; }
  474. .grid-4 { width: 228px; }
  475. .grid-5 { width: 290px; }
  476. .grid-6 { width: 352px; }
  477. .grid-7 { width: 414px; }
  478. .grid-8 { width: 476px; }
  479. .grid-9 { width: 538px; }
  480. .grid-10 { width: 600px; }
  481. .grid-11 { width: 662px; }
  482. .grid-12 { width: 724px; }
  483. .grid-13 { width: 786px; }
  484. .grid-14 { width: 848px; }
  485. .grid-15 { width: 910px; }
  486. .grid-16 { width: 972px; margin: 0 }
  487.  
  488. /* !Push & Pull */
  489. .push-1 { margin-left: 62px; }
  490. .push-2 { margin-left: 124px; }
  491. .push-3 { margin-left: 186px; }
  492. .push-4 { margin-left: 248px; }
  493. .push-5 { margin-left: 310px; }
  494. .push-6 { margin-left: 372px; }
  495. .push-7 { margin-left: 434px; }
  496. .push-8 { margin-left: 496px; }
  497. .push-9 { margin-left: 558px; }
  498. .push-11 { margin-left: 620px; }
  499. .push-11 { margin-left: 744px; }
  500. .push-12 { margin-left: 806px; }
  501. .push-13 { margin-left: 868px; }
  502. .push-14 { margin-left: 930px; }
  503.  
  504. .pull-1 { margin-right: 62px; }
  505. .pull-2 { margin-right: 124px; }
  506. .pull-3 { margin-right: 186px; }
  507. .pull-4 { margin-right: 248px; }
  508. .pull-5 { margin-right: 310px; }
  509. .pull-6 { margin-right: 372px; }
  510. .pull-7 { margin-right: 434px; }
  511. .pull-8 { margin-right: 496px; }
  512. .pull-9 { margin-right: 558px; }
  513. .pull-11 { margin-right: 620px; }
  514. .pull-11 { margin-right: 744px; }
  515. .pull-12 { margin-right: 806px; }
  516. .pull-13 { margin-right: 868px; }
  517. .pull-14 { margin-right: 930px; }
  518.  
  519. .liner { border-left: 1px solid #F00; border-right: 1px solid #F00;}
  520.  
  521. /* When container using border line, the grid will reduce its width */
  522. .grid-1.liner { width: 40px; }
  523. .grid-2.liner { width: 102px; }
  524. .grid-3.liner { width: 164px; }
  525. .grid-4.liner { width: 226px; }
  526. .grid-5.liner { width: 288px; }
  527. .grid-6.liner { width: 350px; }
  528. .grid-7.liner { width: 412px; }
  529. .grid-8.liner { width: 474px; }
  530. .grid-9.liner { width: 536px; }
  531. .grid-10.liner { width: 598px; }
  532. .grid-11.liner { width: 660px; }
  533. .grid-12.liner { width: 722px; }
  534. .grid-13.liner { width: 784px; }
  535. .grid-14.liner { width: 846px; }
  536. .grid-15.liner { width: 908px; }
  537. .grid-16.liner { width: 970px; margin: 0 }
  538.  
  539. /* Inside bordered div container */
  540. .liner .first + div,
  541. .liner .liner .first + div,
  542. .liner .last,
  543. .liner .liner .last {
  544. margin-left: 19px;
  545. }
  546. .liner .first + .last,
  547. .liner .liner .first + .last {
  548. margin-left: 18px;
  549. }
  550. .liner div > .last,
  551. .liner .liner div > .last,
  552. .liner div .first + .last,
  553. .liner .liner div .first + .last {
  554. margin-left: 20px;
  555. }
  556.  
  557.  
  558.  
  559. /* !>>>>> DIAGNOSTICS <<<<< */
  560.  
  561. .debug { background:url(../img/css/baseline.gif) 0 4px #fff!important; }
  562. .debug body { background:url(../img/css/grid.png) top center repeat-y!important; }
  563.  
  564. /*
  565. Red border == something is wrong
  566. Yellow border == something may be wrong, you should double check.
  567. Green border == perfect, nice one!
  568. */
  569.  
  570. /* Styles */
  571. .debug [style]{
  572. /* Inline styles aren’t great, can this be avoided? */
  573. outline:5px solid yellow;
  574. }
  575.  
  576. /* Images */
  577. .debug img{
  578. /* Images without alt attributes are bad! */
  579. outline:5px solid red;
  580. }
  581. .debug img[alt]{
  582. /* Images with alt attributes are good! */
  583. outline-color:green;
  584. }
  585. .debug img[alt=""]{
  586. /* Images with empty alt attributes are okay in the right circumstances. */
  587. outline-color:yellow;
  588. }
  589.  
  590. /* Links */
  591. .debug a{
  592. /* Links without titles are yellow, does your link need one? */
  593. outline:5px solid yellow;
  594. }
  595. .debug a[title]{
  596. /* Links with titles are green, title attributes can be very useful! */
  597. outline-color:green;
  598. }
  599. .debug a[href="#"]{
  600. /* Were you meant to leave that hash in there? */
  601. outline-color:yellow;
  602. }
  603. .debug a[target]/*,
  604. .debug a[onclick],
  605. .debug a[href*=javascript]*/{
  606. /* What were you thinking?! */
  607. outline-color:red;
  608. }

Report this snippet  

You need to login to post a comment.