html5-rails 0.0.7 → 0.1.0

data/README.md

@@ -4,8 +4,6 @@ Html5 for Rails
 Html5 for Rails projects based on [Html5 Boilerplate](http://html5boilerplate.com)
 by Paul Irish, Divya Manian and many other [fine folks](https://github.com/h5bp/html5-boilerplate/contributors).
 
-(Also, a rewrite of compass-html5-boilerplate that adds Rails asset pipeline integration).
-
 Installation
 =========================
 
@@ -16,17 +14,18 @@ group :assets do
   gem 'sass-rails'
   gem 'coffee-rails'
   gem 'uglifier'
-  gem 'compass-rails'
+
   gem 'compass-h5bp'
 end
 
-# Optional - to generate haml
-#gem 'haml-rails'
-# Optional - to generate slim
-#gem 'slim-rails'
-
 gem 'jquery-rails'
 gem 'html5-rails'
+
+# Optional: to generate haml
+# gem 'haml-rails'
+
+# Optional: to generate slim
+# gem 'slim-rails'
 ```
 
 ##### 2. Install your bundle
@@ -45,21 +44,21 @@ $ rails generate html5:install
 
       create  config/compass.rb
       create  config/html5_rails.yml
-      create  app/views/layouts/application.html.erb
+      create  app/views/layouts/application.html.(erb|haml|slim)
       create  app/views/application
-      create  app/views/application/_footer.html.erb
-      create  app/views/application/_head.html.erb
-      create  app/views/application/_header.html.erb
-      create  app/views/application/_chromeframe.html.erb
+      create  app/views/application/_footer.html.(erb|haml|slim)
+      create  app/views/application/_head.html.(erb|haml|slim)
+      create  app/views/application/_header.html.(erb|haml|slim)
+      create  app/views/application/_chromeframe.html.(erb|haml|slim)
+       exist  app/assets/javascripts
       insert  app/assets/javascripts/application.js
         gsub  app/assets/javascripts/application.js
       create  app/assets/javascripts/polyfills.js
       remove  app/assets/stylesheets/application.css
-      create  app/assets/stylesheets/_variables.css.scss
-      create  app/assets/stylesheets/application.css.scss
       create  app/assets/stylesheets/application
-      create  app/assets/stylesheets/application/chromeframe.css.scss
-      create  app/assets/stylesheets/application/document.css.scss
+      create  app/assets/stylesheets/application/index.css.scss
+      create  app/assets/stylesheets/application/variables.css.scss
+      create  app/assets/stylesheets/application/layout.css.scss
       create  app/assets/stylesheets/application/media_queries.css.scss
 
 ##### 4. And you're done!
@@ -78,6 +77,11 @@ $ rails generate html5:partial --help
 $ rails generate html5:assets --help
 ```
 
+Google Analytics
+=========================
+
+By default your Google Analytics code snippet will be hidden until you set your Google Account ID.
+You can do this by either setting `ENV['GOOGLE_ACCOUNT_ID']` or `google_account_id` in config/html5_rails.yml.
 
 Notes
 ==========
@@ -86,13 +90,10 @@ Notes
 included in your assets group for development and asset precompiling to work.
 
 [2] If you use `--template-engine=haml` (or `haml-rails` gem), the install
-generator will remove your application.html.erb layout so that
+generator will prompt to remove your application.html.erb layout so that
 application.html.haml will be used instead.
 
-[3] If you're upgrading from compass-html5-boilerplate you need to
-remove config/compass.rb before you run the generators.
-
-[4] For the time being, you will want to add the following line to
+[3] For the time being, you will want to add the following line to
 config/production.rb so that polyfills are precompiled on deploy:
 
 `config.assets.precompile += %w( polyfills.js )`

data/app/assets/javascripts/application.js

@@ -6,4 +6,4 @@
 //
 //= require jquery
 //= require jquery_ujs
-//= require h5bp
+//= require h5bp

data/app/assets/javascripts/polyfills.js

@@ -3,4 +3,4 @@
 //
 // polyfill (n): a JavaScript shim that replicates the standard API for older browsers.
 //
-//= require modernizr.min
+//= require modernizr.min

data/app/views/application/_flashes.html.erb

@@ -1,9 +1,7 @@
 <div id="flash">
   <% flash.each do |key, value| %>
-    <div class="wrapper">
-      <div title="<%= key.to_s.humanize %>" class="<%= key %>">
-        <p><%= value %></p>
-      </div>
+    <div title="<%= key.to_s.humanize %>" class="<%= key %>">
+      <p><%= value %></p>
     </div>
   <% end %>
 </div>

data/app/views/application/_footer.html.erb

@@ -2,4 +2,4 @@
   <small class="copyright">
     Dummy, Copyright &copy; <%= Date.today.year %>
   </small>
-</footer>
+</footer>

data/app/views/application/_head.html.erb

@@ -1,22 +1,14 @@
 <head>
   <meta charset="utf-8">
-
-  <%# Use the .htaccess and remove these lines to avoid edge case issues. %>
-  <%# More info: h5bp.com/b/378 %>
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-  <title></title>
-  <meta name="description" content="">
+  <title><%= "#{ controller.controller_name.titleize } - #{ controller.action_name.titleize }" %></title>
 
-  <%# Mobile viewport optimized: h5bp.com/viewport %>
+  <meta name="description" content="">
   <meta name="viewport" content="width=device-width">
 
   <%= render "stylesheets" %>
-
-  <%# More ideas for your <head> here: h5bp.com/d/head-Tips %>
-
-  <%# All JavaScript at the bottom, except polyfills %>
   <%= javascript_include_tag "polyfills" %>
 
   <%= csrf_meta_tag %>
-</head>
+</head>

data/app/views/application/_header.html.erb

@@ -1,3 +1,3 @@
 <header id="header">
   <h1>Dummy</h1>
-</header>
+</header>

data/app/views/application/_javascripts.html.erb

@@ -3,7 +3,7 @@
 <%# Append your own using content_for :javascripts %>
 <%= yield :javascripts %>
 
-<%# asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet %>
+<%# Google Analytics %>
 <%# Looks for google_account_id first in ENV['GOOGLE_ACCOUNT_ID'] then in config/html5_rails.yml %>
 <% if !google_account_id.blank? %>
   <script>
@@ -14,4 +14,4 @@
       s.parentNode.insertBefore(g,s)}(document,'script'));
     //]]>
   </script>
