RailsApps/rails_layout RailsApps/rails_layout

  • Stars
    star
    569
  • Rank 78,347 (Top 2 %)
  • Language
    HTML
  • License
    MIT License
  • Created about 11 years ago
  • Updated over 6 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
RailsApps/rails_layout
github

RailsApps

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Generates Rails application layout files for various front-end frameworks.

RailsLayout Gem RailsLayout Gem

Use this gem to set up layout files for your choice of front-end framework:

  • Zurb Foundation 5.3
  • Bootstrap 4.0
  • Bootstrap 3.3

It also will set up Devise views with styling for Bootstrap or Foundation.

RailsLayout is a utility gem to use during development.

Other Tools

The RailsLayout gem is used by 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 which sets up a testing framework for Rails.

Join RailsApps

Support the RailsApps Project

If the RailsLayout gem is useful to you, please support the RailsApps project by purchasing our tutorials. The RailsApps project provides example applications, tutorials, and starter tools, including the RailsLayout gem.

Command Summary

Generate Application Layout, Navigation, and Flash Message Files

  • $ rails generate layout:install foundation5
  • $ rails generate layout:install foundation4
  • $ rails generate layout:install bootstrap4
  • $ rails generate layout:install bootstrap3
  • $ rails generate layout:install bootstrap2
  • $ rails generate layout:install simple
  • $ rails generate layout:install none

Add Links to the Navigation File

  • $ rails generate layout:navigation
  • $ rails generate layout:navigation bootstrap4

Generate Devise Views

  • $ rails generate layout:devise foundation5
  • $ rails generate layout:devise bootstrap3

Installing a Front-End Framework

Refer to instructions for:

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:

Zurb Foundation 5.3

gem 'foundation-rails'

See a note below about a necessary change to the config/application.rb file.

Zurb Foundation 4.0

gem 'compass-rails'
gem 'zurb-foundation'

Bootstrap 4.0

gem 'bootstrap', '~> 4.0.0.alpha3.1'

Bootstrap 3.3

gem 'bootstrap-sass'

Bootstrap 2.3

gem 'bootstrap-sass', '~> 2.3.2.2'

Use Bundler

Use Bundler to install the gem:

$ bundle install

Install the RailsLayout Gem

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

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).

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
  • bootstrap4 – Bootstrap 4.0
  • bootstrap3 – Bootstrap 3.3
  • bootstrap2 – Bootstrap 2.3
  • simple – simple layout
  • none – removes all changes

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

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 (except if you are using Bootstrap 4).

The _nav_links_for_auth.html.erb file is created if Devise or OmniAuth is installed.

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.

Additional Documentation

See these articles for information about how to set up the application layout:

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.

Learn Ruby on Rails

Zurb Foundation 5.3 Layout

To create layout files for use with Zurb Foundation 5.3:

$ rails generate layout:install foundation5

Use --force if you want to overwrite existing files:

$ rails generate layout:install foundation5 --force

See the files that are generated:

The RailsLayout gem will create the file:

and modify the file:

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
end

See issue 19 for an explanation.

Zurb Foundation 4.0 Layout

To create layout files for use with Zurb Foundation 4.0:

$ rails generate layout:install foundation4

Use --force if you want to overwrite existing files:

$ rails generate layout:install foundation4 --force

See the files that are generated:

The RailsLayout gem will create the file:

and modify the file:

Bootstrap 3.3 or 4.0 Layout

To create layout files for use with Bootstrap 4.0:

$ rails generate layout:install bootstrap4

To create layout files for use with Bootstrap 3.3:

$ rails generate layout:install bootstrap3

Use --force if you want to overwrite existing files:

$ rails generate layout:install bootstrap3 --force

See the files that are generated:

The RailsLayout gem will create the file:

and modify the file:

Bootstrap 2.3 Layout

To create layout files for use with Bootstrap 2.3:

$ rails generate layout:install bootstrap2

Use --force if you want to overwrite existing files:

$ rails generate layout:install bootstrap2 --force

See the files that are generated:

The RailsLayout gem will create the file:

and modify the file:

Generate a Simple Layout

To create a set of simple layout files:

$ rails generate layout:install simple

Use --force if you want to overwrite existing files:

$ rails generate layout:install simple --force

See the files that are generated:

The RailsLayout gem will create the file:

Reverting to None

To revert your application to a default application layout:

$ rails generate layout:install 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/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.

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 tool.

$ rails generate layout:navigation --force

Here’s an example of a file app/views/layouts/_nav_links_for_auth.html.erb appropriate for Devise:

<%# 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 'Edit account', edit_user_registration_path %></li>
  <li><%= link_to 'Sign out', destroy_user_session_path, :method=>'delete' %></li>
<% else %>
  <li><%= link_to 'Sign in', new_user_session_path %></li>
  <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 initialization files are found for Devise or OmniAuth.

The “layout:devise” Command

Devise is a gem for authentication and user management (signup, login, and related features). Devise provides a utility command rails generate devise:views. The Devise command creates view files for signup, login, and related features. However, the views generated by Devise lack CSS styling.

Use the RailsLayout gem to generate Devise views with styling for Bootstrap or Foundation.

  • $ rails generate layout:devise foundation5
  • $ rails generate layout:devise bootstrap3

