Posted By

nerdfiles on 09/05/11


Tagged

SASS html5 scss html5bp


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

akem


HTML5BP CSS as SCSS (SASS)


 / Published in: CSS
 

  1. /*
  2.  * HTML5 Boilerplate
  3.  *
  4.  * What follows is the result of much research on cross-browser styling.
  5.  * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
  6.  * Kroc Camen, and the H5BP dev community and team.
  7.  */
  8.  
  9. /* =============================================================================
  10.   HTML5 element display
  11.   ========================================================================== */
  12.  
  13. article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  14. display: block; }
  15.  
  16. audio[controls], canvas, video {
  17. display: inline-block;
  18. *display: inline;
  19. *zoom: 1; }
  20.  
  21. /* =============================================================================
  22.   Base
  23.   ========================================================================== */
  24.  
  25. /*
  26.  * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
  27.  * http://clagnut.com/blog/348/#c790
  28.  * 2. Force vertical scrollbar in non-IE
  29.  * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
  30.  * www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
  31.  * 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
  32.  * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
  33.  */
  34.  
  35. html {
  36. font-size: 100%;
  37. overflow-y: scroll;
  38. -webkit-overflow-scrolling: touch;
  39. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  40. -webkit-text-size-adjust: 100%;
  41. -ms-text-size-adjust: 100%; }
  42.  
  43. body {
  44. margin: 0;
  45. font-size: 13px;
  46. line-height: 1.231;
  47. font-family: sans-serif;
  48. color: #222; }
  49.  
  50. button, input, select, textarea {
  51. font-family: sans-serif;
  52. color: #222; }
  53.  
  54. /*
  55.  * These selection declarations have to be separate
  56.  * No text-shadow: twitter.com/miketaylr/status/12228805301
  57.  * Also: hot pink!
  58.  */
  59.  
  60. : {
  61. &:-moz-selection, &:selection {
  62. background: #fe57a1;
  63. color: #fff;
  64. text-shadow: none; } }
  65.  
  66. /* =============================================================================
  67.   Links
  68.   ========================================================================== */
  69.  
  70. a {
  71. color: #00e;
  72. &:visited {
  73. color: #551a8b; }
  74. &:focus {
  75. outline: thin dotted; }
  76. &:hover, &:active {
  77. outline: 0; } }
  78.  
  79. /* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
  80.  
  81. /* =============================================================================
  82.   Typography
  83.   ========================================================================== */
  84.  
  85. abbr[title] {
  86. border-bottom: 1px dotted; }
  87.  
  88. b, strong {
  89. font-weight: bold; }
  90.  
  91. blockquote {
  92. margin: 1em 40px; }
  93.  
  94. dfn {
  95. font-style: italic; }
  96.  
  97. hr {
  98. display: block;
  99. height: 1px;
  100. border: 0;
  101. border-top: 1px solid #ccc;
  102. margin: 1em 0;
  103. padding: 0; }
  104.  
  105. ins {
  106. background: #ff9;
  107. color: #000;
  108. text-decoration: none; }
  109.  
  110. mark {
  111. background: #ff0;
  112. color: #000;
  113. font-style: italic;
  114. font-weight: bold; }
  115.  
  116. /* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
  117.  
  118. pre, code, kbd, samp {
  119. font-family: monospace, monospace;
  120. _font-family: 'courier new', monospace;
  121. font-size: 1em; }
  122.  
  123. /* Improve readability of pre-formatted text in all browsers */
  124.  
  125. pre {
  126. white-space: pre;
  127. white-space: pre-wrap;
  128. word-wrap: break-word; }
  129.  
  130. q {
  131. quotes: none;
  132. &:before, &:after {
  133. content: "";
  134. content: none; } }
  135.  
  136. small {
  137. font-size: 85%; }
  138.  
  139. /* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
  140.  
  141. sub {
  142. font-size: 75%;
  143. line-height: 0;
  144. position: relative;
  145. vertical-align: baseline; }
  146.  
  147. sup {
  148. font-size: 75%;
  149. line-height: 0;
  150. position: relative;
  151. vertical-align: baseline;
  152. top: -0.5em; }
  153.  
  154. sub {
  155. bottom: -0.25em; }
  156.  
  157. /* =============================================================================
  158.   Lists
  159.   ========================================================================== */
  160.  
  161. ul, ol {
  162. margin: 1em 0;
  163. padding: 0 0 0 40px; }
  164.  
  165. dd {
  166. margin: 0 0 0 40px; }
  167.  
  168. nav {
  169. ul, ol {
  170. list-style: none;
  171. margin: 0;
  172. padding: 0; } }
  173.  
  174. /* =============================================================================
  175.   Embedded content
  176.   ========================================================================== */
  177.  
  178. /*
  179.  * Improve image quality when scaled in IE7
  180.  * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
  181.  */
  182.  
  183. img {
  184. border: 0;
  185. -ms-interpolation-mode: bicubic; }
  186.  
  187. /*
  188.  * Correct overflow displayed oddly in IE9
  189.  */
  190.  
  191. svg:not(:root) {
  192. overflow: hidden; }
  193.  
  194. /* =============================================================================
  195.   Figures
  196.   ========================================================================== */
  197.  
  198. figure, form {
  199. margin: 0; }
  200.  
  201. /* =============================================================================
  202.   Forms
  203.   ========================================================================== */
  204.  
  205. fieldset {
  206. border: 0;
  207. margin: 0;
  208. padding: 0; }
  209.  
  210. /*
  211.  * 1. Correct color not inheriting in IE6/7/8/9
  212.  * 2. Correct alignment displayed oddly in IE6/7
  213.  */
  214.  
  215. legend {
  216. border: 0;
  217. *margin-left: -7px;
  218. padding: 0; }
  219.  
  220. /* Indicate that 'label' will shift focus to the associated form element */
  221.  
  222. label {
  223. cursor: pointer; }
  224.  
  225. /*
  226.  * 1. Correct font-size not inheriting in all browsers
  227.  * 2. Remove margins in FF3/4 S5 Chrome
  228.  * 3. Define consistent vertical alignment display in all browsers
  229.  */
  230.  
  231. button, input, select, textarea {
  232. font-size: 100%;
  233. margin: 0;
  234. vertical-align: baseline;
  235. *vertical-align: middle; }
  236.  
  237. /*
  238.  * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
  239.  * 2. Correct inner spacing displayed oddly in IE6/7
  240.  */
  241.  
  242. button, input {
  243. line-height: normal;
  244. *overflow: visible; }
  245.  
  246. /*
  247.  * 1. Display hand cursor for clickable form elements
  248.  * 2. Allow styling of clickable form elements in iOS
  249.  */
  250.  
  251. button {
  252. cursor: pointer;
  253. -webkit-appearance: button; }
  254.  
  255. input {
  256. &[type="button"], &[type="reset"], &[type="submit"] {
  257. cursor: pointer;
  258. -webkit-appearance: button; }
  259. &[type="checkbox"], &[type="radio"] {
  260. box-sizing: border-box; }
  261. &[type="search"] {
  262. -moz-box-sizing: content-box;
  263. -webkit-box-sizing: content-box;
  264. box-sizing: content-box; } }
  265.  
  266. /*
  267.  * Consistent box sizing and appearance
  268.  */
  269.  
  270. /*
  271.  * Remove inner padding and border in FF3/4
  272.  * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
  273.  */
  274.  
  275. button::-moz-focus-inner, input::-moz-focus-inner {
  276. border: 0;
  277. padding: 0; }
  278.  
  279. /* Remove default vertical scrollbar in IE6/7/8/9 */
  280.  
  281. textarea {
  282. overflow: auto;
  283. vertical-align: top; }
  284.  
  285. /* Colors for form validity */
  286.  
  287. input:valid, textarea:valid {}
  288.  
  289. input:invalid, textarea:invalid {
  290. background-color: #f0dddd; }
  291.  
  292. /* =============================================================================
  293.   Tables
  294.   ========================================================================== */
  295.  
  296. table {
  297. border-collapse: collapse;
  298. border-spacing: 0; }
  299.  
  300. /* =============================================================================
  301.   Primary styles
  302.   Author:
  303.   ========================================================================== */
  304.  
  305. /* =============================================================================
  306.   Non-semantic helper classes
  307.   Please define your styles before this section.
  308.   ========================================================================== */
  309.  
  310. /* For image replacement */
  311.  
  312. .ir {
  313. display: block;
  314. text-indent: -999em;
  315. overflow: hidden;
  316. background-repeat: no-repeat;
  317. text-align: left;
  318. direction: ltr;
  319. br {
  320. display: none; } }
  321.  
  322. /* Hide for both screenreaders and browsers:
  323.   css-discuss.incutio.com/wiki/Screenreader_Visibility */
  324.  
  325. .hidden {
  326. display: none;
  327. visibility: hidden; }
  328.  
  329. /* Hide only visually, but have it available for screenreaders: by Jon Neal.
  330.   www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
  331.  
  332. .visuallyhidden {
  333. border: 0;
  334. clip: rect(0 0 0 0);
  335. height: 1px;
  336. margin: -1px;
  337. overflow: hidden;
  338. padding: 0;
  339. position: absolute;
  340. width: 1px;
  341. &.focusable {
  342. &:active, &:focus {
  343. clip: auto;
  344. height: auto;
  345. margin: 0;
  346. overflow: visible;
  347. position: static;
  348. width: auto; } } }
  349.  
  350. /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
  351.  
  352. /* Hide visually and from screenreaders, but maintain layout */
  353.  
  354. .invisible {
  355. visibility: hidden; }
  356.  
  357. /* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
  358.  
  359. .clearfix {
  360. &:before {
  361. content: "";
  362. display: table; }
  363. &:after {
  364. content: "";
  365. display: table;
  366. clear: both; }
  367. zoom: 1; }

Report this snippet  

You need to login to post a comment.