Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Ruby

Taylor Quinn
Taylor Quinn
20,003 Points
Posted by Taylor Quinn
Taylor Quinn
20,003 Points

Foundation 6

Is the process for using foundation in rails the same for foundation 6 as previous versions?

12 Answers

Vlad Filiucov
Vlad Filiucov
10,665 Points
Vlad Filiucov
Vlad Filiucov
10,665 Points

I think we where using the foundation-rails gem. If you are not sure you can always go to gem <a href="https://github.com/zurb/foundation-rails">documentation on github</a>.

It looks like they updated gem to foundation 6. It should be the same. However bootstrap 4 will now use different gem

Taylor Quinn
Taylor Quinn
20,003 Points
Taylor Quinn
Taylor Quinn
20,003 Points

So I have installed the gem foundation rails and followed the foundation rails documentation but for some reason I only get the html to show up with no styling or js. So am not sure if I need to install something else? In the console when I look at the errors it says it cant find mondernizr.js file but I am not sure how to fix that

Vlad Filiucov
Vlad Filiucov
10,665 Points
Vlad Filiucov
Vlad Filiucov
10,665 Points

I don't think it has something to do with 6 or 5. I recall having same error 2 years ago. And adding config.assets.precompile += %w( vendor/modernizr.js ) this to my /config/application.rb solved this problem. I can show youthis file btw.

https://github.com/VladFiliucov/odot/blob/master/config/application.rb

Taylor Quinn
Taylor Quinn
20,003 Points
Taylor Quinn
Taylor Quinn
20,003 Points

Hmmm tried that still not good. Here is a list of steps that I do to set up the project maybe I am leaving something out.

  1. add gem 'foundation-rails', '~> 6.2', '>= 6.2.3.0' to the gemfile
  2. bundle install
  3. run rails g foundation:install
  4. I add Rails.application.config.assets.precompile += %w( vendor/modernizr.js ) to config/application.rb
  5. I clear the cache and start the server and just get the html.

Here is what my application.html.erb looks like .'''html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
<%= javascript_include_tag "vendor/modernizr" %>
<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>

</head>

<%= yield %>

</body> </html> '''

and here is what my first_page.html.erb looks like

'''html <!DOCTYPE html> <html lang="en">

<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
<%= javascript_include_tag "vendor/assests/modernizr" %>
<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>

</head>

<body> <div class="contain-to-grid"> <nav class="top-bar" data-topbar role="navigation"> <ul class="title-area"> <li class="name"> <h1><a href="#">My Site</a></h1> </li> <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul>

<section class="top-bar-section"> <!-- Right Nav Section --> <ul class="right"> <li class="active"><a href="#">Right Button Active</a></li> <li class="has-dropdown"> <a href="#">Right Button Dropdown</a> <ul class="dropdown"> <li><a href="#">First link in dropdown</a></li> <li class="active"><a href="#">Active link in dropdown</a></li> </ul> </li> </ul>

<!-- Left Nav Section -->
<ul class="left">
  <li><a href="#">Left Nav Button</a></li>
</ul>

</section> </nav> </div>

<script src="vendor/assets/jquery.js"></script> <script src="js/assests/foundation/foundation.js"></script> <script src="js/assests/foundation/foundation.topbar.js"></script> <!-- Other JS plugins can be included here -->

<script> $(document).foundation(); </script>

</body> </html> ''' Any ideas?

Vlad Filiucov
Vlad Filiucov
10,665 Points
Vlad Filiucov
Vlad Filiucov
10,665 Points

If you are not using sass, in your app/assets/stylesheets/application.css append /*= require foundation

If you are using sass app/assets/stylesheets/application.scss @import "foundation_and_overrides";

Taylor Quinn
Taylor Quinn
20,003 Points
Taylor Quinn
Taylor Quinn
20,003 Points

I have the import statement. Here is an image of the errors in my console when I preview the page (https://www.dropbox.com/s/posg1cfg6k8ocho/Screen%20Shot%202016-07-17%20at%2011.25.09%20AM.png?dl=0). Also I appreciate all your help with this.

Vlad Filiucov
Vlad Filiucov
10,665 Points
Vlad Filiucov
Vlad Filiucov
10,665 Points

Hey. It looks like Foundation is working. Because styles for list items and fonts look like they are from foundation. It isn't rails default styling. If you take a look at your screenshot on the right side of console body html tags are comming from foundation.min.css.

Taylor Quinn
Taylor Quinn
20,003 Points
Taylor Quinn
Taylor Quinn
20,003 Points

Hmmm what do you think the problem might be?

Vlad Filiucov
Vlad Filiucov
10,665 Points
Vlad Filiucov
Vlad Filiucov
10,665 Points

There is no problem. You can now use all foundation features. And the errors are coming from some requiers that are no longer in use. The vendor folder is not used that much in modern rails apps. If you want to get rid of those errors in console just find the require lines and remove them. This course is slightly outdated. If you have a look at foundation rails documentation it doesn't use modernized at all https://github.com/zurb/foundation-rails If you want to repeat the course closely you have to use same rails version and same gems versions but I wouldn't recommend that. For example rspec 'should' isn't used anymore. Use 'expect' instead and so on

Taylor Quinn
Taylor Quinn
20,003 Points
Taylor Quinn
Taylor Quinn
20,003 Points

How come I cant get ant the css to work? I just get some strange html a div with the background colored

Vlad Filiucov
Vlad Filiucov
10,665 Points
Vlad Filiucov
Vlad Filiucov
10,665 Points

Well from your screenshot we can see that you do get some css. But it could happened that you skiped a step like removing scaffold css file or renaming application.css to application.Scss or something else

Taylor Quinn
Taylor Quinn
20,003 Points
Taylor Quinn
Taylor Quinn
20,003 Points

I did change the application.css to .scss. I have 3 files under stylesheets: _settings.scss, application.scss, foundation_and_overrides.scss, Is there anything I need to do when I view the file in the browser like build the project or something like that?