-<% end %>
+<% end %>

data/app/views/application/_stylesheets.html.erb

@@ -1,4 +1,4 @@
 <%= stylesheet_link_tag 'application', :media => nil %>
 
 <%# Append your own using content_for :stylesheets %>
-<%= yield :stylesheets %>
+<%= yield :stylesheets %>

data/app/views/layouts/application.html.erb

@@ -1,20 +1,17 @@
 <!DOCTYPE html>
-<%# http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither %>
 <%= html_tag :class => "no-js" %>
   <%= render "head" %>
 
-  <body class="pages">
+  <body class="<%= controller.controller_name %>">
     <%= render "chromeframe" %>
     <%= render "header" %>
+    <%= render "flashes" %>
 
-    <div id="main" role="main">
-      <%= render "flashes" %>
-      <%= yield %>
-    </div>
+    <%= yield %>
 
     <%= render "footer" %>
 
     <%# Javascript at the bottom for fast page loading %>
     <%= render "javascripts" %>
   </body>
-</html>
+</html>

data/html5-rails.gemspec

@@ -15,7 +15,7 @@ Gem::Specification.new do |s|
   s.rubyforge_project = "html5-rails"
 
   s.add_dependency "jquery-rails",  ">= 2.0"
-  s.add_dependency "railties",      "~> 3.1"
+  s.add_dependency "railties",      ">= 3.2"
   s.add_dependency "thor",          "~> 0.14"
 
   s.add_development_dependency "compass-h5bp", "~> 0.1.0"

data/lib/generators/html5/assets/USAGE

@@ -1,11 +1,14 @@
 Description:
-    Generates CSS assets with compass imports and partials.
+    Generates javascript and stylesheet assets for a named resource.
 
 Example:
     rails generate html5:assets admin
 
     This will create:
-        app/assets/stylesheets/admin.css.scss
-        app/assets/stylesheets/_defaults.css.scss
-        app/assets/stylesheets/admin/document.css.scss
+        app/assets/javascripts/admin.js
+        app/assets/javascripts/polyfills.js
+        app/assets/stylesheets/admin
+        app/assets/stylesheets/admin/index.css.scss
+        app/assets/stylesheets/admin/variables.css.scss
+        app/assets/stylesheets/admin/layout.css.scss
         app/assets/stylesheets/admin/media_queries.css.scss

data/lib/generators/html5/assets/assets_generator.rb

@@ -9,39 +9,40 @@ module Html5
 
       argument :name, :type => :string,
                       :required => false,
-                      :default => "application"
+                      :default => 'application'
 
       def generate_javascripts
-        asset_path = "app/assets/javascripts/#{ asset_name }.js"
-        if File.exist?(asset_path) && File.read(asset_path) =~ /require jquery_ujs$/
-          inject_into_file asset_path, :after => "require jquery_ujs" do
+        prefix = File.join('app', 'assets', 'javascripts')
+        manifest = File.join(prefix, File.basename(asset_path) + '.js')
+
+        empty_directory File.join(prefix, File.dirname(asset_path))
+
+        if File.exist?(manifest) && File.read(manifest) =~ /require jquery_ujs$/
+          inject_into_file manifest, :after => "require jquery_ujs" do
             "\n//= require h5bp"
           end
-          gsub_file asset_path, /^\/\/= require_tree \.(\\n)?/, ""
+          gsub_file manifest, /^\/\/= require_tree \.(\\n)?/, ''
         else
-          template "javascripts/application.js", asset_path
+          template "javascripts/application.js", manifest
         end
-        template "javascripts/polyfills.js", "app/assets/javascripts/polyfills.js"
+
+        template "javascripts/polyfills.js", File.join(prefix, 'polyfills.js')
       end
 
       def generate_stylesheets
-        if file_path == "application"
-          remove_file "app/assets/stylesheets/application.css"
-        end
+        prefix = File.join('app', 'assets', 'stylesheets')
 
-        file_ext = ".css.scss"
-        copy_file "stylesheets/_variables#{ file_ext }", "app/assets/stylesheets/_variables#{ file_ext }"
-        template "stylesheets/application#{ file_ext }", File.join("app/assets/stylesheets", asset_name + file_ext)
-      end
+        if file_path == 'application'
+          remove_file File.join(prefix, 'application.css')
+        end
 
-      def generate_stylesheet_partials
-        if stylesheet_partials.any?
-          empty_directory File.join("app/assets/stylesheets", asset_name)
+        if stylesheets.any?
+          empty_directory File.join(prefix, asset_path)
         end
 
-        file_ext = ".css.scss"
-        stylesheet_partials.each do |partial|
-          template File.join("stylesheets/application", partial + file_ext), File.join("app/assets/stylesheets", asset_name, partial + file_ext)
+        stylesheets.each do |stylesheet|
+          file_name = stylesheet + ".css.scss"
+          template "stylesheets/application/#{ file_name }", File.join(prefix, asset_path, file_name)
         end
       end
 
@@ -51,13 +52,13 @@ module Html5
 
     protected
 
-      def asset_name
-        (class_path + [file_name]).join('_')
+      def asset_path
+        File.join(class_path + [file_name])
       end
 
-      def stylesheet_partials
-        %w(chromeframe document media_queries)
+      def stylesheets
+        %w(index variables layout media_queries)
       end
     end
   end
-end
+end

data/lib/generators/html5/assets/templates/javascripts/application.js

@@ -6,4 +6,4 @@
 //
 //= require jquery
 //= require jquery_ujs
-//= require h5bp
+//= require h5bp

data/lib/generators/html5/assets/templates/javascripts/polyfills.js

@@ -7,4 +7,4 @@
 //
 // polyfill (n): a JavaScript shim that replicates the standard API for older browsers.
 //
-//= require modernizr.min
+//= require modernizr.min

data/lib/generators/html5/assets/templates/stylesheets/{application.css.scss → application/index.css.scss}

