Created
January 19, 2011 02:02
-
-
Save tomkrush/785546 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*------------------------------------------------- | |
RESETS | |
-------------------------------------------------*/ | |
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, | |
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, | |
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, | |
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, figure, figcaption, hgroup, | |
menu, footer, header, nav, section, summary, time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
} | |
article, aside, canvas, figure, figure img, figcaption, hgroup, | |
footer, header, nav, section, audio, video { | |
display: block; | |
} | |
a img {border: 0;} | |
figure {position: relative;} | |
figure img {width: 100%;} | |
/*------------------------------------------------- | |
Clearfix | |
-------------------------------------------------*/ | |
/* slightly enhanced, universal clearfix hack */ | |
.clearfix:after { | |
visibility: hidden; | |
display: block; | |
font-size: 0; | |
content: " "; | |
clear: both; | |
height: 0; | |
} | |
.clearfix { display: inline-block; } | |
/* start commented backslash hack \*/ | |
* html .clearfix { height: 1%; } | |
.clearfix { display: block; } | |
/* close commented backslash hack */ | |
/*------------------------------------------------- | |
Typography presets | |
-------------------------------------------------*/ | |
.gigantic { | |
font-size: 110px; | |
line-height: 120px; | |
letter-spacing: -2px; | |
} | |
.huge, h1 { | |
font-size: 68px; | |
line-height: 72px; | |
letter-spacing: -1px; | |
} | |
.large, h2 { | |
font-size: 42px; | |
line-height: 48px; | |
} | |
.big, h3 { | |
font-size: 26px; | |
line-height: 36px; | |
} | |
.normal, body { | |
font: 16px/24px Helvetica, Arial, sans-serif; | |
} | |
.small { | |
font-size: 13px; | |
line-height: 18px; | |
} | |
/*------------------------------------------------------ | |
For tablets at 768 px, netbooks, and old browsers. | |
-------------------------------------------------------- | |
Default 8-column layout | |
60 px columns, 24 px gutters, 60 px margins, 768 px total | |
--------------------------------------------------------- | |
1 2 3 4 5 6 7 8 | |
60px 144px 228px 312px 396px 480px 564px 648px | |
-------------------------------------------------*/ | |
body { | |
width: 648px; | |
} | |
/*------------------------------------------------------ | |
For laptops, desktops, and hdtvs at 1280 px and beyond. | |
-------------------------------------------------------- | |
13-column layout | |
60 px columns, 24 px gutters, 72 px margins, 1212 px total (extra space for scrollbars) | |
--------------------------------------------------------------------------------------- | |
1 2 3 4 5 6 7 8 9 10 11 12 13 | |
60px 144px 228px 312px 396px 480px 564px 648px 732px 816px 900px 984px 1068px | |
-------------------------------------------------*/ | |
@media only screen and (min-width: 1212px) { | |
body { | |
width: 1068px; | |
} | |
} | |
/*------------------------------------------------------ | |
5 columns For 480 px mobiles, narrow browsers, and landscape iPhones. | |
-------------------------------------------------------- | |
5-column layout | |
60 px columns, 24 px gutters, 42 px margins, 480 px total | |
--------------------------------------------------------- | |
1 2 3 4 5 | |
60px 144px 228px 312px 396px | |
-------------------------------------------------*/ | |
@media only screen and (max-width: 767px) and (min-width: 480px) { | |
body { | |
width: 396px; | |
/* Prevents Mobile Safari from bumping up font sizes in landscape */ | |
-webkit-text-size-adjust: 100%; | |
} | |
} | |
/*------------------------------------------------------ | |
For all iPhones, iPod Touches, and other 320 px mobiles. | |
-------------------------------------------------------- | |
3-column layout | |
60 px columns, 24 px gutters, 46 px margins, 320 px total | |
--------------------------------------------------------- | |
1 2 3 | |
60px 144px 228pX | |
-------------------------------------------------*/ | |
@media only screen and (max-width: 479px) { | |
body { | |
width: 228px; | |
/* Prevents Mobile Safari from bumping up font sizes in landscape */ | |
-webkit-text-size-adjust: 100%; | |
} | |
} | |
/*------------------------------------------------- | |
iPhone 4 and other high device-pixel-ratio devices | |
-------------------------------------------------*/ | |
@media | |
only screen and (-webkit-min-device-pixel-ratio: 2), | |
only screen and (min-device-pixel-ratio: 2) { | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment