RailsCasts Pro episodes are now free!

Learn more or hide this

Foundation

#417 Foundation

Jun 16, 2013 | 11 minutes | Views, Plugins
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.
Click to Play Video ▶
  • Download:
  • source codeProject Files in Zip (49.7 KB)
  • mp4Full Size H.264 Video (31.1 MB)
  • m4vSmaller H.264 Video (18.5 MB)
  • webmFull Size VP8 Video (18.4 MB)
  • ogvFull Size Theora Video (50.3 MB)
Avatar
Stephanie Hekker over 11 years ago

If we're changing our "foundation_and_overrides.scss" file, what happens if we update zurb foundation? Will this file be overwritten?

Avatar
Thomas Hopkins over 11 years ago

Simply updating the 'zurb-foundation' gem will not overwrite 'foundation_and_overrides.scss' or any of the other files in your assets folder.
However, if you then proceed to run rails generate foundation:install again, it will overwrite 'foundation_and_overrides.scss' (but not without prompting you for confirmation first). That generator will also modify 'application.css', 'application.js', and 'application.html.erb'.

Avatar
Balkhmog about 8 years ago

Thank for your response!

Avatar
Riya Singh over 7 years ago

Thanks a lot, it has clear a lots of thing.

Avatar
9zb over 7 years ago

Really helpful !

Avatar
baby90 over 7 years ago

It's really sad that ther is no more new videos

Avatar
James Chevalier over 11 years ago

I handle this by keeping my edits clean, and in place of the existing options. So, rather than putting all of my customizations in one place in the file, they're spread out in the locations where the options originally appeared.

Then, I accept the changes from rails generate foundation:install for the foundation_and_overrides.scss file - allowing it to overwrite my customizations. I handle the difference(s) in git, by staging/committing all the lines that don't affect me & comparing the lines that do affect my customizations.

So far, I've generally been able to discard the changes to application.html.erb - I just take a quick peek at the diff from within the rails generate foundation:install command to be sure.

Avatar
Marc Guillaume about 7 years ago

No news for more explanation ?

Avatar
Keil Miller Jr about 11 years ago

It's best to just browse the gem's github repo for changes. I organize my files a little differently than default, so I don't want those changes over ride.

Avatar
213one over 7 years ago

Yeah I agree !

Avatar
ArthDev over 7 years ago

Thanks you very much !

Avatar
Code Triche Clash Royale over 7 years ago

Very interesting, thank you.

Avatar
S over 11 years ago

Nice railscast about a framework I use everyday.

About forms, to avoid the extra HTML that foundation requires, and also to have nice error rendering, I did a gem foundation_rails_helper that works with rails 3 and 4 and with foundation 3 and 4.

It has also an helper for flash messages

HTH
Seb

Avatar
coin3d over 11 years ago

If you want to have error highlighting on forms, I'd recommend using simple_form, which supports Zurb by using
rails generate simple_form:install --foundation

Avatar
HumanProxy over 11 years ago

https://github.com/plataformatec/simple_form#zurb-foundation-3
Event if it's foundation 3, I think it works with current version 4.
Form css haven't changed that's much.

Avatar
Nick Gorbikoff over 11 years ago

