960 Grid - Grey Box Layout


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



Copy this code and paste it in your HTML
  1. /*
  2. -----------------------------------------------
  3. Grey Box Method - Layout CSS
  4. ----------------------------------------------- */
  5.  
  6. body {
  7. background: #eee;
  8. border-top: 5px solid #000;
  9. color: #333;
  10. font-size: 11px;
  11. padding: 0 0 40px;
  12. }
  13.  
  14.  
  15. /* anchors
  16. ----------------------------------------------- */
  17. a {
  18. color: #000;
  19. font-weight:bold;
  20. text-decoration: none;
  21. }
  22. a:hover {
  23. color:#333;
  24. }
  25.  
  26.  
  27. /* 960 grid system container background
  28. ----------------------------------------------- */
  29. .container_12 {
  30. background:#fff
  31. /*
  32.   url("../img/gridlines_12_col.gif") center top repeat-y
  33. */
  34. ;
  35. }
  36.  
  37. .container_16 {
  38. background:#fff
  39. /*
  40.   url("../img/gridlines_16_col.gif") center top repeat-y
  41. */
  42. ;
  43. }
  44.  
  45.  
  46. /* headings
  47. ----------------------------------------------- */
  48. h1, h2, h3, h4, h5, h6 {line-height:1.2em; margin-bottom:.3em;}
  49. h2 {margin-top:1em;}
  50. h5 {font-size:1.2em;}
  51. h6 {font-size:1em; text-transform:uppercase;}
  52.  
  53.  
  54. h1 a {
  55. font-weight:normal;
  56. }
  57.  
  58.  
  59. /* branding
  60. ----------------------------------------------- */
  61. h1#branding {
  62. font-weight:normal;
  63. font-size:3em;
  64. text-align:left;
  65. background:#aaa;
  66. padding:.7em 1em;
  67. margin-bottom:0;
  68. }
  69.  
  70.  
  71. /* page heading
  72. ----------------------------------------------- */
  73. h2#page-heading {
  74. font-weight:normal;
  75. padding:.5em;
  76. margin:0 0 10px 0;
  77. border-bottom:1px solid #ccc;
  78. }
  79.  
  80.  
  81. /* boxes
  82. ----------------------------------------------- */
  83. .box {
  84. background:#ddd;
  85. margin-bottom:20px;
  86. padding:10px 10px 1px 10px;
  87. }
  88. .box h2 {
  89. font-size:1em;
  90. font-weight:normal;
  91. text-transform:uppercase;
  92. color:#fff;
  93. background:#333;
  94. margin:-10px -10px 0 -10px;
  95. padding:6px 12px;
  96. }
  97. .box h2 a,
  98. .box h2 a.visible {
  99. color:#fff;
  100. background:#333 url("../img/switch_minus.gif") 96% 50% no-repeat;
  101. display:block;
  102. padding:6px 12px;
  103. margin:-6px -12px;
  104. border:none;
  105. }
  106. .grid_4 .box h2 a {
  107. background-position: 97% 50%;
  108. }
  109. .grid_5 .box h2 a {
  110. background-position: 98% 50%;
  111. }
  112. .grid_12 .box h2 a {
  113. background-position: 99% 50%;
  114. }
  115.  
  116.  
  117. .box h2 a.hidden,
  118. .box h2 a.hidden:hover {
  119. background-image: url("../img/switch_plus.gif");
  120. }
  121. .box h2 a:hover {
  122. background-color:#111;
  123. }
  124. .block {
  125. padding-top:10px;
  126. }
  127. div.menu {
  128. padding:0;
  129. }
  130. div.menu h2 {
  131. margin:0;
  132. }
  133. div.menu .block {
  134. padding-top:0;
  135. }
  136.  
  137.  
  138. /* paragraphs, quotes and lists
  139. ----------------------------------------------- */
  140. p {
  141. margin-bottom:1em;
  142. }
  143. blockquote {
  144. font-family: Georgia, 'Times New Roman', serif;
  145. font-size:1.2em;
  146. padding-left:1em;
  147. border-left:4px solid #ccc;
  148. }
  149. blockquote cite {
  150. font-size:.9em;
  151. }
  152. ul, ol {
  153. padding-top:0;
  154. }
  155.  
  156.  
  157. /* menus
  158. ----------------------------------------------- */
  159. ul.menu {
  160. list-style:none;
  161. border-top:1px solid #bbb;
  162. }
  163. ul.menu li {
  164. margin:0;
  165. }
  166. ul.menu li a {
  167. display:block;
  168. padding:4px 10px;
  169. border-bottom:1px solid #ccc;
  170. }
  171. ul.menu li a:hover {
  172. background:#eee;
  173. }
  174. ul.menu li a:active {
  175. background:#ccc;
  176. }
  177.  
  178.  
  179. /* submenus
  180. ----------------------------------------------- */
  181. ul.menu ul {
  182. list-style:none;
  183. margin:0;
  184. }
  185. ul.menu ul li a {
  186. padding-left:30px;
  187. }
  188.  
  189.  
  190. /* section menus
  191. ----------------------------------------------- */
  192. ul.section {
  193. border-top:0;
  194. margin-bottom:0;
  195. }
  196. ul.section li {
  197. text-transform:uppercase;
  198. }
  199. ul.section li a {
  200. background:#bbb;
  201. }
  202. ul.section li a:hover {
  203. background:#aaa;
  204. }
  205. ul.section li a:active {
  206. color:#fff;
  207. background:#666;
  208. }
  209. ul.section li li a {
  210. background:#ddd;
  211. border-bottom:1px solid #eee;
  212. }
  213. ul.section li li a:hover {
  214. background:#ccc;
  215. }
  216. ul.section li li a:active {
  217. color:#000;
  218. background:#fff;
  219. }
  220. ul.section ul li {
  221. text-transform:none;
  222. }
  223. ul.section ul.current li a {
  224. background:#eee;
  225. border-bottom:1px solid #fff;
  226. }
  227. ul.section ul.current li a:hover {
  228. background:#ddd;
  229. }
  230. ul.section ul.current li a:active {
  231. background:#fff;
  232. }
  233. ul.section li a.current {
  234. color:#fff;
  235. background:#666;
  236. }
  237. ul.section li a.current:hover {
  238. background:#555;
  239. }
  240. ul.section li a.current:active {
  241. background:#444;
  242. }
  243. ul.section li a.active {
  244. background:#fff;
  245. cursor:default;
  246. }
  247. ul.section li.current > a.active,
  248. ul.section li.current > a.active:hover {
  249. color:#fff;
  250. background:#666;
  251. cursor:default;
  252. }
  253.  
  254.  
  255. /* table
  256. ----------------------------------------------- */
  257. table {
  258. width:100%;
  259. border:1px solid #bbb;
  260. margin-bottom:10px;
  261. }
  262. col.colC {
  263. width:8em;
  264. }
  265. th, td {
  266. padding:.2em 1em;
  267. text-align:left;
  268. }
  269. thead th {
  270. border-bottom:2px solid #888;
  271. background:#bbb;
  272. padding:.4em 1em .2em;
  273. }
  274. thead th.table-head {
  275. font-size:1em;
  276. font-weight:normal;
  277. text-transform:uppercase;
  278. color:#fff;
  279. background:#555;
  280. border:1px solid #555;
  281. }
  282. tbody th,
  283. tbody td {
  284. border-top:1px solid #bbb;
  285. border-bottom:1px solid #bbb;
  286. background:#eee;
  287. }
  288. tbody tr.odd th,
  289. tbody tr.odd td {
  290. background:#fff;
  291. }
  292. tfoot th,
  293. tfoot td {
  294. border-top:2px solid #666;
  295. background:#eee;
  296. }
  297. tfoot tr.total th,
  298. tfoot tr.total td {
  299. border-top:6px double #666;
  300. }
  301. tfoot tr.total th {
  302. text-transform:uppercase;
  303. }
  304. th.currency,
  305. td.currency {
  306. text-align:right;
  307. }
  308.  
  309.  
  310. /* forms
  311. ----------------------------------------------- */
  312. form {
  313. overflow:hidden;
  314. }
  315. fieldset {
  316. border:1px solid #bbb;
  317. padding:10px;
  318. position:relative;
  319. background:#e9e9e9;
  320. margin-bottom:10px;
  321. }
  322. legend {
  323. font-size:1.1em;
  324. padding:.4em .8em;
  325. background:#fff;
  326. border:1px solid #bbb;
  327. }
  328. fieldset.login p {
  329. margin-bottom:1em;
  330. margin-top:0pt;
  331. }
  332. fieldset p label {
  333. width:98%;
  334. }
  335. fieldset p input {
  336. width:98%;
  337. }
  338. fieldset p select {
  339. width:99%;
  340. }
  341. fieldset.login p label {
  342. float:left;
  343. line-height:2em;
  344. margin-right:3%;
  345. text-align:right;
  346. width:32%;
  347. }
  348. fieldset.login p input {
  349. width:60%;
  350. }
  351. fieldset.login input.button {
  352. margin-left:35%;
  353. }
  354. form p.notice {
  355. font-weight:bold;
  356. }
  357. input.search.text {
  358. width:66%;
  359. }
  360. input.search.button {
  361. width:28%;
  362. margin-left:2%;
  363. }
  364.  
  365.  
  366. /* articles
  367. ----------------------------------------------- */
  368. .articles {
  369. padding:0;
  370. }
  371. .articles h2 {
  372. margin:0;
  373. }
  374. #articles {
  375. padding-top:0;
  376. }
  377. .article {
  378. border-top:1px solid #666;
  379. padding-top:.5em;
  380. }
  381. .box .article {
  382. border-top:3px solid #fff;
  383. padding:13px 10px 0 10px;
  384. }
  385. .article h2 {
  386. font-size:2em;
  387. font-weight:normal;
  388. text-transform:none;
  389. color:#333;
  390. background:transparent;
  391. padding:0;
  392. margin:0;
  393. border:none;
  394. }
  395. .article h3 {
  396. margin-bottom:.2em;
  397. font-size:1.6em;
  398. }
  399. .box .first {
  400. border-top:none;
  401. }
  402. .article h4 {
  403. font-size:1.2em;
  404. text-transform:uppercase;
  405. margin-bottom:.5em;
  406. }
  407. .article a.image {
  408. float:left;
  409. margin:3px 10px 3px 0;
  410. padding:4px;
  411. border:1px solid #bbb;
  412. background:#fff;
  413. }
  414. .article a.image:hover {
  415. border:1px solid #666;
  416. }
  417. .article a.image img {
  418. float:left;
  419. }
  420. .article p.meta {
  421. color:#666;
  422. border-top:1px dotted #999;
  423. border-bottom:1px dotted #999;
  424. padding:.3em 0;
  425. margin-bottom:.8em;
  426. }
  427.  
  428.  
  429. /* site information
  430. ----------------------------------------------- */
  431. #site_info .box {
  432. color:#fff;
  433. background:#666;
  434. margin-bottom:10px;
  435. }
  436.  
  437.  
  438. /* AJAX sliding shelf
  439. ----------------------------------------------- */
  440. #loading {float:right; margin-right:16px;}
  441. .block {padding-bottom:1px;}
  442.  
  443.  
  444. /* Accordian
  445. ----------------------------------------------- */
  446. .toggler {
  447. color: #222;
  448. margin: 0;
  449. padding: 2px 5px;
  450. background: #eee;
  451. border-bottom: 1px solid #ddd;
  452. border-right: 1px solid #ddd;
  453. border-top: 1px solid #f5f5f5;
  454. border-left: 1px solid #f5f5f5;
  455. font-size:1.1em;
  456. font-weight: bold;
  457. }
  458. dd h4 {
  459. margin: 0;
  460. padding:4px;
  461. line-height:1.2em;
  462. }
  463. dd p {
  464. margin: 0;
  465. padding: 4px;
  466. }
  467. .float-right {
  468. padding:10px 20px;
  469. float:right;
  470. }
  471.  
  472. #accordian-block {
  473. padding-bottom:10px;
  474. }
  475.  
  476. #accordian-block dd {
  477. width: 380px;
  478. }
  479.  
  480. #kwick-box {
  481. padding:0;
  482. overflow:hidden;
  483. }
  484. #kwick-box h2 {
  485. margin:0;
  486. }
  487. #kwick {
  488. position: relative;
  489. }
  490.  
  491. #kwick .kwicks {
  492. display: block;
  493. background: #999;
  494. height: 120px;
  495. list-style:none;
  496. margin:0;
  497. overflow:hidden;
  498. }
  499.  
  500. /* Mootools Kwicks
  501. -----------------------------------------------
  502. #kwick li {
  503.   float: left;
  504.   margin:0;
  505.   padding:0;
  506. }
  507. #kwick .kwick {
  508.   display: block;
  509.   cursor: pointer;
  510.   overflow: hidden;
  511.   height: 100px;
  512.   width: 215px;
  513.   padding: 10px;
  514.   background: #fff;
  515. }
  516. #kwick .one {
  517.   background: #666;
  518. }
  519. #kwick .two {
  520.   background: #777;
  521. }
  522. #kwick .three {
  523.   background: #888;
  524. }
  525. #kwick .four {
  526.   background: #999;
  527. }
  528. */
  529.  
  530. .kwicks li{
  531. float: left;
  532. width: 235px;
  533. height: 100px;
  534. margin-bottom: 3px;
  535. padding: 5px;
  536. }
  537. #kwick .kwick span {
  538. color:#fff;
  539. }
  540.  
  541. #kwick1 {
  542. background: #666;
  543. }
  544. #kwick2 {
  545. background: #777;
  546. }
  547. #kwick3 {
  548. background: #888;
  549. }
  550. #kwick4 {
  551. background: #999;
  552. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.