Rails 7 with foundation¶

How to get Rails 7 running with Foundation-Site framework.

As foundation_rails is not suitable for Rails 7 and Rails 7 introduces new way to implement JS builds (and CSS?) here my steps to get it running.
I will use the new default gem "importmap" together with "dartsass-rails", a combination said to avoid node at al.

JS¶

bundle install
rails dartsass:install

Now install jQuery and foundation and dependencies locally (DSGVO: no CDNs)

./bin/importmap pin jquery --download
./bin/importmap pin motion-ui --download
./bin/importmap pin what-input --download
./bin/importmap pin foundation-sites --download

Add load the modules in app/javascript/application.js :

// Other imports...
import jquery from "jquery" 
import "foundation-sites" 

window.jQuery = jquery
window.$ = jquery

$(function() {
    $(document).foundation();
})

SCSS¶

BUT: we are missing the CSS part.
We have to get a grip on it.
One way is to install foundation with npm / yarn somewhere and copy the sources.

cd <somewhere>
npm i motion-ui@latest
npm i foundation-sites

rails_dir=<the rails dir>
foundation_dir=$rails_dir/vendor/stylesheets/foundation
mkdir -p $foundation_dir
cp -r node_modules/foundation-sites/scss $foundation_dir
cp -r node_modules/foundation-sites/_vendor $foundation_dir
cp node_modules/motion-ui/dist/motion-ui.css $foundation_dir 

rm -rf node_modules
# get a copy of _settings.scss
cd $rails_dir/app/assets/stylesheets
cp $foundation_dir/scss/settings/_settings.scss ./

Add the vendor dir to the assets path in config/initializers/assets.rb:

Rails.application.config.assets.paths << Rails.root.join('vendor/stylesheets')
Rails.application.config.assets.paths << Rails.root.join('vendor/stylesheets/foundation/scss')

import and load the foundation styles (in apps/assets/stylesheets/application.scss):

@import "settings";
@import "foundation";
@include foundation-everything();