Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

117
Visualizações
How to implement Zurb Foundation to Rails 7?

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?

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

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.

about 4 years ago · Juan Pablo Isaza Relatório

0

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';
$(document).ready(function () {
    onPageLoad();
});
function onPageLoad() {
    // init foundation
    $(document).foundation();
    console.log('foundation-loaded')
}

MISSING

the replacement for

$(document).on('turbolinks:load', function() {
    onPageLoad();
});

i will post it as soon i have it

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda