Posted By

smoothdzion on 11/04/09

Tagged

css
textmate

Versions (?)

Last Edited at 11/04/09 01:28pm

Statistics

Viewed 589 times

Favorited by 2 user(s)

Related snippets

960 Grid | Blueprint Hybrid - CSS

/ Published in: CSS

When I use the 960 Grid this is the code I use along with a CSS Reset. I really like Blueprint's default HTML Element styles, but I like the grid of 960.gs. This is a mashup of the code.

Highlighted TextExpand

/* Reset Styles */
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,
b,u,i,center,
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-size:100%;vertical-align:baseline;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,
q:before,q:after{content:'';content:none;}
/* remember to define focus styles! */
:focus{outline:0;}
/* remember to highlight inserts somehow! */
ins{text-decoration:none;}
del{text-decoration:line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse;border-spacing:0;}
/* Grid Styles */
/*
960 Grid System ~ Core CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
*/
/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12,
.container_16{margin-left:auto;margin-right:auto;width:960px;}
/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.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{display:inline;float:left;margin-left:10px;margin-right:10px;}
.container_12 .grid_3,
.container_16 .grid_4{width:220px;}
.container_12 .grid_6,
.container_16 .grid_8{width:460px;}
.container_12 .grid_9,
.container_16 .grid_12{width:700px;}
.container_12 .grid_12,
.container_16 .grid_16{width:940px;}
/* Grid >> Children (Alpha ~ First,Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha{margin-left:0;}
.omega{margin-right:0;}
/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1{width:60px;}
.container_12 .grid_2{width:140px;}
.container_12 .grid_4{width:300px;}
.container_12 .grid_5{width:380px;}
.container_12 .grid_7{width:540px;}
.container_12 .grid_8{width:620px;}
.container_12 .grid_10{width:780px;}
.container_12 .grid_11{width:860px;}
/* Grid >> 16 Columns
----------------------------------------------------------------------------------------------------*/
.container_16 .grid_1{width:40px;}
.container_16 .grid_2{width:100px;}
.container_16 .grid_3{width:160px;}
.container_16 .grid_5{width:280px;}
.container_16 .grid_6{width:340px;}
.container_16 .grid_7{width:400px;}
.container_16 .grid_9{width:520px;}
.container_16 .grid_10{width:580px;}
.container_16 .grid_11{width:640px;}
.container_16 .grid_13{width:760px;}
.container_16 .grid_14{width:820px;}
.container_16 .grid_15{width:880px;}
/* Prefix Extra Space >> Global
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_3,
.container_16 .prefix_4{padding-left:240px;}
.container_12 .prefix_6,
.container_16 .prefix_8{padding-left:480px;}
.container_12 .prefix_9,
.container_16 .prefix_12{padding-left:720px;}
/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1{padding-left:80px;}
.container_12 .prefix_2{padding-left:160px;}
.container_12 .prefix_4{padding-left:320px;}
.container_12 .prefix_5{padding-left:400px;}
.container_12 .prefix_7{padding-left:560px;}
.container_12 .prefix_8{padding-left:640px;}
.container_12 .prefix_10{padding-left:800px;}
.container_12 .prefix_11{padding-left:880px;}
/* Prefix Extra Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/
.container_16 .prefix_1{padding-left:60px;}
.container_16 .prefix_2{padding-left:120px;}
.container_16 .prefix_3{padding-left:180px;}
.container_16 .prefix_5{padding-left:300px;}
.container_16 .prefix_6{padding-left:360px;}
.container_16 .prefix_7{padding-left:420px;}
.container_16 .prefix_9{padding-left:540px;}
.container_16 .prefix_10{padding-left:600px;}
.container_16 .prefix_11{padding-left:660px;}
.container_16 .prefix_13{padding-left:780px;}
.container_16 .prefix_14{padding-left:840px;}
.container_16 .prefix_15{padding-left:900px;}
/* Suffix Extra Space >> Global
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_3,
.container_16 .suffix_4{padding-right:240px;}
.container_12 .suffix_6,
.container_16 .suffix_8{padding-right:480px;}
.container_12 .suffix_9,
.container_16 .suffix_12{padding-right:720px;}
/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1{padding-right:80px;}
.container_12 .suffix_2{padding-right:160px;}
.container_12 .suffix_4{padding-right:320px;}
.container_12 .suffix_5{padding-right:400px;}
.container_12 .suffix_7{padding-right:560px;}
.container_12 .suffix_8{padding-right:640px;}
.container_12 .suffix_10{padding-right:800px;}
.container_12 .suffix_11{padding-right:880px;}
/* Suffix Extra Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/
.container_16 .suffix_1{padding-right:60px;}
.container_16 .suffix_2{padding-right:120px;}
.container_16 .suffix_3{padding-right:180px;}
.container_16 .suffix_5{padding-right:300px;}
.container_16 .suffix_6{padding-right:360px;}
.container_16 .suffix_7{padding-right:420px;}
.container_16 .suffix_9{padding-right:540px;}
.container_16 .suffix_10{padding-right:600px;}
.container_16 .suffix_11{padding-right:660px;}
.container_16 .suffix_13{padding-right:780px;}
.container_16 .suffix_14{padding-right:840px;}
.container_16 .suffix_15{padding-right:900px;}
/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0;}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* Text Styles */
/* -------------------------------------------------------------- 
typography.css
* Sets up some sensible default typography.
-------------------------------------------------------------- */
/* Default font settings. 
The font-size percentage is of 16px. (0.75 * 16px = 12px) */
body{font-size:75%;color:#222;background:#fff;font-family:Arial,FreeSans,Helvetica,sans-serif;}
/* Headings
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{font-weight:normal;color:#111;}
h1{font-size:3em;line-height:1;margin-bottom:0.5em;}
h2{font-size:2em;margin-bottom:0.75em;}
h3{font-size:1.5em;line-height:1;margin-bottom:1em;}
h4{font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5{font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6{font-size:1em;font-weight:bold;}
h1 img,h2 img,h3 img,
h4 img,h5 img,h6 img{margin:0;}
/* Text elements
-------------------------------------------------------------- */
p{margin:0 0 1.5em;}
p img.left{float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right{float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus,
a:hover{color:#000;}
a{color:#009;text-decoration:underline;}
blockquote{margin:1.5em;color:#666;font-style:italic;}
strong{font-weight:bold;}
em,dfn{font-style:italic;}
dfn{font-weight:bold;}
sup,sub{line-height:0;}
abbr,
acronym{border-bottom:1px dotted #666;}
address{margin:0 0 1.5em;font-style:italic;}
del{color:#666;}
pre{margin:1.5em 0;white-space:pre;}
pre,code,tt{font:1em 'andale mono','lucida console',monospace;line-height:1.5;}
/* Lists
-------------------------------------------------------------- */
li ul,
li ol{margin:0 1.5em;}
ul,ol{margin:0 1.5em 1.5em 1.5em;}
ul{list-style-type:disc;}
ol{list-style-type:decimal;}
dl{margin:0 0 1.5em 0;}
dl dt{font-weight:bold;}
dd{margin-left:1.5em;}
/* Tables
-------------------------------------------------------------- */
table{margin-bottom:1.4em;width:100%;}
th{font-weight:bold;}
thead th{background:#c3d9ff;}
th,td,caption{padding:4px 10px 4px 5px;}
tr.even td{background:#e5ecf9;}
tfoot{font-style:italic;}
caption{background:#eee;}
/* Misc classes
-------------------------------------------------------------- */
.small{font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large{font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide{display:none;}
.inner{padding:10px;}
.borders{border:1px solid #CACA96;}
.center{text-align:center;}
.quiet{color:#666;}
.loud{color:#000;}
.highlight{background:#ff0;}
.added{background:#060;color:#fff;}
.removed{background:#900;color:#fff;}
/* Form Styles */
/* -------------------------------------------------------------- 
forms.css
* Sets up some default styling for forms
* Gives you classes to enhance your forms
Usage:* For text fields,use class .title or .text
-------------------------------------------------------------- */
label{font-weight:bold;}
fieldset{padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend{font-weight:bold;font-size:1.2em;}
/* Form fields
-------------------------------------------------------------- */
input.text,input.title,
textarea,select{margin:0.5em 0;border:1px solid #bbb;}
input.text:focus,input.title:focus,
textarea:focus,select:focus{border:1px solid #666;}
input.text,
input.title{width:300px;padding:5px;}
input.title{font-size:1.5em;}
textarea{width:390px;height:250px;padding:5px;}
/* Success,notice and error boxes
-------------------------------------------------------------- */
.error,
.notice,
.success{padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error{background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice{background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success{background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a{color:#8a1f11;}
.notice a{color:#514721;}
.success a{color:#264409;}

Report this snippet Tweet