@@ -1,33 +1,29 @@
 // This file was generated by html5-rails
 // https://github.com/sporkd/html5-rails
 // Upgrade with: $ rails generate html5:install
+//
+// <%= file_path %> styles
 
 //-----------------------------------------
-// Variables come first
+// Variables
 //-----------------------------------------
-@import "variables";
+@import 'variables';
 
 //-----------------------------------------
-// Imports
+// Vendor imports
 //-----------------------------------------
-// @import "compass/css3";
-@import "h5bp";
+// @import 'compass/css3';
+@import 'h5bp';
 
 //-----------------------------------------
-// Prepend includes
+// Vendor includes
 //-----------------------------------------
 @include h5bp-normalize;
 @include h5bp-main;
+@include h5bp-helpers;
 
 //-----------------------------------------
-// Custom <%= file_path %> partials
-//-----------------------------------------
-@import "<%= file_path %>/chromeframe";
-@import "<%= file_path %>/document";
-@import "<%= file_path %>/media_queries"; // Media queries last
-
-//-----------------------------------------
-// Append includes
+// Custom imports
 //-----------------------------------------
-@include h5bp-helpers;
-@include h5bp-media;
+@import 'layout';
+@import 'media_queries';

data/lib/generators/html5/assets/templates/stylesheets/application/{document.css.scss → layout.css.scss}

@@ -3,8 +3,8 @@
 // Upgrade with: $ rails generate html5:install
 
 //-----------------------------------------
-// Document styles
+// Layout styles
 //-----------------------------------------
 
 html {}
-body {}
+body {}

data/lib/generators/html5/assets/templates/stylesheets/application/media_queries.css.scss

@@ -8,4 +8,18 @@
 
 @media only screen and (min-width: 35em) {
   // Style adjustments for viewports that meet the condition
-}
+}
+
+@media print,
+       (-o-min-device-pixel-ratio: 5/4),
+       (-webkit-min-device-pixel-ratio: 1.25),
+       (min-resolution: 120dpi) {
+  // Style adjustments for high resolution devices
+}
+
+// Print styles.
+// Inlined to avoid required HTTP connection: h5bp.com/r
+
+@media print {
+  @include h5bp-media-print;
+}

data/lib/generators/html5/assets/templates/stylesheets/{_variables.css.scss → application/variables.css.scss}

@@ -17,4 +17,4 @@ $link-hover-color: #06e;
 $link-visited-color: #551a8b;
 $selected-font-color: #fff;
 $selected-background-color: #ff5e99;
-$invalid-background-color: #f0dddd;
+$invalid-background-color: #f0dddd;

data/lib/generators/html5/install/USAGE

@@ -7,3 +7,17 @@ Example:
     This will create:
         config/compass.rb
         config/html5_rails.yml
+        app/views/layouts/application.html.(erb|haml|slim)
+        app/views/layouts/application.html.(erb|haml|slim)
+        app/views/application
+        app/views/application/_footer.html.(erb|haml|slim)
+        app/views/application/_head.html.(erb|haml|slim)
+        app/views/application/_header.html.(erb|haml|slim)
+        app/views/application/_chromeframe.html.(erb|haml|slim)
+        app/assets/javascripts/application.js
+        app/assets/javascripts/polyfills.js
+        app/assets/stylesheets/application
+        app/assets/stylesheets/application/index.css.scss
+        app/assets/stylesheets/application/variables.css.scss
+        app/assets/stylesheets/application/layout.css.scss
+        app/assets/stylesheets/application/media_queries.css.scss

data/lib/generators/html5/install/install_generator.rb

@@ -34,4 +34,4 @@ module Html5
       end
     end
   end
-end
+end

data/lib/generators/html5/install/templates/README

@@ -1,6 +1,6 @@
 ===============================================================================
 
-You are now on html5-rails. Really, that's it for now.
+You've successfully installed html5-rails!
 
 If want to genrate additional layouts, just run:
 $ rails g html5:layout my_new_layout
@@ -8,4 +8,4 @@ $ rails g html5:layout my_new_layout
 Or if want to customize your other shared partials:
 $ rails g html5:partial --all
 
-===============================================================================
+===============================================================================