Base CSS with 972px Grid System


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

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


Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.