Add Reset

Add the file

  1. $ touch _reset.scss

Add to the application.scss

  1. /////// Standard CSS reset stuff here
  2. // *-------------------------------------------------
  3. @import "reset";

Add the following code:

  1. // * Let's default this puppy out
  2. // *-------------------------------------------------
  4. html, 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, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
  5.   margin: 0;
  6.   padding: 0;
  7.   border: 0;
  8.   vertical-align: baseline;
  9.   background: transparent;
  10. }
  12. * {
  13.   -moz-box-sizing: border-box;
  14.   box-sizing: border-box;
  15. }
  17. body {
  18.   font-size: 100%;
  19.   -webkit-font-smoothing: antialiased;
  20. }
  22. article, aside, figure, footer, header, hgroup, nav, section {
  23.   display: block;
  24. }
  26. // * Responsive images and other embedded objects
  27. // * Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers.
  28. // * There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue.
  30. img, object, embed {
  31.   max-width: 100%;
  32. }
  34. img {
  35.   border-style: none;
  36.   border-color: transparent;
  37.   border-width: 0;
  38. }
  40. // * we use a lot of ULs that aren't bulleted.
  41. // * don't forget to restore the bullets within content.
  43. ol,ul {
  44.   list-style: none;
  45. }
  47. blockquote, q {
  48.   quotes: none;
  50.   &:before, &:after {
  51.     content: '';
  52.     content: none;
  53.   }
  54. }
  56. a {
  57.   margin: 0;
  58.   padding: 0;
  59.   font-size: 100%;
  60.   vertical-align: baseline;
  61.   background: transparent;
  62.   &:focus {
  63.     text-decoration: underline ;
  64.     outline: none;
  65.   }
  66. }
  68. del {
  69.   text-decoration: line-through;
  70. }
  73. pre {
  74.   //white-space: pre
  75.   // * CSS2
  76.   white-space: pre-wrap;
  77.   // * CSS 2.1
  78.   //white-space: pre-line
  79.   // * CSS 3 (and 2.1 as well, actually)
  80.   word-wrap: break-word;
  81.   // * IE
  82. }
  84. input {
  85.   &[type="radio"] {
  86.     vertical-align: text-bottom;
  87.   }
  88. }
  90. input, textarea, select, button {
  91.   font-family: inherit;
  92.   font-weight: inherit;
  93.   background-color: #fff;
  94.   border: 0;
  95.   padding: 0;
  96.   margin: 0;
  97. }
  99. table {
  100.   font-size: inherit;
  101. }
  103. sub, sup {
  104.   font-size: 75%;
  105.   line-height: 0;
  106.   position: relative;
  107. }
  109. sup {
  110.   top: -0.5em;
  111. }
  113. sub {
  114.   bottom: -0.25em;
  115. }
  117. // * standardize any monospaced elements
  119. pre, code, kbd, samp {
  120.   font-family: monospace, sans-serif;
  121. }
  123. input {
  124.   &[type=button], &[type=submit] {
  125.     @extend %stipe-cursor-pointer;
  126.   }
  127. }
  129. button {
  130.   cursor: pointer;
  131.   margin: 0;
  132.   width: auto;
  133.   overflow: visible;
  134. }
  136. a.button {
  137.   display: inline-block;
  138. }
  140. // * scale images in IE7 more attractively
  142. .ie7 img {
  143.   -ms-interpolation-mode: bicubic;
  144. }
  146. // * Ok, this is where the fun starts.
  147. // *-------------------------------------------------
  149. a:link {
  150.   -webkit-tap-highlight-color: $webkit-tap-hightlight;
  151. }
  153. ins {
  154.   background-color: $ins-color;
  155.   color: black;
  156.   text-decoration: none;
  157. }
  159. mark {
  160.   background-color: $mark-color;
  161.   color: $primary-text;
  162.   font-style: italic;
  163.   font-weight: bold;
  164. }
  166. ::selection {
  167.   background: $selection-color;
  168.   color: $selection-text-color;
  169. }
  171. ::-moz-selection {
  172.   background: $selection-color;
  173.   color: $selection-text-color;
  174. }