RailsLayout is a utility gem to use during development.
Use it to set up your choice of front-end framework:
- Twitter Bootstrap 2.3
- Twitter Bootstrap 3.0
- Zurb Foundation 4.0
- Zurb Foundation 5.0
Add it to your Rails application Gemfile, then use the generator.
It will rename application.css to application.css.scss.
It will add:
- framework_and_overrides.css.scss
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
You can also generate a navigation links file suitable for use with Devise (the authentication gem).
You can generate layout files suitable for use with the following front-end frameworks:
simple– simple layoutbootstrap2– Twitter Bootstrap 2.3bootstrap3– Twitter Bootstrap 3.0foundation4– Zurb Foundation 4.0foundation5– Zurb Foundation 5.0none– removes all changes
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
Additionally, when the simple option is selected:
- app/assets/stylesheets/simple.css
Two navigation partials are created:
- app/views/layouts/_navigation_links.html.erb
- app/views/layouts/_navigation.html.erb
The first file contains no framework-specific styling. It is only a list of links. You can add additional links to this file as needed.
The second file contains framework-specific styling.
If you are using ERB for Rails views, the RailsLayout gem will generate ERB files.
If you are using Haml, the RailsLayout gem will generate Haml files instead.
The Rails Composer tool, an application template used to create starter applications, uses the RailsLayout gem to generate the layout files used in various starter applications. You can use Rails Composer to generate entire applications.
Look at the 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.
See these articles for information about how to set up the application layout:
Instead of following the instructions for Twitter Bootstrap or Zurb Foundation 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:
gem 'bootstrap-sass', '~> 2.3.2.2'
gem 'bootstrap-sass'
gem 'compass-rails', '~> 2.0.alpha.0' gem 'zurb-foundation'
gem 'foundation-rails'
Note: Check the status of these issues before using Foundation 5.0:
- Foundation 5 requires JavaScript included in BODY not HEAD
- Foundation 5 topbar incompatible with Rails Turbolinks
Use Bundler to install the gem:
$ bundle install
Add it to your Rails application Gemfile:
group :development do gem 'rails_layout' end
You 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' end
Use Bundler to install the gem:
$ bundle install
Generate application layout files for the framework you will use.
To create a set of simple layout files:
$ rails generate layout simple
Use --force if you want to overwrite existing files:
$ rails generate layout simple --force
See the files that are generated:
- app/views/layouts/application.html.erb
- app/views/layouts/_messages.html.erb
- app/views/layouts/_navigation.html.erb
- app/assets/stylesheets/simple.css
The RailsLayout gem will create the file:
To create layout files for use with Twitter Bootstrap 2.3:
$ rails generate layout bootstrap2
Use --force if you want to overwrite existing files:
$ rails generate layout bootstrap2 --force
See the files that are generated:
- app/views/layouts/application.html.erb
- app/views/layouts/_messages.html.erb
- app/views/layouts/_navigation.html.erb
The RailsLayout gem will create the file:
and modify the file:
To create layout files for use with Twitter Bootstrap 3.0:
$ rails generate layout bootstrap3
Use --force if you want to overwrite existing files:
$ rails generate layout bootstrap3 --force
See the files that are generated:
- app/views/layouts/application.html.erb
- app/views/layouts/_messages.html.erb
- app/views/layouts/_navigation.html.erb
The RailsLayout gem will create the file:
and modify the file:
To create layout files for use with Zurb Foundation 4.0:
$ rails generate layout foundation4
Use --force if you want to overwrite existing files:
$ rails generate layout foundation4 --force
See the files that are generated:
- app/views/layouts/application.html.erb
- app/views/layouts/_messages.html.erb
- app/views/layouts/_navigation.html.erb
The RailsLayout gem will create the file:
and modify the file:
To create layout files for use with Zurb Foundation 5.0:
$ rails generate layout foundation5
Use --force if you want to overwrite existing files:
$ rails generate layout foundation5 --force
See the files that are generated:
- app/views/layouts/application.html.erb
- app/views/layouts/_messages.html.erb
- app/views/layouts/_navigation.html.erb
The RailsLayout gem will create the file:
and modify the file:
To revert your application to a default application layout:
$ rails generate layout none
The 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/framework_and_overrides.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.
If you are using Devise for authentication, you can generate a navigation links partial containing links for Devise.
$ rails generate navigation --force
This creates a file app/views/layouts/_navigation_links.html.erb:
<%# add navigation links to this file %>
<li><%= link_to 'Home', root_path %></li>
<li><%= link_to 'About', page_path('about') %></li>
<li><%= link_to 'Contact', new_contact_path %></li>
<% if user_signed_in? %>
<li><%= link_to 'Logout', destroy_user_session_path, :method=>'delete' %></li>
<% else %>
<li><%= link_to 'Login', new_user_session_path %></li>
<% end %>
<% if user_signed_in? %>
<li><%= link_to 'Edit account', edit_user_registration_path %></li>
<% else %>
<li><%= link_to 'Sign up', new_user_registration_path %></li>
<% end %>
<% if user_signed_in? %>
<% if current_user.has_role? :admin %>
<li><%= link_to 'Admin', users_path %></li>
<% end %>
<% end %>
The full set of links will be created if the following files are found in your application:
- app/views/devise/sessions/new.html.erb
- app/views/devise/registrations/new.html.erb
- app/views/users/index.html.erb
These files will be present in your application if you have created custom views for Devise.
The rails generate navigation command is used to populate the navigation bar in starter applications created by the Rails Composer tool.
To see help messages:
$ rails generate layout --help
Any issues? Please create an issue on GitHub. Reporting issues (and patching!) helps everyone.
Daniel Kehoe maintains this gem as part of the RailsApps project.
Please see the CHANGELOG for a list of contributors.
Is the gem useful to you? Follow the project on Twitter: @rails_apps. I’d love to know you were helped out by the gem.
Copyright © 2013 Daniel Kehoe