Posted By

rickygri on 11/18/12

Tagged

css style print mobile reset media queries

Versions (?)

Who likes this?

16 people have marked this snippet as a favorite

shengyongjiang
Mench59
lookingforsome
craig
onemanstudio
lineshjose
erikgeerling
kileyohl
leosuccar
simyaci
thinkbliss
Kradash
pasia
Spenquatch
shuraki
chino

Stylesheet Template

/ Published in: CSS

CSS stylesheet template - including HTML5 reset, tweaks for mobile including media queries, print reset styles, and base styles for standardization

Highlighted TextExpand

/* 
    Document   : ${name}
    Created on : ${date}, ${time}
    Author     : ${user}
    Description:
        Purpose of the stylesheet follows.
*/

/* html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark
*/
html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,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,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;font-size:100%;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/* Minimal base styles
More Info: https://github.com/paulirish/html5-boilerplate/blob/362d0b7/css/style.css
*/
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;overflow-y:scroll}
a:link{-webkit-tap-highlight-color:#FF5E99}
a:hover,a:active{outline:none}
a,a:active,a:visited{color:#607890}
a:hover{color:#036}
ul,ol{margin-left:2em}
ol{list-style-type:decimal}
nav ul,nav li{list-style:none;list-style-image:none;margin:0}
small{font-size:85%}
b,strong,th{font-weight:700}
td{vertical-align:top}
sub,sup{font-size:75%;line-height:0;position:relative}
sup{top:-.5em}
sub{bottom:-.25em}
pre{padding:15px;white-space:pre-wrap;word-wrap:break-word}
.ie6 legend,.ie7 legend{margin-left:-7px}
button,input,select,textarea{font-family:sans-serif;font-size:100%;margin:0;overflow:visible;vertical-align:baseline;width:auto}
textarea{overflow:auto;vertical-align:text-top}
label,input[type=button],input[type=submit],input[type=image],button{cursor:pointer}
input::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0}
input:invalid,textarea:invalid{-moz-box-shadow:0 0 5px red;-webkit-box-shadow:0 0 5px red;border-radius:1px;box-shadow:0 0 5px red}
.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}
.ie7 img{-ms-interpolation-mode:bicubic}

/* ------------------------- Backgrounds */
/*body {background:url("../images/im_bg.gif") left top repeat;}*/

/* ------------------------- Generic */
body {
    /*color:#ffffff;*/
}
.clear {clear:both;}
img { /* Needed for mobile */
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:100%;
}

/* ------------------------- Typography */
strong {font-weight:bold;}
p {}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
address {}
pre, code {font-family: monospace;}

/* Links */
a, a:visited, a:active {}
a:hover {}

/* ------------------------- Forms */
input {}
select {}
label {}

/* ------------------------- Lists */

/* ------------------------- Layout */

/* ------------------------- Popups */

/* ------------------------- Media Queries */
 
/* ---------------------------------------------------------------------------- */
/* MEDIA QUERIES -------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */

/**
 * Print styles.
 *
 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
 */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
    /* Styles */

}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px)
and (max-width : 480px) {
    /* Styles */

}

/* iPads (portrait) ----------- */
@media only screen 
and (min-width : 481px)
and (max-width : 768px) {
    /* Styles */

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-width : 769px) 
and (max-width : 1024px) {
    /* Styles */

}

/* Larger screens ----------- */
@media only screen 
and (min-width : 1024px) {
    /* Styles */

}

Report this snippet Tweet

Comment:

You need to login to post a comment.

Posted By

Tagged

Versions (?)

Who likes this?

Stylesheet Template

Related snippets

Choose a language for easy browsing: