Foundation Front-End Framework for Ruby on Rails Application

Foundation is a rock-solid, responsive framework for rapidly prototyping and iterating into production ZURB's Foundation is a front-end for quickly building applications and prototypes. It is similar to Twitter Bootstrap but uses Sass instead of LESS. Here you will learn the basics of the grid system, navigation, tooltips and more.
code.

This is for Foundation 2.X. The current zurb-foundation gem is now hosted at:https://github.com/zurb/foundation

 or 

http://foundation.zurb.com

Start using Foundation in your Rails projects by following these instructions

gem 'zurb-foundation'

Add gem 'zurb-foundation' in your gemfile, now open your terminal and just write the code there

rails new store
rails g scaffold product name price:decimal --skip-stylesheets
rake db:migrate
rails g foundation:install

Here you will learn the basics of the grid system, navigation, tooltips and more. So Just open your application.html.erb file from the app/views/layout and the code there

<nav class="top-bar">
  <ul class="title-area">
    <li class="name">
      <h1><%= link_to "Awesome Store", products_path %></a></h1>
    </li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li class="divider"></li>
      <li><%= link_to "Browse Products", products_path %></li>
      <li class="divider"></li>
      <li><%= link_to "Price List" %></li>
      <li class="divider"></li>
      <li><%= link_to "Contact Us" %></li>
      <li class="divider"></li>
      <li><%= link_to "Cart" %></li>
    </ul>
  </section>
</nav>

<div class="row">
  <div class="small-8 columns"><%= yield %></div>
  <div class="small-4 columns">
    <h2 class="subheader">About Us</h2>
    Hi, Add your text here.....
  </div>
</div>

now, open your product/index.html.erb

<%= link_to 'New Product', new_product_path, class: "button radius" %>

now in products/_form.html.erb

<div class="row collapse">
  <div class="small-3 columns">
    <%= f.label :name, class: "right inline" %>
  </div>
  <div class="small-9 columns"><%= f.text_field :name %></div>
</div>
<div class="row collapse">
  <div class="small-3 columns">
    <%= f.label :price, class: "right inline", title: "Price in USD", data: {tooltip: true} %>
  </div>
  <div class="small-9 columns"><%= f.text_field :price %></div>
</div>
<div class="row collapse">
  <div class="small-9 small-offset-3 columns"><%= f.submit %></div>
</div>

assets/stylesheets/layout.css.scss

label.right {
  padding-right: 10px;
}

assets/stylesheets/foundation_and_overrides.scss

$column-gutter: emCalc(60px);
$topbar-bg: #212D48 !default;

for more, just read Foundation 4 Documantation



Tags: Ruby on Rails Tutorials, Ruby on Rails Videos, Ruby Gems, Gems Use trick, Ruby code, Rails servers