Here is how I handle Simple_Form errors and foundation 4 ( by default I prefer to use field labels as prepends. Enjoy

ruby 
  SimpleForm.setup do |config|
    config.wrappers :default, class: 'input row',
      hint_class: :field_with_hint, error_class: :errors do |b|
      b.use :html5
      b.use :placeholder
      b.optional :maxlength
      b.optional :pattern
      b.optional :min_max
      b.optional :readonly
  
      ## Inputs
      b.wrapper tag: :div, class: 'large-16 small-16 columns' do |c|
        c.wrapper tag: :div, class: 'row collapse' do |d|
          d.wrapper tag: :div, class: 'large-4 small-4 columns' do |e|
            e.use :label, wrap_with: {tag: :span, class: :prefix}
          end
          d.wrapper tag: :div, class: 'large-12 small-12 columns' do |e|
            e.use :input
          end
        end
        c.wrapper tag: :div, class: 'row collapse' do |d|
          d.wrapper tag: :div, class: 'large-16 small-16 columns' do |e|
            e.use :hint,  wrap_with: { tag: :span, class: :hint }
            e.use :error, wrap_with: { tag: :small, class: :error }
          end
        end
      end
    end
    config.default_wrapper = :default
    config.boolean_style = :nested
    config.button_class = 'button'
    config.error_notification_tag = :div
    config.error_notification_class = 'alert-box alert'
    config.label_class = 'control-label'
    config.form_class = :nice
    config.browser_validations = false
  end
Avatar
agence-Web-Guadeloupe over 7 years ago

With Field labels,
THX Nick

Avatar
S over 11 years ago

I'm not a huge fan of simpleform this is why I did the foundation_rails_helper

Avatar
Mario Uher over 11 years ago

I really like Foundation, using it for projects since version 2. However I think the biggest advantage is to move all the logic of the grid into your stylesheets, and decouple the HTML. So your HTML will not be messed up with a lot of presentational classes and the result will be a lot more semantic. Unfortunately this episode didn't show this feature at all :(

Be sure to check out the Building With Mixins section over at the Foundation Grid docs.

Avatar
Cezar Halmagean over 11 years ago

That sounds like a nice feature. I wonder if there are any major downsides.

Avatar
Frank J. Mattia over 11 years ago

I too was hoping this episode would touch on using mixins and what some best practices might be. Personally I think mixins are the killer feature Foundation has over Bootstrap. Great screencast nonetheless and thank you Ryan for putting it together, here's to hoping for a PRO episode for semantic Foundation :-D

Avatar
Frank J. Mattia over 11 years ago

I too was hoping this episode would touch on using mixins and what some best practices might be. Personally I think mixins are the killer feature Foundation has over Bootstrap. Great screencast nonetheless and thank you Ryan for putting it together, here's to hoping for a PRO episode for semantic Foundation :-D

Avatar
Dmitriy over 10 years ago

Just what I've thought while watching this episode and what I was wondering of. Thanks, Mario

Avatar
HumanProxy over 11 years ago

One of the biggest advantage (in my opinion) of Zurb compare to Bootstrap is the customisation.
Really easy with Zurb instead of fighting with existing bootstrap styles.

Avatar
Christian Gambardella over 11 years ago

We used it on http://www.moviebreak.de/

It is a German Movie Website.

We had trouble with the mobile first aspect on IE8, because IE8 doesn't support media queries.

I hated to use !important all the time to override Foundation defaults.

Avatar
Glenn over 11 years ago

Have you tried JS libraries that add media queries support to IE7 and IE8, like Respond.js?

Avatar
Christian Gambardella over 11 years ago

No, I didn't know that those exist!

Thank you!

Avatar
Nicholas Dobie over 11 years ago

Respond.js will make Foundation work. I would suggest adding it right after your stylesheets to prevent flash.

Also for IE7 support you will need the box-sizing polyfill found here https://github.com/Schepp/box-sizing-polyfill

Avatar
Dipesh Batheja over 11 years ago

Do custom form in zurb work on ajax? I am not able to to get it to work. I have the form in reveal modal loaded using ajax. But the select boxes are not custom. Anyone have a clue?

Avatar
indiemdq over 11 years ago

if your form is preloaded with the page it should work. Foundation uses javascript to create custom select, checkboxes and radiobuttons, if you load it on demand you need to run the custom-form javascript after.

Example:

javascript 
$(document).foundation('forms', 'assemble');

For more information check Foundation - Javascript

Avatar
Dipesh Batheja over 11 years ago

ok cool, that worked. i just did:

javascript 
$(document).foundation().foundation("reveal",
{
    opened: function(data) {
        $(document).foundation('forms', 'assemble');
    }
});
Avatar
Dipesh Batheja over 11 years ago

I wonder if there is also a way to add custom select box without wrapping it in tag?

Avatar
Jeremy Shimko over 11 years ago

Big fan of Foundation. Thanks for another great screencast!

Just wanted to point out a small typo on the application.html.erb code in the show notes. The section is closed with a closing div tag on line 18.

Avatar
Daniel Bruns over 11 years ago

I saw that too. My first instinct was to look up whether or not this is some new HTML5 thing, but then I decided that Ryan might actually be human and it is just a mistake.

Avatar
Bharat Ruparel over 11 years ago

Nice! Would like to see the Foundation's Javascript widgets compared to Bootstrap's.

Avatar
Luiz Eduardo Kowalski over 11 years ago

hey, how do you open that color selection dialog?

Avatar
Vivek Sampara over 11 years ago

I have the same question. i think its a widget for mac editor.

Avatar
Michał Podlecki over 11 years ago

For interested in I encourage to check another solution: InK

Avatar
Dom over 11 years ago

Wow, just had a look at Interface Kit (InK), it's really nice. I think I prefer it over Twitter Bootstrap. I looked at Zurb Foundation quite a while back, might need to re-evaluate it too. Thanks for sharing!

Avatar
Matt Kelly over 11 years ago

Awesome screencast. For anyone attending LoneStarRuby we'll be running a Foundation training on Thursday morning.

Avatar
Denis over 11 years ago

Spent whole day attempting to adapt Foundation to my existing application with simple_form. Nothing is works out of box, and documentation for Twitter Bootstrap is way better.

Avatar
indiemdq over 11 years ago

Excellent screencast,
I've been using it for a while, imho bootstrap is easier to use, but foundation is easier to customize

Avatar
Ryan over 11 years ago

For those using turbolinks, you will need to modify the application layout to include all assets in the header. Foundation includes javascript in the body by default.

Avatar
Flavia Grosan over 11 years ago

Thanks for the tip :). Easy solution to what I thought might get uglier.

