h1. !http://railsapps.github.io/images/rails-36x36.jpg(RailsLayout Gem)! RailsLayout Gem Use this gem to set up layout files for your choice of front-end framework: * Zurb Foundation 5.3 * Bootstrap 3.3 It also will set up "Devise":https://github.com/plataformatec/devise views with styling for Bootstrap or Foundation. RailsLayout is a utility gem to use during development. h4. Other Tools The RailsLayout gem is used by "Rails Composer":http://railsapps.github.io/rails-composer/ tool, an application template used to create starter applications. You can use Rails Composer to generate entire applications. If you like the RailsLayout gem, you might be interested in the "RailsApps Testing gem":https://github.com/RailsApps/rails_apps_testing which sets up a testing framework for Rails. h4. !http://railsapps.github.io/images/join/join-railsapps.png(Join RailsApps)!:http://railsapps.github.io/ h4. Support the RailsApps Project If the RailsLayout gem is useful to you, please "support the RailsApps project":http://railsapps.github.io/ by purchasing our tutorials. The RailsApps project provides example applications, tutorials, and starter tools, including the RailsLayout gem. h2. Command Summary h4. Generate Application Layout, Navigation, and Flash Message Files * @$ rails generate layout:install foundation5@ * @$ rails generate layout:install foundation4@ * @$ rails generate layout:install bootstrap3@ * @$ rails generate layout:install bootstrap2@ * @$ rails generate layout:install simple@ * @$ rails generate layout:install none@ h4. Add Links to the Navigation File * @$ rails generate layout:navigation@ h4. Generate Devise Views * @$ rails generate layout:devise foundation5@ * @$ rails generate layout:devise bootstrap3@ h2. Installing a Front-End Framework Refer to instructions for: * "Foundation and Rails":http://railsapps.github.io/rails-foundation.html * "Bootstrap and Rails":http://railsapps.github.io/twitter-bootstrap-rails.html In summary, to install a front-end framework, add the gems you need. Then use the RailsLayout gem. It will set up your assets files. Add the gems you need to your Rails application Gemfile: h4. Zurb Foundation 5.3
gem 'foundation-rails'See a note below about a necessary change to the *config/application.rb* file. h4. Zurb Foundation 4.0
gem 'compass-rails' gem 'zurb-foundation'h4. Bootstrap 3.3
gem 'bootstrap-sass'h4. Bootstrap 2.3
gem 'bootstrap-sass', '~> 2.3.2.2'h4. Use Bundler Use Bundler to install the gem:
$ bundle installh2. Install the RailsLayout Gem Add it to your Rails application Gemfile:
group :development do gem 'rails_layout' endYou don't need the gem deployed to production, so put it in the @development@ group. If you want to use a newer unreleased version from GitHub:
group :development do gem 'rails_layout', github: 'RailsApps/rails_layout' endUse Bundler to install the gem:
$ bundle installh2. The "layout:install" Command The command will rename *application.css* to *application.css.scss*. It will add: * *1st_load_framework.css.scss* The Rails asset pipeline loads asset files in alphabetical order (unless the assets are specified explicitly in the manifest file). The file is named @1st_load_framework.css.scss@ so the framework will be loaded first before any custom CSS files added by the developer. And modify the JavaScript asset file: * *application.js* It will set up a default application layout. It creates partials for: * Rails flash messages * navigation links Additionally, if Devise or OmniAuth is present, the command will add Sass mixins to accommodate forms. The Sass mixins add form styling to be used with either Bootstrap or Foundation (so we don't have to maintain separate views for each front-end framework). h4. Supported Frameworks You can generate layout files suitable for use with the following front-end frameworks: * @foundation5@ - Zurb Foundation 5.3 * @foundation4@ - Zurb Foundation 4.0 * @bootstrap3@ - Bootstrap 3.3 * @bootstrap2@ - Bootstrap 2.3 * @simple@ - simple layout * @none@ - removes all changes h4. Generated Files The RailsLayout gem generates application layout files: * app/views/layouts/application.html.erb * app/views/layouts/_messages.html.erb * app/views/layouts/_navigation.html.erb * app/views/layouts/_navigation_links.html.erb If Devise or OmniAuth is installed, there will be an additional file: * app/views/layouts/_nav_links_for_auth.html.erb Additionally, when the @simple@ option is selected: * app/assets/stylesheets/simple.css h4. Note About the Navigation Partials The *_navigation.html.erb* file contains framework-specific styling. Separating the files makes it easy to change the front-end framework without disturbing the links. The *_navigation_links.html.erb* file is only a list of links. You can add additional links to this file as needed. It contains no framework-specific styling. The *_nav_links_for_auth.html.erb* file is created if Devise or OmniAuth is installed. h4. Support for ERB, Haml, or Slim If you are using ERB for Rails views, the RailsLayout gem will generate ERB files. If you are using Haml or Slim, the RailsLayout gem will generate Haml or Slim files instead. h4. Additional Documentation See these articles for information about how to set up the application layout: * "*Rails Application Layout*":http://railsapps.github.io/rails-default-application-layout.html * "*Rails and Bootstrap*":http://railsapps.github.io/twitter-bootstrap-rails.html * "*Rails and Foundation*":http://railsapps.github.io/rails-foundation.html Look at the "Learn Rails":https://github.com/RailsApps/learn-rails example application to see how the generated files from the RailsLayout gem are used. You'll find details about the example application in the book "Learn Ruby on Rails":http://learn-rails.com/learn-ruby-on-rails.html. !http://railsapps.github.io/images/learn-rails-cover-130x161.jpg(Learn Ruby on Rails)!:http://learn-rails.com/learn-ruby-on-rails.html h3. Zurb Foundation 5.3 Layout To create layout files for use with Zurb Foundation 5.3:
$ rails generate layout:install foundation5Use @--force@ if you want to overwrite existing files:
$ rails generate layout:install foundation5 --forceSee the files that are generated: * "app/views/layouts/application.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/foundation5-application.html.erb * "app/views/layouts/_messages.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/foundation4-messages.html.erb * "app/views/layouts/_navigation.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/foundation5-navigation.html.erb The RailsLayout gem will create the file: * "app/assets/stylesheets/1st_load_framework.css.scss":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/foundation5_and_overrides.css.scss and modify the file: * "app/assets/javascripts/application.js":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/foundation5-application.js h4. config/application.rb The rails_layout gem will make a necessary change to the *config/application.rb* file. It will add:
module RailsFoundation class Application < Rails::Application . . . # For Foundation 5 config.assets.precompile += %w( vendor/modernizr ) end endSee "issue 19":https://github.com/RailsApps/rails_layout/issues/19 for an explanation. h3. Zurb Foundation 4.0 Layout To create layout files for use with Zurb Foundation 4.0:
$ rails generate layout:install foundation4Use @--force@ if you want to overwrite existing files:
$ rails generate layout:install foundation4 --forceSee the files that are generated: * "app/views/layouts/application.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/foundation4-application.html.erb * "app/views/layouts/_messages.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/foundation4-messages.html.erb * "app/views/layouts/_navigation.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/foundation4-navigation.html.erb The RailsLayout gem will create the file: * "app/assets/stylesheets/1st_load_framework.css.scss":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/foundation4_and_overrides.css.scss and modify the file: * "app/assets/javascripts/application.js":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/foundation4-application.js h3. Bootstrap 3.3 Layout To create layout files for use with Bootstrap 3.3:
$ rails generate layout:install bootstrap3Use @--force@ if you want to overwrite existing files:
$ rails generate layout:install bootstrap3 --forceSee the files that are generated: * "app/views/layouts/application.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/bootstrap3-application.html.erb * "app/views/layouts/_messages.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/bootstrap3-messages.html.erb * "app/views/layouts/_navigation.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/bootstrap3-navigation.html.erb The RailsLayout gem will create the file: * "app/assets/stylesheets/1st_load_framework.css.scss":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/bootstrap3_and_overrides.css.scss and modify the file: * "app/assets/javascripts/application.js":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/bootstrap-application.js h3. Bootstrap 2.3 Layout To create layout files for use with Bootstrap 2.3:
$ rails generate layout:install bootstrap2Use @--force@ if you want to overwrite existing files:
$ rails generate layout:install bootstrap2 --forceSee the files that are generated: * "app/views/layouts/application.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/bootstrap2-application.html.erb * "app/views/layouts/_messages.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/bootstrap2-messages.html.erb * "app/views/layouts/_navigation.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/bootstrap2-navigation.html.erb The RailsLayout gem will create the file: * "app/assets/stylesheets/1st_load_framework.css.scss":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/bootstrap2_and_overrides.css.scss and modify the file: * "app/assets/javascripts/application.js":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/bootstrap-application.js h3. Generate a Simple Layout To create a set of simple layout files:
$ rails generate layout:install simpleUse @--force@ if you want to overwrite existing files:
$ rails generate layout:install simple --forceSee the files that are generated: * "app/views/layouts/application.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/simple-application.html.erb * "app/views/layouts/_messages.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/simple-messages.html.erb * "app/views/layouts/_navigation.html.erb":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/simple-navigation.html.erb * "app/assets/stylesheets/simple.css":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/simple.css The RailsLayout gem will create the file: * "app/assets/stylesheets/application.css.scss":https://github.com/RailsApps/rails_layout/blob/master/lib/generators/layout/install/templates/application.css.scss h3. Reverting to None To revert your application to a default application layout:
$ rails generate layout:install noneThe RailsLayout gem will remove any files it may have added: * app/views/layouts/_messages.html.erb * app/views/layouts/_navigation.html.erb * app/assets/stylesheets/simple.css * app/assets/stylesheets/bootstrap_and_overrides.css.scss * app/assets/stylesheets/foundation_and_overrides.css.scss * app/assets/stylesheets/1st_load_framework.css.scss Additionally, it will restore these files to the default versions: * app/views/layouts/application.html.erb * app/assets/javascripts/application.js The file *app/assets/stylesheets/application.css.scss* will contain a CSS rule but you can ignore it or remove it. h2. The "layout:navigation" Command If you are using Devise or OmniAuth for authentication, you can generate a navigation links partial containing appropriate links. This command is used to populate the navigation bar in starter applications created by the "Rails Composer":http://railsapps.github.io/rails-composer/ tool.
$ rails generate layout:navigation --forceHere's an example of a file *app/views/layouts/_nav_links_for_auth.html.erb* appropriate for Devise:
<%# add navigation links to this file %>