Skip to content

Instantly share code, notes, and snippets.

@tomkrush
Created January 19, 2011 02:02
Show Gist options
  • Save tomkrush/785546 to your computer and use it in GitHub Desktop.
Save tomkrush/785546 to your computer and use it in GitHub Desktop.
/*-------------------------------------------------
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