Revision: 20006
Updated Code
at November 4, 2009 13:32 by smoothdzion
Updated Code
/* 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;}
Revision: 20005
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at November 4, 2009 13:28 by smoothdzion
Initial Code
/* 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;}
Initial URL
Initial Description
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.
Initial Title
960 Grid | Blueprint Hybrid - CSS
Initial Tags
css, textmate
Initial Language
CSS