Advanced Search

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.

Expand | Embed | Plain Text

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.