Posted By

rickygri on 11/18/12


Tagged

css style print mobile reset media queries


Versions (?)

Who likes this?

27 people have marked this snippet as a favorite

Internet-Uzver
shengyongjiang
Mench59
lookingforsome
craig
israelnoguera
onemanstudio
lineshjose
erikgeerling
kileyohl
leosuccar
simyaci
thinkbliss
Kradash
pasia
Spenquatch
shuraki
chino
Yaashaar
arnouff
webfox
palimadra
jyllstuart
sol_key
Mello
sumcal
jakkrith


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

  1. /*
  2.   Document : ${name}
  3.   Created on : ${date}, ${time}
  4.   Author : ${user}
  5.   Description:
  6.   Purpose of the stylesheet follows.
  7. */
  8.  
  9. /* html5doctor.com Reset Stylesheet
  10. v1.6.1
  11. Last Updated: 2010-09-17
  12. Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark
  13. */
  14. 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}
  15.  
  16. /* Minimal base styles
  17. More Info: https://github.com/paulirish/html5-boilerplate/blob/362d0b7/css/style.css
  18. */
  19. html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;overflow-y:scroll}
  20. a:link{-webkit-tap-highlight-color:#FF5E99}
  21. a:hover,a:active{outline:none}
  22. a,a:active,a:visited{color:#607890}
  23. a:hover{color:#036}
  24. ul,ol{margin-left:2em}
  25. ol{list-style-type:decimal}
  26. nav ul,nav li{list-style:none;list-style-image:none;margin:0}
  27. small{font-size:85%}
  28. b,strong,th{font-weight:700}
  29. td{vertical-align:top}
  30. sub,sup{font-size:75%;line-height:0;position:relative}
  31. sup{top:-.5em}
  32. sub{bottom:-.25em}
  33. pre{padding:15px;white-space:pre-wrap;word-wrap:break-word}
  34. .ie6 legend,.ie7 legend{margin-left:-7px}
  35. button,input,select,textarea{font-family:sans-serif;font-size:100%;margin:0;overflow:visible;vertical-align:baseline;width:auto}
  36. textarea{overflow:auto;vertical-align:text-top}
  37. label,input[type=button],input[type=submit],input[type=image],button{cursor:pointer}
  38. input::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0}
  39. 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}
  40. .no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}
  41. .ie7 img{-ms-interpolation-mode:bicubic}
  42.  
  43. /* ------------------------- Backgrounds */
  44. /*body {background:url("../images/im_bg.gif") left top repeat;}*/
  45.  
  46. /* ------------------------- Generic */
  47. body {
  48. /*color:#ffffff;*/
  49. }
  50. .clear {clear:both;}
  51. img { /* Needed for mobile */
  52. display:block;
  53. margin-left:auto;
  54. margin-right:auto;
  55. width:100%;
  56. }
  57.  
  58. /* ------------------------- Typography */
  59. strong {font-weight:bold;}
  60. p {}
  61. h1 {}
  62. h2 {}
  63. h3 {}
  64. h4 {}
  65. h5 {}
  66. h6 {}
  67. address {}
  68. pre, code {font-family: monospace;}
  69.  
  70. /* Links */
  71. a, a:visited, a:active {}
  72. a:hover {}
  73.  
  74. /* ------------------------- Forms */
  75. input {}
  76. select {}
  77. label {}
  78.  
  79. /* ------------------------- Lists */
  80.  
  81. /* ------------------------- Layout */
  82.  
  83.  
  84. /* ------------------------- Popups */
  85.  
  86. /* ------------------------- Media Queries */
  87.  
  88. /* ---------------------------------------------------------------------------- */
  89. /* MEDIA QUERIES -------------------------------------------------------------- */
  90. /* ---------------------------------------------------------------------------- */
  91.  
  92. /**
  93.  * Print styles.
  94.  *
  95.  * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
  96.  */
  97. @media print {
  98. * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  99. -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  100. a, a:visited { color: #444 !important; text-decoration: underline; }
  101. a[href]:after { content: " (" attr(href) ")"; }
  102. abbr[title]:after { content: " (" attr(title) ")"; }
  103. .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
  104. pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  105. thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  106. tr, img { page-break-inside: avoid; }
  107. img { max-width: 100% !important; }
  108. @page { margin: 0.5cm; }
  109. p, h2, h3 { orphans: 3; widows: 3; }
  110. h2, h3{ page-break-after: avoid; }
  111. }
  112.  
  113. /* Smartphones (portrait) ----------- */
  114. @media only screen
  115. and (max-width : 320px) {
  116. /* Styles */
  117.  
  118. }
  119.  
  120. /* Smartphones (landscape) ----------- */
  121. @media only screen
  122. and (min-width : 321px)
  123. and (max-width : 480px) {
  124. /* Styles */
  125.  
  126. }
  127.  
  128. /* iPads (portrait) ----------- */
  129. @media only screen
  130. and (min-width : 481px)
  131. and (max-width : 768px) {
  132. /* Styles */
  133.  
  134. }
  135.  
  136. /* iPads (landscape) ----------- */
  137. @media only screen
  138. and (min-width : 769px)
  139. and (max-width : 1024px) {
  140. /* Styles */
  141.  
  142. }
  143.  
  144. /* Larger screens ----------- */
  145. @media only screen
  146. and (min-width : 1024px) {
  147. /* Styles */
  148.  
  149. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: geneticcode on October 15, 2014

control freak

You need to login to post a comment.