Setup html5-boilerplate(gem) with Rails 3.1
Environment:
- ruby:
ruby 1.9.2p180 (2011-02-18 revision 30909) [i686-linux]
- rails
3.1.0
- generated scaffold:
post title:string body:text
Installation:
As referenced in readme we should add following gems to our Gemfile, but some in assets group:
gem "haml"
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', " ~> 3.1.0"
gem 'coffee-rails', "~> 3.1.0"
gem 'uglifier'
gem "compass", '~> 0.12.alpha.0'
gem 'html5-boilerplate', :group => :production, :git => 'git://github.com/sporkd/compass-html5-boilerplate.git'
end
and run bundle install
.
Then backup existing application layout and install all stuff:
mv app/views/layouts/application.html.erb app/views/layouts/application.html.old
bundle exec compass init rails -r html5-boilerplate -u html5-boilerplate --force
Fixing javascripts:
Now move files in a right places:
mkdir -p app/assets/javascripts/tools
mv public/javascripts/modernizr.min.js app/assets/javascripts/tools
mv public/javascripts/respond.min.js app/assets/javascripts/tools
mv public/javascripts/plugins.js app/assets/javascripts
remove unneeded files:
rm public/javascripts/jquery.js
rm public/javascripts/jquery.min.js
rm public/javascripts/rails.js # used to provide UJS, but it is already provided by jquery-rails gem
create app/assets/javascripts/modernizr+respond.js
file with following content:
//= require tools/modernizr.min
//= require tools/respond.min
Modify app/views/layouts/_head.html.haml
file:
%meta{ :charset => "utf-8" }/
-# Always force latest IE rendering engine (even in intranet) & Chrome Frame
-# Remove this if you use the .htaccess
%meta{ "http-equiv" => "X-UA-Compatible", :content => "IE=edge,chrome=1" }/
%title
== #{ controller.controller_name.titleize } - #{ controller.action_name.titleize }
%meta{ :name => "description", :content => "" }/
%meta{ :name => "author", :content => "" }/
-# Mobile viewport optimized: j.mp/bplateviewport
%meta{ :name => "viewport", :content => "width=device-width, initial-scale=1.0" }/
-# Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons
-# Pass in a stylesheet_partial to render inside your head
- if local_assigns[:stylesheet_partial]
= render :partial => local_assigns[:stylesheet_partial]
-# All JavaScript at the bottom, except for Modernizr and Respond.
-# Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
= javascript_include_tag 'modernizr+respond'
= csrf_meta_tag
Modify app/views/layouts/_javascripts.html.haml
file:
-# Grab Google CDN's jQuery, with a protocol relative URL
-# Looks for google_api_key first in ENV['GOOGLE_API_KEY'] then in config/google.yml
-# remote_jquery and local_jquery helpers use minified jquery unless Rails.env is development
- if !google_api_key.blank?
= javascript_include_tag "//www.google.com/jsapi?key=#{google_api_key}"
:javascript
google.load(#{ remote_jquery("1.6") });
- else
= javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/#{ local_jquery("1.6") }"
-# fall back to local jQuery if necessary
:javascript
window.jQuery || document.write("#{escape_javascript(javascript_include_tag('jquery'))}")
= javascript_include_tag 'application'
-# Append your own using content_for :javascripts
= yield :javascripts
-# asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet
-# Looks for google_account_id first in ENV['GOOGLE_ACCOUNT_ID'] then in config/google.yml
- if !google_account_id.blank?
:javascript
var _gaq=[["_setAccount","#{google_account_id}"],["_trackPageview"],["_trackPageLoadTime"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
and app/assets/javascripts/application.js
:
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require plugins
//= require jquery_ujs
and finally add this line to config/environments/production.rb
:
config.assets.precompile += %w( jquery.js modernizr+respond.js )
and you should be done with javascripts.
Fixing stylesheets:
move generated stylesheets:
mv app/stylesheets/* app/assets/stylesheets
modify app/assets/stylesheets/application.css
:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require style
*/
and modify app/views/layouts/_stylesheets.html.haml
:
-# CSS: implied media="all"
= stylesheet_link_tag 'application', :media => 'all'
-# Append your own using content_for :stylesheets
= yield :stylesheets
And restart the server
this works for me in development and production.