Does Foundation tickle your fancy? What about Ruby on Rails? If the answer to these questions is YES, then you're going to love this. Today we're releasing our Foundation gem which will get you up and running with Foundation in your Rails 3.1+ application in seconds!
What is this exactly?
First off, it's not black magic. It's actually an asset gem which contains all the Foundation stylesheets, images, and javascripts. These assets automatically become available to your application using the Rails asset pipeline.
Why a gem?
Foundation is a tool that helps you rapidly create responsive prototypes. However Foundation is also a living project which means that we'll continue to improve it. Placing Foundation into a gem allows you to update your web application by running bundle update zurb-foundation. Yea, it's really that simple.
Why Rails 3.1+ only?
We're looking to the future and Rails 3.1 simply provides the cleanest way to include Foundation. It also provides cool stuff like asset_path which makes it possible to avoid the use of relative or absolute paths that tend to break if you decide to deploy an application to a sub-uri.
Wanna make your own asset gem?
Well it's actually pretty dang simple. Before we get started you'll want to ensure the following:
1. Ruby 1.8.7+ is installed (ruby -v)
2. Rubygems is up to date (gem update --system)
3. Bundler is installed (gem install bundler)
4. A GitHub repository has been created for this gem
Now pop open a terminal and use Bundler to create a bare bones gem:
Turn the gem into an engine
Now open up the zurb_foundation/ folder that was created. We're going to let this gem know that it's a Rails::Engine. Edit the zurb_foundation/lib/zurb_foundation.rb file to look like this:
Now anything placed in the zurb_foundation/app/ folder will become part of the load path for your Rails application.
Establish a directory structure
We're going to namespace all of our assets (stylesheets, images, javascripts) into a foundation/ folder. So inside of our newly created gem we'll want to create the following directory structure:
Specify the assets you want to load
Next we'll create a sprockets manifest file in the stylesheets/foundation and javascripts/foundation directories:
The reason why we're creating files with the name 'index' is so that they're read by default by the asset pipeline. When we install this gem into our application we'll have access to all the assets defined in these manifest files at the following URL's in a standard Rails application setup:
Reference your dependencies (i.e. images)
So now you can add all your stylesheets and javascripts into the their respective directories and specify load order in the sprockets manifest files. Because Rails 3.1 uses Tilt now, I find myself appending *.erb to my stylesheet and javascript files that have references to images in them. So let's say I'm working on a stylesheet with a background image, I would use the asset_path helper:
This will automatically insert the correct asset path link to the following image:
At this point you should commit all your changes in Git and then publish your Gem using: bundle exec rake publish.
What now?
Add gem "zurb-foundation" to your Gemfile, run rails g foundation:install, then head over to the Foundation documentation. Happy coding!