Skip to content

Instantly share code, notes, and snippets.

@SeaOfLee
Last active August 29, 2015 14:17
Show Gist options
  • Select an option

  • Save SeaOfLee/a17802d975f73e8c53f0 to your computer and use it in GitHub Desktop.

Select an option

Save SeaOfLee/a17802d975f73e8c53f0 to your computer and use it in GitHub Desktop.

In an effort to better understand the fantastic Zurb Foundation front-end framework, I ran into some serious issues. The 'foundation-rails' gem for Ruby on Rails makes it easy to get Foundation into a Rails app, but I found the documentation slightly confusing. The rails g foundation:install command performs many actions for you, creating files and adding necessary javascript to the application.js file. There is one crucial step that is not done for you, you need to add *= require foundation to the application.css file.

If you're curious to make a new dummy app with Zurb Foundation & Rails, here's the steps.

rails new <yourappname> -T

In the Gemfile, add gem 'foundation-rails.

bundle

From the CLI, install Foundation by running:

rails g foundation:install

This will make a number of additions to your project, mainly the foundation_and_overrides.scss and adding some javascript to application.js. You will be prompted if it's OK to overwrite application.html.erb, enter Y.

In application.css, add *= require foundation to the list of requirements, under require_self and above require foundation_and_overrides. The file should look something like this:

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

Scaffold a model and check out the new default styles! You can also rename application.css to application.css.scss if you want to use SASS. Now have fun with some responsive grid action!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment