How to implement Zurb Foundation to Rails 7?

Question

I'm currently upgrading my rails app to 7. I was just testing it for a while then I have issues on Foundation Rails. I installed it and followed all the steps except the

Add Foundation to your JS

It seems the instruction is not updated yet for rails 7.

As a result, the CSS seems to work alright but when trying to implement features that require javascript like Reveal, it won't work properly.

Any idea how to implement Foundation to Rails 7 properly?

Answer 1

It's dead, Jim.

The foundation-rails gem like almost all "gemmified assets" is made for the old Sprockets assets pipleline that was the default in Rails 5 and its not maintained or relevant in modern versions of Rails.

The whole idea of wrapping third party JavaScript or CSS packages in Ruby gems was a considered an accepatble solution back when Sprockets was originally introduced but has not aged well as its dependent on maintainers updating gems just to push new versions of the front-end package.

Development on Sprockets itself has also stopped and it may not even be able to compile modern versions of Foundation if it uses newer features like the module system thats only available in Dart-Sass.

Rails 6 replaced Spockets with the short-lived Node.js based Webpacker. Rails 6 also defaulted to using Yarn to install front end packages from NPM.

Rails 7 takes a very different approach:

So in Rails 7, we're simultaneously offering a great, default way to avoid dealing with the entire node/npm/bundling setup and offering a fully-supported alternate route that embraces all of those things. But we're going to do it in a different way than before.

Webpacker was born almost five years ago with a mission to make the JavaScript bundling pipeline easy to use for Rails developers who weren't necessarily interested in becoming JavaScript experts. With ES6 requiring transpilation for widespread use in browsers at the time, and npm needed to access the ecosystem of packages for node, there really wasn't a way around it. We could either embrace that reality or relegate Rails to only being an API for such applications. We chose the embrace.

But today the trade-offs made for Webpacker are starting to make a lot less sense. It's sorta stuck in the muddy middle between two clearer paths. There's the new path of forgoing the bundling pipeline altogether, which is much easier to setup, has fewer dependencies, and less awkward divisions of labor between Ruby and JavaScript. And then there's the all-in path where we don't try to hide or wrap the JavaScript complexities at all. We simply provide a bridge by which the generated JavaScript can be used in the Rails application, but leave it to the JavaScript ecosystem to provide all the answers.

- David Heinemeier Hansson

Rails 7 isn't shipping with a single answer to how to manage front-end packages.

Instead it just has the plumbing to hook up a variety of systems and you need to find the system that works for your requirements such as linking to CDN's via import-maps, jsbundling-rails or (shudder) downloading foundation and compliling it via something like Scout.

In terms of developer convience is it a huge step back from the Rails 5 days when it "just worked" (kind of) but that approach was no longer tenable.

Answer 2

i found a way to get it working

what i not found is the correct way for adding the foundation stylesheets, in scss, by importmap. i just pasted them all into the assets and blowed up my repository. But it works for now.

jQuery

execute ./bin/importmap pin jquery --download see other options

add to application.js

import jquery from 'jquery'
window.$ = jquery

Stylesheets

1. Download it manually here
2. create folder app/assets/stylesheets/foundation
3. drag the folders _vendor and scss into the new folder
4. add @import "./foundation/scss/foundation"; and @include foundation-everything(); to application.scss
5. i removed *= require_tree . and *= require_self

Javascript

1. execute ./bin/importmap pin foundation-sites --download

then add to application.js

import 'foundation-sites'

// initialize the page
$(document).on('turbo:render', function() {
    onPageLoad();
});
$(document).ready(function () {
    onPageLoad();
});
function onPageLoad() {
    // init foundation
    $(document).foundation();
}

Answer 3

I've gone another way

I like foundation and i found Vite. So great and it works together with the new Turbo. Greatest thing is the Vite HMR.

For how to setup foundation and all that staff together i wrote a tuorial Setup Vite, Svelte, Inertia, Stimulus, Bootstrap / Foundation