Intro to Foundation 5 and Rails

One of the fastest ways to add some style and to streamline your CSS is to use one of the many CSS frameworks. This article will look at what you need to know to add Foundation 5 to a Ruby on Rails application.

Foundation 5

Why use Foundation 5

Foundation is my favourite CSS framework. There are several reasons for this:

  • Foundation 5 doesn't try to replace everything, instead it creates a foundation on which you can build everything else
  • It works amazingly well with Rails (Zurb, the makers of Foundation, is a Rails shop).
  • There is a very nice gem that installs everything for you
  • Foundation is built on top of SASS, so it works with Rails and its asset pipeline
  • The Foundation team has gone to insane lengths to make Foundation incredibly extensible and customizable.
  • It is very newbie friendly, unlike other frameworks, you don't need to be a CSS master to work with it

Installation

Whether you have an existing Rails application or a new one, Foundation is incredibly easy to install and get started with. To start with, installing Foundation is as easy as installing a gem. The only thing you really need to remember is that the installation process will overwrite your application.html.erb file.

1. Gemfile

Like any gem, to install Foundation, the first thing to do is to add it to your Gemfile.

gem 'foundation-rails'  

Then run bundle install and restart your Rails server.

2. Installing Foundation 5

The next step is to run the Foundation generator to install the needed files and setup your application.html.erb file. Remember to copy everything between the body tags in the file to someplace safe. This setup is going to overwrite everything in the file. Once you have copied the content from the template file (application.html.erb), run the following command to install Foundation.

rails generator foundation:install  

4. Installation Complete

Your done. You now have everything you need to start laying out your site using Foundation.

Grid System

At the heart of Foundation is a grid system composed of rows and columns. Rows delineate a horizontal section of your page while columns let you split the row up vertically. Foundation defaults to a 12 column grid. This means that each row must contain 12 columns. If you have less, Foundation starts to do odd things.

Foundation 5 Grid Sample

As you can see from the example above, it is really easy to create a multi-column layout for your site. In addition, rows and columns are infinitely compose-able. If you have a column that you would like to split into two rows with a few columns in each row, you can nest rows inside of columns.

Resources

Here are some resources to further help you get up to speed with Foundation.