The Foundation framework by Zurb is a popular alternative to the Bootstrap Framework. It provides a clean, responsive, and elegant look and feel. This article will show you how to begin utilizing it in your Ruby on Rails Application.
First, we need to include the
foundation-rails gem in our application. Add the code below to your gemfile.
gem 'foundation-rails', '~> 22.214.171.124'
Now run a
bundle install to install it.
There are two methods of utilizing Foundation. The first method is ideal for new projects. This method will change and overwrite certain files in your application. However this method requires much less effort to install. To use this method simply type the command below. This command will add a new scss file to your project, modify your application.css file, and overwrite your application layout.
rails g foundation:install
The second method requires a bit more work, but gives you complete control over adding Foundation to your project. First, modify your
application.css file so that it looks something like the code listed below.
/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the top of the * compiled file, but it's generally better to create a new file per style scope. * *= require_self *= require foundation_and_overrides *= require_tree . */
Next, create a new scss file called
foundation_and_overrides.scss and add the code listed below.
Next, modify your
application.js file so that it looks something like the code listed below.
Next, add the following lines to the
head section of your application layout.
When you are finished, your application layout should look something like this:
Excellent, now that Foundation is installed, we can tweak a number of settings in order to customize Foundation to fit our needs. The automatic install includes a settings file that you can tweak at will. For manual installs, the list of settings can be found in this file. Simply copy the contents of the file and paste it above the
@import 'foundation'; line in your
app/assets/stylesheets/foundation_and_overrides.scss file. You'll notice that everything is commented out. To tweak a setting or css style such as a color or font style, simply find the appropriate setting and change it. For example, to make the base font size 130%, you'd find the line that says
// $base-font-size: 100%;, uncomment it, and change it so that it looks like the code listed below.
The full documentation for Foundation can be found at The Foundation docs page. That's all there is to it! Thanks for reading!