LaunchSchool - An Online School for Developers /

Blog

Integrating Rails and Foundation, Part 1 - the Installation

This is part 1 of a 3-part tutorial series.

This first session will introduce you to the Foundation framework. Further, we will create a simple Rails app and follow a step-by-step approach to show you how to integrate Foundation into the app.

You can find the code for this series on Github here

What is Foundation?

Zurb Foundation is a mobile-first and responsive front-end framework that provides a collection of tools for rapid prototyping. It has in its arsenal a standard and flexible grid system for layout in addition to tons of HTML and CSS-based components for page elements such as forms, buttons, navigations as well as rich JavaScript effects.

CSS preprocessor

Generally, Foundation uses SASS (we got into details of what the SASS preprocessor is in part 1 of our Bootstrap series). However, Foundation 5 takes things to a new level by introducing Libsass which basically ports the Sass engine from Ruby to a C/C++ implementation, making the framework really fast.

How do I use it?

Foundation provides a thorough guide on how to get started. However, using it with Rails involves a few extra steps which the rest of this tutorial will cover.

Create a new Rails application

In this section, we’ll create a new Rails application. If you don’t have a Rails development environment set up yet, you can quickly get started with our tutorial for Linux here or Mac OS X here. Windows user can look into rubyinstaller, or setup a VM and then follow the Linux instructions.

Let’s begin by installing the Rails gem:

1
gem install rails

Next, let’s create a simple Rails app called todo_app and switch to it:

1
rails new todo_app
1
cd todo_app

Now let’s generate a Todo model:

1
rails generate scaffold Todo title notes:text

Migrate the changes to your database:

1
rake db:migrate

Let’s create some seed data for the app:

1
2
3
4
5
6
7
# db/seed.rb

Todo.create(title: "Wash dishes")
Todo.create(title: "Visit dentist on Monday", notes: "Scheduled time is 9am.")
Todo.create(title: "Call bank about transfer", notes: "It's been  3 days and transfer hasn't been done.")
Todo.create(title: "Watch football", notes: "If we lose again, the manager might get sacked!")
Todo.create(title: "Register for new Tealeaf course")

Seed the database by running the following in your terminal:

1
rake db:seed

Next, let’s open up config/routes.rb file and add root 'todos#index' to change the root path.

1
2
3
4
5
6
# config/routes.rb

Rails.application.routes.draw do
  resources :todos
  root 'todos#index'
end

Now start the server:

1
rails server

At this point, navigate to http:localhost:3000 and the index page should looks like this:

Integrating Foundation with Rails

Now that we have a Rails app up and running, let’s turn our focus to integrating Foundation.

Install the Ruby Gem for Foundation

Add the foundation-rails gem to your Gemfile:

1
2
3
4
5
# Gemfile

...

gem 'foundation-rails'

Run $ bundle install in the Terminal to install the gem.

Configuring Foundation

To finish setting Foundation up, we need to run a generator that the gem provides called foundation:install

1
rails g foundation:install

This command generates a number of files, including a layout file. We’ll be asked if we want to overwrite the application’s layout file. In our case, we’ll selected y to overwrite it. Note that if you’re adding Foundation to an existing app, you’ll want to copy any specific code from your layout file before overwriting it. The generator also makes modifications to the app’s JavaScript and CSS by amending app/assets/javascripts/application.js and apps/assets/stylesheets/application.css respectively.

Your application.js should look like this:

1
2
3
4
5
6
7
8
9
....

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .

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

You’ll notice it now requires foundation and has $(function(){ $(document).foundation(); }); which initializes the framework when the page loads.

Your application.css should be similar to this:

1
2
3
4
5
6
7
8
...

 *
 *= require_tree .
 *= require_self
 *= require foundation_and_overrides

 */

The application’s CSS file now requires foundation_and_overrides which is a new generated file that loads the framework with @import 'foundation'; at the bottom of the file. We can also customize the framework through this file. Note that any customization will have to be done before this @import line. Finally, the generated layout file gives us some defaults for handling legacy browsers, adds a <title> tag for setting the page’s title and includes the mandatory CSS and JavaScript files .

Congratulations

That’s it. We have successfully integrated Foundation into our simple Todo app. Subsequent posts in this 3-part series will introduce you to Foundation’s CSS and Components and Foundation’s Javascript Features.