html5-starter 0.1.4b → 0.1.8b

data/README.md

@@ -1,129 +1,27 @@
-Compass Html5 Boilerplate
+Compass HTML5 Starter
 =========================
 
-HTML5 Boilerplate is a Compass extension based on HTML5 Boilerplate by Paul Irish.
-You can use it to kick-start fully compliant HTML5 applications. Generate either
-stand-alone HTML5 projects, or Rails applications with fully integrated HTML5
-Haml and Sass (Scss) templates.
+HTML5 Starter is a Compass extension based on [HTML5 Starter](https://github.com/rizkysyazuli/html5-starter), a fork of HTML5 Boilerplate by Paul Irish.
+You can use it to kick-start a fully compliant HTML5 applications. Generating a set of starter files for your HTML5 projects with integrated Sass (Scss) templates.
 
 Browse [html5boilerplate.com](http://html5boilerplate.com) for the full workup.
 
-Rails Installation
-==================
 
-    gem install html5-boilerplate
-    cd my_rails_project
-    compass init rails -r html5-boilerplate -u html5-boilerplate --force
-
-**This will install the following files in your rails project:**  
-(Using `--force` flag will overwrite any files that may already exist. In most cases this is probably what you want.)
-
-    app/views/layouts/application.html.haml
-    app/views/layouts/_flashes.html.haml
-    app/views/layouts/_footer.html.haml
-    app/views/layouts/_head.html.haml
-    app/views/layouts/_header.html.haml
-    app/views/layouts/_javascripts.html.haml
-    app/views/layouts/_stylesheets.html.haml
-    
-    app/stylesheets/style.scss
-    app/stylesheets/handheld.scss
-    app/stylesheets/partials/_base.scss
-    app/stylesheets/partials/_example.scss
-    app/stylesheets/partials/_page.scss
-    
-    public/404.html
-    public/.htaccess
-    public/crossdomain.xml
-    public/robots.txt
-    public/apple-touch-icon.png
-    public/favicon.ico
-
-    public/javascripts/dd_belatedpng.js
-    public/javascripts/jquery-1.4.4.min.js
-    public/javascripts/modernizr-1.6.min.js
-    public/javascripts/plugins.js
-    public/javascripts/rails.js
-    public/javascripts/profiling/charts.swf
-    public/javascripts/profiling/config.js
-    public/javascripts/profiling/yahoo-profiling.css
-    public/javascripts/profiling/yahoo-profiling.min.js
-    
-    config/compass.rb
-    config/initializers/compass.rb
-    config/google.yml
-    config/nginx.conf
-    config/mime.types
-
-The Scss files above will automatically get compiled to your Sass compilation directory:
-
-    public/stylesheets/style.css
-    public/stylesheets/handheld.css
-
-**Note:** If you already have a config/compass.rb file in your project, you may need to
-manually add the following line to the top:
-
-    require 'html5-boilerplate'
-
-### A few more minor points to store into your brainpan...
-
-If you still have an application.html.erb in your layouts, you will need to loose
-it now so that Rails will use your shiny new application.html.haml layout instead.
-
-The haml will compile to the equivalent of html5-boilerplate's index.html,
-but with all comments stripped out, and some additional rails stuff
-like csrf_meta_tags, flashes and the Rails jQuery driver.
-
-You can set your own Google Analytics Account ID and your Google API Key
-either as ENV variables, or inside config/google.yml.
-
-This extension has only been tested on Rails3.
-
-
-Stand Alone Installation
+Installation
 ========================
 
-    gem install html5-boilerplate
-    compass create my_project -r html5-boilerplate -u html5-boilerplate --javascripts-dir js --css-dir css
+    gem install html5-starter
+    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/css/src
 
-The `--javascripts-dir` and `--css-dir` flags are to keep consistent with the original project layout.
-If you omit them, be sure to edit your javascript and style tags accordingly in index.html.
+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.
 
-**This will create a `my_project` directory containing the following files:**  
+Run `compass watch my_project` and the SCSS files will automatically get compiled to your Sass compilation directory whenever a change is made:
 
-    index.html
-    404.html
-    crossdomain.xml
-    robots.txt
-    apple-touch-icon.png
-    favicon.ico
-    
-    src/style.scss
-    src/handheld.scss
-    src/partials/_base.scss
-    src/partials/_example.scss
-    src/partials/_page.scss
-    
-    js/dd_belatedpng.js
-    js/jquery-1.4.4.min.js
-    js/modernizr-1.6.min.js
-    js/plugins.js
-    js/profiling/charts.swf
-    js/profiling/config.js
-    js/profiling/yahoo-profiling.css
-    js/profiling/yahoo-profiling.min.js
-    
-    .htaccess
-    config.rb
-    nginx.conf
-    mime.types
-    web.config
+    assets/css/style.css
+    assets/css/handheld.css
 
-Run `compass watch my_project` and the SCSS files above will automatically
-get compiled to your Sass compilation directory whenever a change is made:
+To see the complete list of files generated by this extension, see the [HTML5 Starter](https://github.com/rizkysyazuli/html5-starter) project repo.
 
-    css/style.css
-    css/handheld.css
 
 License
 =======

data/stylesheets/html5-boilerplate/_fonts.scss

@@ -6,14 +6,14 @@ $base-line-height: 1.231 !default;
   /**
    * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
    */
-  
-  body { 
+
+  body {
     font-size: $size;
     font-family: $family;
     line-height: $line-height;
     *font-size: small;
-  } /* hack retained to preserve specificity */
-  select, input, textarea, button { font: 99% $family; }
+  } /* Hack retained to preserve specificity */
+  select, input, textarea, button { font:99% $family; }
 
   /* Normalize monospace sizing:
      en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */

data/stylesheets/html5-boilerplate/_handheld.scss

@@ -1,8 +1,8 @@
 * {
-  float: none;       // Screens are not big enough to account for floats
-  background: #fff;  // As much contrast as possible */
+  float: none;       /* Screens are not big enough to account for floats */
+  background: #fff;  /*  As much contrast as possible */
   color: #000;
 }
 
-// Slightly reducing font size to reduce need to scroll
+/* Slightly reducing font size to reduce need to scroll */
 body { font-size: 80%; }

data/stylesheets/html5-boilerplate/_helpers.scss

@@ -1,9 +1,16 @@
+@mixin clearfix {
+  zoom: 1;
+  
+  &:before, &:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
+  &:after { clear: both; }
+}
+
 @mixin html5-boilerplate-helpers {
   /**
    * Non-semantic helper classes: please define your styles before this section.
    */
-  
-  /* For image replacement. */
+
+  /* For image replacement */
   .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
 
   /* Hide for both screenreaders and browsers:
@@ -13,14 +20,14 @@
   /* Hide only visually, but have it available for screenreaders: by Jon Neal.
     www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
   .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: drupal.org/node/897638 */
+  .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. */
+  /* Hide visually and from screenreaders, but maintain layout */
   .invisible { visibility: hidden; }
 
   /* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
      j.mp/bestclearfix */
-  .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
-  .clearfix:after { clear: both; }
-  /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
-  .clearfix { zoom: 1; }
+  .clearfix { @include clearfix; }
 }

data/stylesheets/html5-boilerplate/_print.scss

@@ -7,10 +7,10 @@
   @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, a:visited { color: $font-color !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. */
+    .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; }

data/stylesheets/html5-boilerplate/_reset.scss

@@ -14,23 +14,23 @@
   article, aside, canvas, details, figcaption, figure,
   footer, header, hgroup, menu, nav, section, summary,
   time, mark, audio, video {
-   margin: 0;
-   padding: 0;
-   border: 0;
-   font-size: 100%;
-   font: inherit;
-   vertical-align: baseline;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
   }
 
   article, aside, details, figcaption, figure,
   footer, header, hgroup, menu, nav, section {
-   display: block;
+    display: block;
   }
 
   blockquote, q { quotes: none; }
 
   blockquote:before, blockquote:after,
-  q:before, q:after { content: ''; content: none; }
+  q:before, q:after { content: ""; content: none; }
 
   ins { background-color: #ff9; color: #000; text-decoration: none; }
 

data/stylesheets/html5-boilerplate/_styles.scss

@@ -12,32 +12,17 @@ $list-left-margin: 2em !default;
   /**
    * Minimal base styles.
    */
-  
-  body, select, input, textarea {
-    /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
-    color: $font-color;
-    /* Set your base font here, to apply evenly. */
-    font-family: $base-font-family;
-  }
-
-  /* Headers (h1, h2, etc) have no default font-size or margin. Define those yourself. */
-  h1,h2,h3,h4,h5,h6 { font-weight: bold; }
 
-  /* Always force a scrollbar in non-IE: */
+  /* Always force a scrollbar in non-IE */
   html { overflow-y: scroll; }
 
-
   /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
   a:hover, a:active { outline: none; }
 
-  a, a:active, a:visited { color: $link-color; }
-  a:hover { color: $link-hover-color; }
-
-
-  ul, ol { margin-left: $list-left-margin; }
+  ul, ol { margin-left: 2em; }
   ol { list-style-type: decimal; }
 
-  /* Remove margins for navigation lists. */
+  /* Remove margins for navigation lists */
   nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
 
   small { font-size: 85%; }
@@ -52,13 +37,13 @@ $list-left-margin: 2em !default;
 
   pre {
     /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
-    white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word;
+    white-space: pre; white-space: pre-wrap; word-wrap: break-word;
     padding: 15px;
   }
 
   textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
 
-  .ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */
+  .ie6 legend, .ie7 legend { margin-left: -7px; } 
 
   /* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
   input[type="radio"] { vertical-align: text-bottom; }
@@ -66,28 +51,28 @@ $list-left-margin: 2em !default;
   .ie7 input[type="checkbox"] { vertical-align: baseline; }
   .ie6 input { vertical-align: text-bottom; }
 
-  /* Hand cursor on clickable input elements. */
+  /* Hand cursor on clickable input elements */
   label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
 
-  /* Webkit browsers add a 2px margin outside the chrome of form elements. */
+  /* Webkit browsers add a 2px margin outside the chrome of form elements */
   button, input, select, textarea { margin: 0; }
 
-  /* Colors for form validity. */
+  /* Colors for form validity */
+  input:valid, textarea:valid   {  }
   input:invalid, textarea:invalid {
-    @include border-radius(1px);
-    @include box-shadow(red, 0, 0, 5px, 0);
+     border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
   }
   .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
 
 
-  /* These selection declarations have to be separate.
+  /* These selection declarations have to be separate
      No text-shadow: twitter.com/miketaylr/status/12228805301
-     Also: hot pink. */
-  ::-moz-selection{ background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
-  ::selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
+     Also: hot pink! */
+  ::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
+  ::selection { background:#FF5E99; color:#fff; text-shadow: none; }
 
-  /*  j.mp/webkit-tap-highlight-color */
-  a:link { -webkit-tap-highlight-color: $selected-background-color; }
+  /* j.mp/webkit-tap-highlight-color */
+  a:link { -webkit-tap-highlight-color: #FF5E99; }
 
   /* Make buttons play nice in IE:
      www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */

data/templates/project/files/404.html

@@ -1,22 +1,38 @@
 <!doctype html>
-<title>not found</title>
-
-<style>
-body { text-align: center;}
-h1 { font-size: 50px; }
-body { font: 20px Constantia, 'Hoefler Text',  "Adobe Caslon Pro", Baskerville, Georgia, Times, serif; color: #999; text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5); }
-::-moz-selection{ background:#FF5E99; color:#fff; }
-::selection { background:#FF5E99; color:#fff; } 
-details { display:block; }
-a { color: rgb(36, 109, 56); text-decoration:none; }
-a:hover { color: rgb(96, 73, 141) ; text-shadow: 2px 2px 2px rgba(36, 109, 56, 0.5); }
-span[frown] { transform: rotate(90deg); display:inline-block; color: #bbb; }
-</style>
-
-
-
-
-<details>
-  <summary><h1>Not found</h1></summary>
-  <p><span frown>:(</span></p>
-</details>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Page Not Found :(</title> 
+  <style>
+	  body { text-align: center;}
+	  h1 { font-size: 50px; text-align: center }
+	  span[frown] { transform: rotate(90deg); display:inline-block; color: #bbb; }
+	  body { font: 20px Constantia, 'Hoefler Text',  "Adobe Caslon Pro", Baskerville, Georgia, Times, serif; color: #999; text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5); }
+	  ::-moz-selection{ background:#FF5E99; color:#fff; }
+	  ::selection { background:#FF5E99; color:#fff; } 
+	  article {display:block; text-align: left; width: 500px; margin: 0 auto; }
+	  
+	  a { color: rgb(36, 109, 56); text-decoration:none; }
+	  a:hover { color: rgb(96, 73, 141) ; text-shadow: 2px 2px 2px rgba(36, 109, 56, 0.5); }
+  </style>
+</head>
+<body>
+     <article>
+	  <h1>Not found <span frown>:(</span></h1>
+	   <div>
+	       <p>Sorry, but the page you were trying to view does not exist.</p>
+	       <p>It looks like this was the result of either:</p>
+	       <ul>
+		   <li>a mistyped address</li>
+		   <li>an out-of-date link</li>
+	       </ul>
+	   </div>
+	    
+	    <script>
+	    var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),
+		GOOG_FIXURL_SITE = location.host;
+	    </script>
+	    <script src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
+     </article>
+</body>
+</html>