html5-starter 0.2.9b → 0.3.1

data/README.md

@@ -16,7 +16,7 @@ Installation
 Starting a project
 ------------------
 
-    compass create my_project -r html5-boilerplate -u html5-boilerplate --javascripts-dir assets/js --css-dir assets/css --images-dir assets/img --sass-dir assets/sass
+    compass create my_project -r html5-starter -u html5-starter --javascripts-dir js --css-dir css --images-dir img --sass-dir sass
 
 The `--javascripts-dir`, `--css-dir`, `--images-dir` and `--sass-dir` flags are required to keep consistent with the original HTML5 Starter project layout. If you omit them, be sure to edit your javascript and style tags accordingly in `index.html`.
 

data/lib/html5-starter.rb

@@ -0,0 +1 @@
+Compass::Frameworks.register("html5-starter", :path => "#{File.dirname(__FILE__)}/..")

data/stylesheets/_html5-starter.scss

@@ -0,0 +1,5 @@
+@import "compass/css3";
+
+@import "html5-starter/normalize";
+@import "html5-starter/helpers";
+@import "html5-starter/print";

data/stylesheets/html5-starter/_helpers.scss

@@ -0,0 +1,78 @@
+@mixin html5-starter-helpers {
+  /*
+   * Image replacement
+   */
+
+  .ir {
+      border: 0;
+      font: 0/0 a;
+      text-shadow: none;
+      color: transparent;
+      background-color: transparent;
+  }
+
+  /*
+   * Hide from both screenreaders and browsers: h5bp.com/u
+   */
+
+  .hidden {
+      display: none !important;
+      visibility: hidden;
+  }
+
+  /*
+   * Hide only visually, but have it available for screenreaders: h5bp.com/v
+   */
+
+  .visuallyhidden {
+      border: 0;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      width: 1px;
+  }
+
+  /*
+   * Extends the .visuallyhidden class to allow the element to be focusable
+   * when navigated to via the keyboard: h5bp.com/p
+   */
+
+  .visuallyhidden.focusable:active,
+  .visuallyhidden.focusable:focus {
+      clip: auto;
+      height: auto;
+      margin: 0;
+      overflow: visible;
+      position: static;
+      width: auto;
+  }
+
+  /*
+   * Hide visually and from screenreaders, but maintain layout
+   */
+
+  .invisible {
+      visibility: hidden;
+  }
+
+  /*
+   * Contain floats: h5bp.com/q
+   */
+
+  .clearfix:before,
+  .clearfix:after {
+      content: "";
+      display: table;
+  }
+
+  .clearfix:after {
+      clear: both;
+  }
+
+  .clearfix {
+      *zoom: 1;
+  }
+}

data/stylesheets/html5-starter/_normalize.scss

