Zurb Foundation + Rails

Snippet Ruby on Rails

Last updated Feb 16, 2016

Zurb Foundation is a SASS based frontend framework that can provide your app with a great looking, responsive, and highly customizable design. In fact, CodeDiode uses Foundation for its own frontend styles. It this lesson, we’re going to implement foundation into our TaskSnail App and discuss some of its key features.

Benefits of Foundation

  • Will Save your Team Tons of Hours on the Frontend
  • Very Well Documented
  • SASS based for Easy Customization
  • Fully Responsive Designs with Ease
  • It’s not Twitter Bootstrap. Dare to be different.

Let's Build Tasksnail

This lesson is Part 3 of a 3 part series demonstrating how to build an simple One-Page Task Management App named TaskSnail. Check out Part 1 Devise Lazy Registration and Part 2 Rails + AJAX

Lesson Resources

Lesson Checkpoints

Installation and Mobile First Design

Mobile-First design will make you a better web developer. It forces you to think about your most important content and organize it efficiently. Foundation makes it easy to create a mobile-first design using the their grid system.  

Install Foundation

In your Gemfile:

gem 'foundation-rails'

Then run:

$ bundle
$ rails g foundation:install

Design a Masonry Style Feed with Block Grids

Our application needs to display a feed of Tasks to the User. We need our site to be responsive, which would normally require that we code a series of breakpoints using CSS media queries. With foundation, we can design within the grid and never have to worry about setting our own breakpoints.

Foundation uses a 12 column grid system that can respond to different viewport sizes. Our rails app is already displaying a feed of Tasks, so all we need to do is wrap it in a block-grid, and it becomes full responsive. The block grid is especially useful when looping through content that needs to be the same size, such as images or a masonry blog feed.

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
  <% @tasks.each do |task| %>
  <li><%= task.name %></li>
  <% end %>
  </ul>

Small screens will span the entire width of the viewpoint. On medium screens, each row will contain 2 columns. On large screens, each row will contain 3 columns.  

Show Content Conditionally based on Screen Size

Let’s say you have some content you want displayed when a visitor is on a desktop computer, but you want it hidden on mobile devices. Traditionally, we would have to write a bunch of CSS Media Queries to make this work. Foundation makes it much easier with its collection of visibility classes, which are predefined Media Queries for small, medium, and large screens.

To show a element only on large screens, just apply the show class:

class="show-for-large-only".

We could also achieve the same results with the opposite hide class:

class="hide-for-small-only".

In addition, Foundation allows you show or hide content based on orientation and touch screens.

class="show-for-landscape"

class="show-for-portrait"

class="show-for-touch"

Customizing Foundation Classes and Variables

In your stylesheets directory, you will find the foundations_and_overrides.scss file. Every module in the framework can customized by uncommenting the field and adding your own style. Let’s say we want to change the default button color to green…

$button-font-color: #7ED321;

or define a new SASS variable and apply it to the override.

$green = #7ED321;

$button-font-color: $green;

Completely Customize a Class

What if we want to make our own custom class of buttons that uses Foundation defaults as a starting point?

.my-custom-button {

@include button;
  //  your-styles: go-here;
}

Use rem-calc for Font Sizes

In Foundation, you will size fonts using the SASS function rem-calc instead of entering a static pixel value. A rem-calc value is tied to the root <html> element. By default, this means that your rem-calc values will behave just like static pixel values. The advantage of using REMs comes into play when you have a class with children that need a different font size across the board. You can declare font-size: 125% and all of the class's children will increase by 25%.

Tools to Make Foundation Even Better with Rails

Foundation has a growing community of developers working to extend the framework. Here's a couple of tools that are especially useful for Ruby on Rails projects.  

rails_foundation_helper gem

The rails_foundation_helper gem is very handy for working with forms and flash messages. The gem will automatically override the form_for helper to apply Foundation Classes to your forms. 

Using AngularJS?

Check out Angular Foundation, a library of Angular directives based on Foundation. 

Comments