Avatar
Bence over 11 years ago

If I include all the JS assets in the head everything seems to broke...
Does it work for you? Have you modify anything else?

Avatar
Ryan over 11 years ago

It's working, so far its been smooth sailing. I also set the data-turbolinks-track attribute to true.

application.html.erb 
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
Avatar
Nicholas Dobie over 11 years ago

You don't need to change the import at the bottom. On line #63 of the foundation_and_overrides.scss file there is a list of all the modules and you can just set the one you don't want to false and they'll be excluded.

Avatar
caike souza over 11 years ago

Looks like the section element is being closed with a div instead of section.

Avatar
Paul Silvester over 11 years ago

I'm trying to make the nav-bar collapsible but I'm not sure how to do it. Using the code above did not work. From inspection I see I need to have the toggle element but I'm unsure how to use it.

Avatar
Dow Drake about 11 years ago

I'm seeing the same thing. The right navigation elements disappear when the page is narrow.

Avatar
Dow Drake about 11 years ago

Changing the pasted in navigation code to this worked for me:

html 
<nav class="top-bar">
  <ul class="title-area">
    <li class="name">
      <h1><%= link_to "Awesome Store", products_path %></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></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>
Avatar
Chris Dekonink about 11 years ago

Thanks! This worked for me too. but after the first time it stopped working. I am using rails4. Any ideas?

Avatar
betam4x over 11 years ago

For what it's worth, bootstrap has a SASS version. Take a look at the bootstrap-sass gem.

Avatar
net1957 over 11 years ago

I did try to add one other tooltip to the price field
But it's not working. The first tooltip is displayed on the 2 labels !

ruby 
    <div class="row collapse">
      <div class="small-3 columns">
        <%= f.label :name, class: "right inline", title: "Name of product", data: {tooltip: true } %>
      </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>

Any idea ?

Avatar
Jordan Humphreys over 11 years ago

Thanks for reporting. If a value of data-tooltip is set then this value is used to identify the tooltip itself. Since in this case both are data-tooltip="true" when generated, both point to the same tooltip.

Try this:

    <div class="row collapse">
      <div class="small-3 columns">
        <%= f.label :name, class: "right inline", title: "Name of product", data: {tooltip: "name" } %>
      </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: "price" } %>
      </div>
      <div class="small-9 columns">
        <%= f.text_field :price %>
      </div>
    </div>
Avatar
net1957 over 11 years ago

Nice to know! Thanks

Avatar
Nec over 11 years ago

Nice tutorial! Love it!

I don't know if it's only me but i need to put this in /app/assets/stylesheets/config.rb :

ruby 
require "zurb-foundation"

Because when I modified the bootstrap_and_overrides, appeared an error file.

I hope it helps someone

(Sorry for the caveman english)

Avatar
Jamie Barton over 11 years ago

Finding Foundation to be a nice addition to speeding up workflow nowadays :)

Avatar
Andres Cano over 11 years ago

I'm using Rails 4, and after trying to import other files after a successful setup of foundation I'm still getting an error with the mixings... "File to import not found or unreadable: foundation/variables." whenever I add "@import "foundation/variables";" to any of the sass style files

Avatar
Nik Njegovan about 11 years ago

do you have the gem in the assets group? Rails 4 has done away with the assets group so try removing that group and running bundle install again.

Avatar
Sylvain over 11 years ago

Foundation seems to interfere with TinyMCE 4.x, does anybody experienced that?

Avatar
Piotrek Okoński about 11 years ago

AFAIK Foundatiom overwrites style for table tags.

Avatar
tomaswitek about 11 years ago

I found a very nice collection of Foundation themes: http://www.themplio.com/categories/foundation-themes

Avatar
Pablo Crivella almost 11 years ago

Has anyone been able to install Foundation 5?

Avatar
Florian Kasper almost 11 years ago

Yes I have,

The gem was renamed to "foundation-rails" but still works like the old one.

ruby 
gem "foundation-rails", "~> 5.0.2.0"
sh 
rails g foundation:install

...

Avatar
Pablo Crivella almost 11 years ago

Thank you very much Florian!

Avatar
Brook Riggio almost 11 years ago

With Foundation 5.0.3, I needed to follow this crazy thread to get the mixin import working: https://github.com/zurb/foundation/issues/2128. The final suggested work-around is what worked for me.

Avatar
codenapse-team over 10 years ago

when i try to change the color of the top bar in foundation_and_overrides.scss the color of the bar in the app doesn't change , i'ved tried to stop the rails server and started it again but the color doesn't change
ruby 2.1.0
rails 4.0.3
the code that i'ved change
// $topbar-bg-color: #000;
// $topbar-bg: $topbar-bg-color;

Avatar
Paul Morganthall over 10 years ago

codenapse-team: I'm sorry if this sounds too obvious, but the code you posted still had the comment characters ('//') on each line. If you'd like to change the color, the line should look like this:
$topbar-bg-color: #9c1;

Avatar
DavidPutts about 10 years ago

Quite Interesting! :)

Avatar
couponbirds about 8 years ago

Get the latest coupons codes, promo codes, deals, printable coupons for thousands of stores on couponbirds such as lane bryant coupon, hsn coupon code and gymboree coupon.

Avatar
Roselmak about 8 years ago

Nice !
Thank you.

Avatar
serjboykousa about 8 years ago

Excellent article plus its information and I positively bookmark to this site because here I always get an amazing knowledge as I expect. Thanks for this to share with us.

Avatar
neenathomas about 8 years ago

Yes you are right that the above video helped me learn about basics of the grid system, navigation, tool tips etc.Bootstrap is not a new one for me and i have project experience in bootstrap and this video helped me to know more about it.

Avatar
Showboxapp about 8 years ago

Download ShowBox — movies and TV shows for the whole family you can watch on your Android smartphone, and even better on tablets! Showbox Here is the direct download link to get latest movies on Android smartphones

Avatar
Michael almost 8 years ago

Looks interesting

Avatar
hoverboard-info almost 8 years ago

Grat alternative to Bootstrap !

Avatar
Anna over 7 years ago

Thanks for the tips and guide. It is very useful tips.

Avatar
hotmail login over 7 years ago

I enjoy the subject you are talking about. It very interesting! Thanks for sharing!

Avatar
JohnnyCash12 over 7 years ago

Thank you for the information! very good article!

Avatar
geri63 over 7 years ago

thnks full for this article

Avatar
lakigoal over 7 years ago

Mantap Jiwa. Thanks for this information.

Avatar
CindaEames over 7 years ago

Thanks for this information.

Avatar
gosoxbosox over 7 years ago

thanks for the info

Avatar
Juegos Friv 2017 over 7 years ago

Very useful information! Thank you very much!

Avatar
cottonquestions over 7 years ago

