The Foundation framework by Zurb is a popular alternative to the Bootstrap Framework. It provides a clean, responsive, and elegant look and feel. This article will show you how to begin utilizing it in your Ruby on Rails Application.

First, we need to include the foundation-rails gem in our application. Add the code below to your gemfile.

Gemfile:

gem 'foundation-rails', '~> 5.0.2.0'

Now run a bundle install to install it.

Terminal Commands:

bundle install

There are two methods of utilizing Foundation. The first method is ideal for new projects. This method will change and overwrite certain files in your application. However this method requires much less effort to install. To use this method simply type the command below. This command will add a new scss file to your project, modify your application.css file, and overwrite your application layout.

Terminal Commands:

rails g foundation:install

The second method requires a bit more work, but gives you complete control over adding Foundation to your project. First, modify your application.css file so that it looks something like the code listed below.

app/assets/stylesheets/application.css:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * 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 foundation_and_overrides

 *= require_tree .
 */

Next, create a new scss file called foundation_and_overrides.scss and add the code listed below.

app/assets/stylesheets/foundation_and_overrides.scss:

@import "foundation";

Next, modify your application.js file so that it looks something like the code listed below.

app/assets/javascripts/application.js:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .

$(function(){ $(document).foundation(); });

Next, add the following lines to the head section of your application layout.


<%= javascript_include_tag "vendor/modernizr" %>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

When you are finished, your application layout should look something like this:

app/views/layouts/application.html.erb:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>

    <%= stylesheet_link_tag    "application" %>

    <%= csrf_meta_tags %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  </head>

  <body>

    <%= yield %>
    
  </body>
</html>

Excellent, now that Foundation is installed, we can tweak a number of settings in order to customize Foundation to fit our needs. The automatic install includes a settings file that you can tweak at will. For manual installs, the list of settings can be found in this file. Simply copy the contents of the file and paste it above the @import 'foundation'; line in your app/assets/stylesheets/foundation_and_overrides.scss file. You'll notice that everything is commented out. To tweak a setting or css style such as a color or font style, simply find the appropriate setting and change it. For example, to make the base font size 130%, you'd find the line that says // $base-font-size: 100%;, uncomment it, and change it so that it looks like the code listed below.


$base-font-size: 130%;

The full documentation for Foundation can be found at The Foundation docs page. That's all there is to it! Thanks for reading!