@@ -0,0 +1,434 @@
+$line-height: 1.4 !default;
+$font-family: sans-serif !default;
+$font-size: 1em !default;
+$font-color: #222 !default;
+$link-color: #00e !default;
+$link-hover-color: #06e !default;
+$link-visited-color: #551a8b !default;
+$selection-color: #b3d4fc !default;
+
+
+@mixin html5-starter-normalize {
+  /* =============================================================================
+     HTML5 display definitions
+     ========================================================================== */
+
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  nav,
+  section,
+  summary {
+      display: block;
+  }
+
+  audio,
+  canvas,
+  video {
+      display: inline-block;
+      *display: inline;
+      *zoom: 1;
+  }
+
+  audio:not([controls]) {
+      display: none;
+  }
+
+  [hidden] {
+      display: none;
+  }
+
+
+  /* =============================================================================
+     Base
+     ========================================================================== */
+
+  /*
+   * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
+   * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+   */
+
+  html {
+      font-size: 100%;
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+  }
+
+  html,
+  button,
+  input,
+  select,
+  textarea {
+      font-family: $font-family;
+      color: $font-color;
+  }
+
+  body {
+      margin: 0;
+      font-size: $font-size;
+      line-height: $line-height;
+  }
+
+  /*
+   * Remove text-shadow in selection highlight: h5bp.com/i
+   * These selection declarations have to be separate.
+   * Customize the background color to match your design.
+   */
+
+  ::-moz-selection {
+      background: $selection-color;
+      text-shadow: none;
+  }
+
+  ::selection {
+      background: $selection-color;
+      text-shadow: none;
+  }
+
+
+  /* =============================================================================
+     Links
+     ========================================================================== */
+
+  a {
+      color: $link-color;
+  }
+
+  a:visited {
+      color: $link-visited-color;
+  }
+
+  a:hover {
+      color: $link-hover-color;
+  }
+
+  a:focus {
+      outline: thin dotted;
+  }
+
+  /*
+   * Improve readability when focused and hovered in all browsers: h5bp.com/h
+   */
+
+  a:hover,
+  a:active {
+      outline: 0;
+  }
+
+
+  /* =============================================================================
+     Typography
+     ========================================================================== */
+
+  abbr[title] {
+      border-bottom: 1px dotted;
+  }
+
+  b,
+  strong {
+      font-weight: bold;
+  }
+
+  blockquote {
+      margin: 1em 40px;
+  }
+
+  dfn {
+      font-style: italic;
+  }
+
+  hr {
+      display: block;
+      height: 1px;
+      border: 0;
+      border-top: 1px solid #ccc;
+      margin: 1em 0;
+      padding: 0;
+  }
+
+  ins {
+      background: #ff9;
+      color: #000;
+      text-decoration: none;
+  }
+
+  mark {
+      background: #ff0;
+      color: #000;
+      font-style: italic;
+      font-weight: bold;
+  }
+
+  /*
+   * Redeclare monospace font family: h5bp.com/j
+   */
+
+  pre,
+  code,
+  kbd,
+  samp {
+      font-family: monospace, serif;
+      _font-family: 'courier new', monospace;
+      font-size: 1em;
+  }
+
+  /*
+   * Improve readability of pre-formatted text
+   */
+
+  pre {
+      white-space: pre;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+  }
+
+  q {
+      quotes: none;
+  }
+
+  q:before,
+  q:after {
+      content: "";
+      content: none;
+  }
+
+  small {
+      font-size: 85%;
+  }
+
+  /*
+   * Position subscript and superscript content without affecting line-height: h5bp.com/k
+   */
+
+  sub,
+  sup {
+      font-size: 75%;
+      line-height: 0;
+      position: relative;
+      vertical-align: baseline;
+  }
+
+  sup {
+      top: -0.5em;
+  }
+
+  sub {
+      bottom: -0.25em;
+  }
+
+
+  /* =============================================================================
+     Lists
+     ========================================================================== */
+
+  ul,
+  ol {
+      margin: 1em 0;
+      padding: 0 0 0 40px;
+  }
+
+  dd {
+      margin: 0 0 0 40px;
+  }
+
+  nav ul,
+  nav ol {
+      list-style: none;
+      list-style-image: none;
+      margin: 0;
+      padding: 0;
+  }
+
+
+  /* =============================================================================
+     Embedded content
+     ========================================================================== */
+
+  /*
+   * 1. Improve image quality when scaled in IE7: h5bp.com/d
+   * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
+   */
+
+  img {
+      border: 0;
+      vertical-align: middle;
+      -ms-interpolation-mode: bicubic;
+  }
+
+  /*
+   * Correct overflow not hidden in IE9
+   */
+
+  svg:not(:root) {
+      overflow: hidden;
+  }
+
+
+  /* =============================================================================
+     Figures
+     ========================================================================== */
+
+  figure {
+      margin: 0;
+  }
+
+
+  /* =============================================================================
+     Forms
+     ========================================================================== */
+
+  form {
+      margin: 0;
+  }
+
+  fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+  }
+
+  /*
+   * Indicate that 'label' will shift focus to the associated form element
+   */
+
+  label {
+      cursor: pointer;
+  }
+
+  /*
+   * 1. Correct color not inheriting in IE6/7/8/9
+   * 2. Correct alignment displayed oddly in IE6/7
+   */
+
+  legend {
+      border: 0;
+      padding: 0;
+      white-space: normal;
+      *margin-left: -7px;
+  }
+
+  /*
+   * 1. Correct font-size not inheriting in all browsers
+   * 2. Remove margins in FF3/4 S5 Chrome
+   * 3. Define consistent vertical alignment display in all browsers
+   */
+
+  button,
+  input,
+  select,
+  textarea {
+      font-size: 100%;
+      margin: 0;
+      vertical-align: baseline;
+      *vertical-align: middle;
+  }
+
+  /*
+   * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+   */
+
+  button,
+  input {
+      line-height: normal;
+  }
+
+  /*
+   * 1. Display hand cursor for clickable form elements
+   * 2. Allow styling of clickable form elements in iOS
+   * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
+   */
+
+  button,
+  input[type="button"],
+  input[type="reset"],
+  input[type="submit"] {
+      cursor: pointer;
+      -webkit-appearance: button;
+      *overflow: visible;
+  }
+
+  /*
+   * Re-set default cursor for disabled elements
+   */
+
+  button[disabled],
+  input[disabled] {
+      cursor: default;
+  }
+
+  /*
+   * Consistent box sizing and appearance
+   */
+
+  input[type="checkbox"],
+  input[type="radio"] {
+      box-sizing: border-box;
+      padding: 0;
+      *width: 13px;
+      *height: 13px;
+  }
+
+  input[type="search"] {
+      -webkit-appearance: textfield;
+      -moz-box-sizing: content-box;
+      -webkit-box-sizing: content-box;
+      box-sizing: content-box;
+  }
+
+  input[type="search"]::-webkit-search-decoration,
+  input[type="search"]::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+  }
+
+  /*
+   * Remove inner padding and border in FF3/4: h5bp.com/l
+   */
+
+  button::-moz-focus-inner,
+  input::-moz-focus-inner {
+      border: 0;
+      padding: 0;
+  }
+
+  /*
+   * 1. Remove default vertical scrollbar in IE6/7/8/9
+   * 2. Allow only vertical resizing
+   */
+
+  textarea {
+      overflow: auto;
+      vertical-align: top;
+      resize: vertical;
+  }
+
+
+  /* =============================================================================
+     Tables
+     ========================================================================== */
+
+  table {
+      border-collapse: collapse;
+      border-spacing: 0;
+  }
+
+  td {
+      vertical-align: top;
+  }
+
+
+  /* =============================================================================
+     Chrome Frame Prompt
+     ========================================================================== */
+
+  .chromeframe {
+      margin: 0.2em 0;
+      background: #ccc;
+      color: #000;
+      padding: 0.2em 0;
+  }
+}