Skip to content

Instantly share code, notes, and snippets.

@jasonmelgoza
Created April 15, 2010 00:07
Show Gist options
  • Save jasonmelgoza/366503 to your computer and use it in GitHub Desktop.
Save jasonmelgoza/366503 to your computer and use it in GitHub Desktop.
test style
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}
/* WRAPPERS
Wrappers are not used by default, but this commented example is included to
show how they can be used.
-------------------------------------------------------------------------------- */
.wrapper {
/* background-color: #ff8800; */
}
/* BLOCKS (hanging lines or rows)
Use .container to wrap units which have nested units.
-------------------------------------------------------------------------------- */
.block {
position: relative;
width: 950px; /* Override this value for narrorwer layouts. Use ( x * 60 ) -10, where x is the number of column you want. */
margin: 0 auto; /* Layouts are typically centered horizontially, but this can be overriden for flush-left. */
}
.clear:after,
.container:after,
.block:after {
content: "."; /* Clear fix */
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear,
.container,
.block {
zoom: 1; /* IE fix */
}
/* UNITS (columns)
-------------------------------------------------------------------------------- */
.unit {
float: left;
margin-left: 5px;
margin-right: 5px;
}
/* The first and last units or spans in a block do not have margins. The :first-child and :last-child
syntax would be nice here, but it doesn't work in IE6 and seems to cause weirdness in Safari, even though
Safari technically "supports" :first-child and :last child.
Thus, you need to add "first" and "last" classes to your end cap units in each block. An exception
is made for .span-16, as it is always both the first and last unit in a block. */
.first { margin-left: 0 }
.last { margin-right: 0 }
/* .span classes provide elements pre-sized to occupy the width of two or more columns */
.span-1 { width: 50px; }
.span-2 { width: 110px; }
.span-3 { width: 170px; }
.span-4 { width: 230px; }
.span-5 { width: 290px; }
.span-6 { width: 350px; }
.span-7 { width: 410px; }
.span-8 { width: 470px; }
.span-9 { width: 530px; }
.span-10 { width: 590px; }
.span-11 { width: 650px; }
.span-12 { width: 710px; }
.span-13 { width: 770px; }
.span-14 { width: 830px; }
.span-15 { width: 890px; }
.span-16 {
width: 950px;
margin-left: 0; /* We special-case .span16 with no margins, since it is, by nature always both the first and last span in a block. */
margin-right: 0;
}
/* .append and .prepend classes allow for "empty columns" by providing padding on a span or unit. */
.append-1 { padding-right: 60px; }
.append-2 { padding-right: 120px; }
.append-3 { padding-right: 180px; }
.append-4 { padding-right: 240px; }
.append-5 { padding-right: 300px; }
.append-6 { padding-right: 360px; }
.append-7 { padding-right: 420px; }
.append-8 { padding-right: 480px; }
.append-9 { padding-right: 540px; }
.append-10 { padding-right: 600px; }
.append-11 { padding-right: 660px; }
.append-12 { padding-right: 720px; }
.append-13 { padding-right: 780px; }
.append-14 { padding-right: 840px; }
.append-15 { padding-right: 900px; }
.append-16 { padding-right: 940px; }
.prepend-1 { padding-left: 60px; }
.prepend-2 { padding-left: 120px; }
.prepend-3 { padding-left: 180px; }
.prepend-4 { padding-left: 240px; }
.prepend-5 { padding-left: 300px; }
.prepend-6 { padding-left: 360px; }
.prepend-7 { padding-left: 420px; }
.prepend-8 { padding-left: 480px; }
.prepend-9 { padding-left: 540px; }
.prepend-10 { padding-left: 600px; }
.prepend-11 { padding-left: 660px; }
.prepend-12 { padding-left: 720px; }
.prepend-13 { padding-left: 780px; }
.prepend-14 { padding-left: 840px; }
.prepend-15 { padding-left: 900px; }
.prepend-16 { padding-left: 940px; }
body,ul,ol,dl,h1,h2,h3,h4,h5,h6,td,th,caption,pre,p,blockquote,input,textarea {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 18px;
font-weight: normal;
color: #222;
}
a {
color: #CC0000;
text-decoration: none;
outline:none;
}
a:hover { text-decoration: underline; }
h1,h2,h3,h4,h5,h6 {
margin: 0;
font-weight: bold;
}
h1 { font-size: 36px; line-height: 36px; padding-top: 18px; padding-bottom: 18px; }
h2 { font-size: 28px; line-height: 36px; padding-top: 9px; padding-bottom: 9px; }
h3 { font-size: 18px; line-height: 18px; padding-top: 9px; padding-bottom: 9px; }
h4 { font-size: 14px; line-height: 18px; padding-top: 9px; padding-bottom: 9px; }
h5 { font-size: 12px; line-height: 18px; padding-top: 9px; padding-bottom: 9px; }
h6 { font-size: 10px; line-height: 18px; padding-top: 9px; padding-bottom: 9px; }
p { margin: 0 0 18px 0; }
ul, ol {
margin-top: 18px;
margin-bottom: 18px;
padding-left: 16px;
list-style-position: outside;
list-style-type: disc;
}
ol { list-style-type: decimal; }
dl {
margin-top: 18px;
margin-bottom: 18px;
}
dl dt {
font-weight: bold;
}
blockquote {
margin-top: 18px;
margin-bottom: 18px;
padding-left: 17px;
border-left: 1px solid #666;
font-style: italic;
}
blockquote * { color: #666; }
strong { font-weight: bold; }
em { font-style: italic; }
/* DEFAULT STYLES FOR COMMON CLASSES
-------------------------------------------------------------------------------- */
.small {
font-size: 10px;
line-height: 18px;
}
.large {
font-size: 14px;
line-height: 18px;
}
.quiet {
color: #666;
}
/* EXTRA DEFAULT STYLES FOR COMMON TYPOGRAPHIC IDIOMS
-------------------------------------------------------------------------------- */
.footnotes {
border-top: 1px solid #666;
margin-top: -1px;
color: #666;
font-size: 10px;
}
/* BUG: This currenty relies on daisy-chained class selectors, which IE doesnt support. Need to find another way. */
.sidenote.right { float: right; }
.sidenote.right.span1 { margin-right: -60px; }
.sidenote.right.span2 { margin-right: -120px; }
.sidenote.right.span3 { margin-right: -180px; }
.sidenote.right.span4 { margin-right: -240px; }
.sidenote.left { float: left; }
.sidenote.left.span1 { margin-left: -60px; }
.sidenote.left.span2 { margin-left: -120px; }
.sidenote.left.span3 { margin-left: -180px; }
.sidenote.left.span4 { margin-left: -240px; }
body { padding: 18px 45px; }
#page { width: 550px; }
h2 {font-family:georgia; font-weight:normal; }
.caps {font-size:.92em;}
.amp {color:#666; font-size:1.05em;font-family:"Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua",serif; font-style:italic;}
.dquo {margin-left:-.38em;}
div.about {background:#ddd; padding:1em; margin-bottom:1em;}
.about h1 {font-size:1.3em; border-bottom:1px solid #bbb; margin:0 0 4px 0; padding:0 0 4px 0; line-height:1;}
.about p { margin:0;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment