I usually use the Twitter Bootstrap Rails gem for my projects however I thought I would give the Zurb Foundation gem a go. I've followed the install instructions to the letter. When I added the navigation: <div class="row"> <div class="three columns"> <h1><img src="http://placehold.it/400x100&text=Logo" /></h1> </div> <div class="nine columns"> <ul class="nav-bar right"> <li><a href="http://stackoverflow.com/questions/14391724/#">About</a></li> <li><a href="http://stackoverflow.com/questions/14391724/#">Work</a></li> <li><a href="http://stackoverflow.com/questions/14391724/#">Contact</a></li> </ul> </div></div> I get the following: Notice that the logo placeholder is not aligned with the navigation on the right and the navigation links do not have the grey gradient on them.My application.html.erb looks like this:<!DOCTYPE html><!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --><!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]--><!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]--><!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--><head> <meta charset="utf-8" /> <!-- Uncomment to make IE8 render like IE7 --> <!-- <meta http-equiv="X-UA-Compatible" content="IE=7" /> --> <!-- Set the viewport width to device width for mobile --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><%= content_for?
title) ? yieldtitle) : CONFIG['title'] %></title> <!-- Included CSS Files --> <%= stylesheet_link_tag "application" %> <%= csrf_meta_tags %></head><body> <%= render 'layouts/navigation' %> <div class="container"> <%= yield %> </div> <!-- Included JS Files --> <%= javascript_include_tag "application" %> <% if CONFIG['google_analytics_id'] %> <!-- Google Analytics --> <script> var _gaq=[['_setAccount','<%= CONFIG['google_analytics_id'] %>'],['_trackPageview']]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=http://stackoverflow.com/questions/14391724/('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s)}(document,'script')); </script> <% end %></body></html>
title) ? yieldtitle) : CONFIG['title'] %></title> <!-- Included CSS Files --> <%= stylesheet_link_tag "application" %> <%= csrf_meta_tags %></head><body> <%= render 'layouts/navigation' %> <div class="container"> <%= yield %> </div> <!-- Included JS Files --> <%= javascript_include_tag "application" %> <% if CONFIG['google_analytics_id'] %> <!-- Google Analytics --> <script> var _gaq=[['_setAccount','<%= CONFIG['google_analytics_id'] %>'],['_trackPageview']]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=http://stackoverflow.com/questions/14391724/('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s)}(document,'script')); </script> <% end %></body></html>