Setup Foundation-Sites on Rails-7 and Vite

Overview

For many years we were satisfied with zurb-foundation. But in 2024, we would not setup a new project with it. CSS has become enough future-rich, and the requirements of Rails-7, in particular, the initialization steps has changed so that we setup new projects with pure CSS.

Note

Foundation/sass slows down HMR aproximately 12 seconds. So, i use the asset pipeline for Foundation, by symlinking sass files from node_modules/, so Vite is freed from them. Custom Stylesheets, where will be the most changes, resides in frontend folder. Javascript goes the direct way, from the yarn (node_modules/) package to Vite.

(Alternative would be: minify the foundation CSS and add the minified version to the frontend folder. Then, Vite is clever enough for not loosing time for bundling that. On that way HMR would also rely fast and its cleaner because having only one asset pipeline)

Prerequesites

• Vite
• jQuery

Vite

$ npm i foundation-sites

application.js

import 'foundation-sites'

import $ from 'jquery'; //=> ATTENTION: jQuery has to be imported after foundation. Foundation would not need this, it would be satisfied with the settings in vite.config.js
window.$ = $;

// initialize the page
window.addEventListener('load', (event) => {
    initPage();
});

window.addEventListener('turbo:render', (event) => {
    initPage();
});
function initPage() {
    $(document).foundation();
    console.log('foundation ready');
}

=> Javascript should work, you should see foundation ready on Browser/development/console

Asset Pipeline

add settings file for sass variables and copy foundation

from app-root, run:

$ mkdir ./app/assets/stylesheets/foundation
$ touch ./app/assets/stylesheets/_settings.scss
$ cp -r ./node_modules/foundation-sites/scss ./app/assets/stylesheets/foundation
$ cp -r ./node_modules/foundation-sites/_vendor ./app/assets/stylesheets/foundation

Smarter it would be symlinking them instead of copying. But, at least in my case, git doesnt transfer symlinks to folders (unlike symlinks to files). So, you would have to exclude them with .gitignore and adding them again by a deployment task (in my case capistrano) on the server. Here is gone the easier way.

app/assets/stylesheets/application.scss

make sure that the lines //= require tree and //= require . are removed

@import "settings";
@import "./foundation/scss/foundation";
@include foundation-everything()

cannot tell why, but i was not able to refer the @import directly to the nodes folder, i had to do theese symlinks.

Vite Stylesheets

Create folder stylesheets and symlink settings file

$ mkdir app/frontend/stylesheets
$ cd app/frontend/stylesheets
$ ln -s ../../../app/assets/stylesheets/_settings.scss .
$ cd ../../..

Layout

make sure stylesheet_link_tag "application" and = vite_stylesheet_tag 'application.scss', media: :all are present.

Test view

.haml

%button.button{"data-toggle" => "example-dropdown", :type => "button"} Toggle Dropdown
#example-dropdown.dropdown-pane{"data-auto-focus" => "true", "data-dropdown" => ""}
  Example dropdown.

.html.erb

<button class="button" data-toggle="example-dropdown" type="button">Toggle Dropdown</button>
<div class="dropdown-pane" data-auto-focus="true" id="example-dropdown">
  Example dropdown.
</div>

=> If the Popover works and looks like this, Foundation styles and javascript is working like it should.

Overview