Foundation

Installing with Rails

We use Rails to develop our apps and Foundation makes things so much quicker. Start using Foundation in your Rails projects by following these instructions.

Adding Foundation to the Asset Pipeline

The asset pipeline gives us everything we need to work with Foundation and is required to configure your application properly. There's a couple steps involved, but nothing out of the ordinary.

1. Gemfile

First you'll want to add the following gems to the assets group in your Gemfile like so:


group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # Add these gems
  gem 'compass-rails'
  gem 'zurb-foundation'
end
2. Bundle Install

Next, you'll use bundler to get these gems added to your system:

bundle install


Configuring for Foundation

There are a couple ways to configure your app to use Foundation. We've made it really easy with our generators or manual instructions.

The Easy Way

Our generators make it really easy to get going and automate most of the boring upfront work. Use the following generators to get things going:

Install

rails g foundation:install

This will create foundation_and_overrides.scss inside app/assets/stylesheets/ in your project. This file will be imported into application.css in the app/assets/stylesheets/ sprockets manifest.

Layout

rails g foundation:layout

This will provide an application layout that sets the width for mobile devices. The generated file will replace application.html.erb. inside app/views/layouts/.

Manual Installation

If you don't wish to use the generators (or are adding Foundation to an existing project) here's all the steps you'll need to follow to get it working.

Layout

Add the following to the <head> tag of your page layouts (i.e. app/views/layouts/application.html.erb) to set the viewport width for mobile devices.


<!--  Place in <head> to set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Sass Files

If you're using a standard Rails installation you should rename application.css to application.scss in the app/assets/stylesheets directory.


@import "foundation";

That will import all the foundation related styles into your application. Take a look at the other documentation pages if you'd like to further customize the stylesheet that gets generated.

Javascripts

To include all the Foundation related javascripts on your page add =require foundation to app/assets/javascripts/application.js sprockets manifest file so it looks like this:


//= require jquery
//= require foundation
// include javascript files here

Upgrading from 2.X

If you're still working on a project that was originally using Foundation 2.X, we've made it simple to update. You'll also want to read the Migration Guide.

For those of you upgrading from a previous version of the gem things are a little different. Most importantly you'll want include the compass-rails gem in your Gemfile like so:


group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # Add these gems
  gem 'compass-rails'
  gem 'zurb-foundation'
end

In your app/assets/stylesheets/application.css file you probably had a bit of code like this:


/*
=require foundation
*/

Just rename application.css to application.scss making sure to replace any =require to the sass @import syntax. It should look like this:


@import "foundation";

See What We've Got

Now that you've got Rails going, it's time to see what Foundation offers. Go take a look at our components and javascripts so you know what comes with this powerful framework.
Components Javascripts

Grab the copy of Foundation best for you, whether that's Scss or CSS, everything or just bits and pieces.

Install Foundation

Awesome product jobs:
via ZURBjobs