Thanks for this article

Avatar
panistefanin over 7 years ago

Thank you for your work on the blog! You're doing a good job!

Avatar
Rekha Sharma over 7 years ago

Very well written information. It will be beneficial i really appreciate all your efforts ,thank you so mch for sharing this valuable information with all of us.
packers-movers-bangalore.in

Avatar
Xaviercrevyo over 7 years ago

One of the best episode.

Avatar
AEC Maroc over 7 years ago

Thanks a lot for this episode, love the way you present your informations. Really usefull for people like me
annuaire-expert-comptable.ma/

Avatar
WalterBoyd over 7 years ago

I also want to learn the basics of the grid system, navigation. Thanks for reviewing, I will refer more.

Avatar
Shezi456 over 7 years ago

This is very nice blog and informative. I have searched many sites but was not able to get information same as your site. I really like the ideas and very interesting to read so much and Please Update and i would love to read more from your site

Thanks

Avatar
galken1 over 7 years ago

This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the leisure here! Keep up the excellent work.

Avatar
JaneSmith76 over 7 years ago

Thanks a lot, i confirm that's a really nice ad. I hope you will have some more in future.

Avatar
Riya Singh over 7 years ago

Wow that is what I was looking for, thanks a lot for sharing this..!

Avatar
slither io over 7 years ago

I found a lot of interesting information here. A really good post, very thankful and hopeful that you will write many more posts like this one.

Avatar
rainahuang over 7 years ago

Good post, thanks.

Avatar
brianmay01 over 7 years ago

Very interesting! Thanks!

Avatar
Orianna over 7 years ago

This is very nice blog and informative.

Avatar
FleetManagement about 7 years ago

Thanks for the article, I was looking for information on this topic, helped a lot.

Avatar
Cokinne Kartell-stark about 7 years ago

Wonderfull JOB, this helps me well

Avatar
Putri Salju about 7 years ago

good well soon baby

Avatar
Muskan Rajput about 7 years ago

Yes, the article I was looking for. Your article gives me another approach on the subject. I hope to read more articles from you.

Avatar
Pankaj Sharma about 7 years ago

This is very helpful post. Thanks for sharing it

Avatar
clodit97 about 7 years ago

very good discussion for my insights, such as information about

Avatar
instaastuce about 7 years ago

Awesome blog!
piraterinsta.appastuce. com
piratersnap.appastuce. com

Avatar
thuylien123 about 7 years ago

Thanks for sharing, very useful information. Please visit to my website.

Avatar
crackyit about 7 years ago

Wao , what a nice article. Really loved the way you posted and shared the beautiful information.
Weldone.!!
YTD Video Downloader

Avatar
sammilix about 7 years ago

great review guys!

Avatar
thuylien123 about 7 years ago

Sorry if I bother you. You can visit my website.
weird tips
natural face
make up attractive face
familiar makeup principles

Avatar
UKEssay Papers about 7 years ago

I loved the post, keep posting interesting posts. I will be a regular reader..

Cheap Essay Writing Services UK - UKEssayPapers

Avatar
UKEssay Papers about 7 years ago

I loved the post, keep posting interesting posts. I will be a regular reader..

Cheap Essay Writing Services UK - UKEssayPapers

Avatar
Jill BCC almost 7 years ago

Great, thank for clearing that up

Avatar
paypalactivate almost 7 years ago

First time here at the site, I like the layout.

Avatar
kamagraportal almost 7 years ago

hoho nice to know you guys

Avatar
rahulthepcl almost 7 years ago

Thanks for the episode. Gonna try it.

Avatar
richardfeyol almost 7 years ago

Thanks for the sharing this information, Visit this site for Free psn code generator pcmunkey.net.

Avatar
Anna Shetty almost 7 years ago

This is the kind of manual that needs to be given and not the random misinformation that's at the other blogs.

Avatar
Aliyan Hashmi almost 7 years ago

It was great info thanks for sharing.

softwareskey.net

Avatar
Alman Shafiulla Alhusayn about 7 years ago

Recently I discovered that the phrase “Thanks be to God” occurs exactly five times in the Bible, and only in the consecutive books of Romans, 1 Corinthians, and ...