2
votes

Starting a new rails project using foundation. I have successfully used it before, but for some reason it is not working for me today :(

Here are the steps I went through:

rails new fndtn

cd fndtn

added gem 'foundation-rails' to my Gemfile

bundle install
Resolving dependencies...
Using rake 10.4.2
Using i18n 0.7.0
Using json 1.8.3
Using minitest 5.7.0
Using thread_safe 0.3.5
Using tzinfo 1.2.2
Using activesupport 4.2.1
Using builder 3.2.2
Using erubis 2.7.0
Using mini_portile 0.6.2
Using nokogiri 1.6.6.2
Using rails-deprecated_sanitizer 1.0.3
Using rails-dom-testing 1.0.6
Using loofah 2.0.2
Using rails-html-sanitizer 1.0.2
Using actionview 4.2.1
Using rack 1.6.4
Using rack-test 0.6.3
Using actionpack 4.2.1
Using globalid 0.3.5
Using activejob 4.2.1
Using mime-types 2.6.1
Using mail 2.6.3
Using actionmailer 4.2.1
Using activemodel 4.2.1
Using arel 6.0.2
Using activerecord 4.2.1
Using debug_inspector 0.0.2
Using binding_of_caller 0.7.2
Using bundler 1.10.4
Using columnize 0.9.0
Using byebug 5.0.0
Using coffee-script-source 1.9.1.1
Using execjs 2.5.2
Using coffee-script 2.4.1
Using thor 0.19.1
Using railties 4.2.1
Using coffee-rails 4.1.0
Using sass 3.4.16
Using foundation-rails 5.3.0.1
Using multi_json 1.11.2
Using jbuilder 2.3.1
Using jquery-rails 4.0.4
Using sprockets 3.2.0
Using sprockets-rails 2.3.2
Using rails 4.2.1
Using rdoc 4.2.0
Using tilt 1.4.1
Using sass-rails 5.0.3
Using sdoc 0.4.1
Using spring 1.3.6
Using sqlite3 1.3.10
Using turbolinks 2.5.3
Using uglifier 2.7.1
Using web-console 2.2.1
Bundle complete! 13 Gemfile dependencies, 55 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.

Ran the generator:

rails g foundation:install
  insert  app/assets/javascripts/application.js
  append  app/assets/javascripts/application.js
  create  app/assets/stylesheets/foundation_and_overrides.scss
  append  app/assets/stylesheets/foundation_and_overrides.scss
  insert  app/assets/stylesheets/application.css
conflict  app/views/layouts/application.html.erb
Overwrite /home/tim/git/fndtn/app/views/layouts/application.html.erb? (enter "h" for help) [Ynaqdh] y
   force  app/views/layouts/application.html.erb

Next, I needed a page to demonstrate that it is working, so I copied a known good page and displayed it thus:

config/routes.rb

  root 'home#index'

controller/home/homecontroller.rb

class HomeController < ApplicationController

  def index
  end

end

view/home/index.html.erb

<h1>Sample Content</h1>
<dl class="accordion" data-accordion>
  <dd class="accordion-navigation">
    <a href="#panel1b">Accordion 1</a>
    <div id="panel1b" class="content active">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </dd>
  <dd class="accordion-navigation">
    <a href="#panel2b">Accordion 2</a>
    <div id="panel2b" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </dd>
  <dd class="accordion-navigation">
    <a href="#panel3b">Accordion 3</a>
    <div id="panel3b" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </dd>
</dl>

fire up the server,

rails s

...and the page shows no css goodness. :(

So, are the stylesheets loading? Here's the source (head only):

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

        <title>foundation-rails</title>

        <link rel="stylesheet" media="screen" href="/assets/foundation_and_overrides.self-e1e904b6b73c8f10825ea8cfcef529741aa5a0db4f1ca308619414139602986c.css?body=1" />
        <link rel="stylesheet" media="screen" href="/assets/application.self-167193cd81d9330d9ddb5c4ec7b44214fea529aa8a94f3a86e6526e4f652fc02.css?body=1" />
        <script src="/assets/vendor/modernizr.self-212c168b41d4ef12c547b56dc9c6db01f76fc65a43410de24e5581da7ee48e85.js?body=1"></script>
        <meta name="csrf-param" content="authenticity_token" />
        <meta name="csrf-token" content="kssa1n5rZlL6ZYpSS7VXYtVTMsuKxiMkydbK6swwm7O2ZVSZR12vrQ1gOYYG7LFrwKsdaY/7AiRhmX/cVGsecw==" />
        </head>

A couple things to note here:

  1. That link looks different from working instances; I've never seen ".self" before
  2. I followed the link and it didn't seem to have all the css

So, my question is, have I lost my mind, did I do something wrong, or has foundation broken something?

UPDATE

Out of desperation, I tried using a known good gemfile. When I did a bundle install, it croaked and told me to do a bundle update.

Did a bundle update, then tried firing up the server. It croaked.

I put the original gemfile back in, did a bundle update, fired up the server....

and it works.

Five hours beating my head against the wall, post the problem, and answer my own question minutes later... But if someone could explain why bundle update was necessary, I'd be much obliged :)