sergii/boilerplate_layout_file.md

## boilerplate_layout_file.md

      
    Raw
  

              boilerplate_layout_file.md
            
          
    Example Application Layout File

This is an example or boilerplate layout file. Your layout file is the frame rendered around every view in your app (via the <%= yield %> erb tag at the bottom). Every Rails app has a layout file at app/views/layouts/application.html.erb.
What's Included?

This layout file includes:

Bootstrap 3.2.0 (both stylesheet/js links and the body tag has a 'container' class)
Turbolinks enables (a Rails 4 default)
Flash message boilerplate to show flash messages and use the correct bootstrap classes.

A Word on Flash Messages

This code iterates through the flash messages hash, using the key names in the hash to make HTML divs with the class alert alert-#{key_name}. This means your key names must follow the conventions from Bootstrap to be properly styled.
Bootstrap 3 includes these types of alerts: success, info, warning, danger. You should only use those keys when adding an array to the flash hash. More info here: Bootstrap Alerts
Also, keep in mind this implementation requires the values inside the flash hash be Arrays of Strings. So if you want to pass a single String, like: You have successfully logged in!, you need to do this:
  flash[:success] = ['You have successfully logged in!']
When working with ActiveRecord models, you can pass all the errors to the user like this:
  flash[:danger] = @user.errors.full_messages # .full_messages returns an Array of Strings
application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Woodstockly</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <%= csrf_meta_tags %>
</head>
<body class='container'>

  <!-- Begin snippet for flash messages -->
  <% flash.each do |key, array_of_strings| %>
    <div class='alert alert-<%= key %>' role='alert'>
      <ul>
        <% array_of_strings.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
  <!-- End snippet for flash messages -->

  <!-- Renders the view file for this action -->
  <%= yield %>
  <!-- Done rendering the view. -->

  <!-- You could potentially put some 'footer' stuff down here. -->

</body>
</html>