The command will create (or replace) these files:

  • app/views/devise/sessions/new.html.erb
  • app/views/devise/passwords/new.html.erb
  • app/views/devise/registrations/edit.html.erb
  • app/views/devise/registrations/new.html.erb

Limitations

At this time, with the “layout:devise” command, only Foundation 5 or Bootstrap 3 are supported. Files are not generated for Haml or Slim.

Issues

Any issues? Please create an issue on GitHub. Reporting issues (and patching!) helps everyone.

Credits

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.

MIT License

MIT License

Copyright © 2013-2014 Daniel Kehoe

Useful Links

Getting Started Articles Tutorials
Ruby on Rails Analytics for Rails Rails Bootstrap
What is Ruby on Rails? Heroku and Rails Rails Foundation
Learn Ruby on Rails JavaScript and Rails RSpec Tutorial
Rails Tutorial Rails Environment Variables Rails Devise Tutorial
Ruby on Rails Tutorial for Beginners Git and GitHub with Rails Devise RSpec
Install Ruby on Rails Send Email with Rails Devise Bootstrap
Install Ruby on Rails – Mac OS X Haml and Rails Rails Membership Site with Stripe
Install Ruby on Rails – Ubuntu Rails Application Layout Rails Subscription Site with Recurly
Ruby on Rails – Nitrous.io HTML5 Boilerplate for Rails Startup Prelaunch Signup Application
Update Rails Example Gemfiles for Rails
Rails Composer Rails Application Templates
Rails Examples Rails Product Planning
Rails Starter Apps Rails Project Management

githalytics.com alpha

More Repositories

1

rails-composer

Rails Composer. The Rails generator on steroids for starter apps.
Ruby
3,379
star
2

rails_apps_composer

A gem with recipes to create Rails application templates for Rails starter apps.
Ruby
1,423
star
3

rails-stripe-membership-saas

An example Rails 4.2 app with Stripe and the Payola gem for a membership or subscription site.
Ruby
1,140
star
4

rails3-application-templates

Deprecated (no longer maintained). Use the Rails Composer tool instead.
Ruby
572
star
5

rails-bootstrap

Rails 5.1 starter app with the Bootstrap 4 front-end framework.
Ruby
523
star
6

rails-devise

Rails 5.0 starter app with Devise for authentication.
Ruby
513
star
7

rails3-bootstrap-devise-cancan

Outdated. See the rails-devise-pundit example app for Rails 4.1.
Ruby
491
star
8

rails-devise-pundit

Rails 5.0 starter app with Devise for authentication and Pundit for authorization.
Ruby
484
star
9

rails-prelaunch-signup

An example Rails 3.2 app for a web startup prelaunch site.
Ruby
446
star
10

rails3-devise-rspec-cucumber

An example Rails 3.2 app with Devise and RSpec and Cucumber.
Ruby
445
star
11

rails3-mongoid-devise

An example Rails 3.2 app with Mongoid for data, Devise for authentication.
Ruby
401
star
12

learn-rails

An example Rails 5.1 app to accompany the "Learn Ruby on Rails" book.
Ruby
392
star
13

rails3-mongoid-omniauth

An example Rails 3.2 app with Mongoid for data, OmniAuth for authentication. With a tutorial.
Ruby
287
star
14

rails-omniauth

Rails 5.0 starter app with OmniAuth for authentication.
Ruby
278
star
15

rails3-subdomains

An example Rails 3.2 app with subdomains and authentication using Devise. With a tutorial.
Ruby
272
star
16

rails-devise-roles

Rails 5.0 starter app with Devise and simple role-based authorization.
Ruby
187
star
17

rails-recurly-subscription-saas

An example Rails 3.2 app with recurring billing using Recurly for a membership or subscription site.
Ruby
171
star
18

rails-stripe-checkout

Rails 5.0 starter app for selling a product using Stripe Checkout
Ruby
100
star
19

rails_apps_testing

Set up a testing framework for a Rails application.
Ruby
98
star
20

rails-foundation

Rails 4.2 starter app with the Zurb Foundation front-end framework.
Ruby
53
star
21

rails-stripe-coupons

Rails 5.0 starter app for selling a product using Stripe JS
Ruby
49
star
22

rails-signup-download

Rails 5.0 starter app allows a visitor to sign up for an account and download a PDF file.
Ruby
42
star
23

rails-mailinglist-activejob

Rails 5.0 starter app using Active Job for background processing.
Ruby
36
star
24

rails_apps_pages

Add pages to a Rails application, including controllers, views, routing, and tests.
HTML
23
star
25

rails-challenges

Slideshow about the difficulties faced by Rails beginners.
11
star
26

rails-signup-thankyou

Rails 5.2 example application with signup, download, and thank you page.
Ruby
11
star
27

railsapps.github.com

Content for the RailsApps website.
HTML
10
star
28

mailinglist.railscomposer.com

Mailing list signup application for Rails Composer.
Ruby
2
star
29

talk-what-is-ror

Slideshow for a talk, "What is Ruby on Rails."
2
star
30

railsapps-org

Website for the RailsApps open source project.
HTML
1
star