Foundation + Rails 7 tutorial

Rails 7 is relatively new, so I can't see much documentation for it right now. Especially in using foundation as CSS framework in Rails 7. In this tutorial, I'll show you how I managed to make Foundation work.

We won't be using foundation-rails gem, it's currently not up to date. I'll be using a different method in this tutorial.

Be sure you're using Rails 7 for this one.

Install cssbundling-rails gem.
1. Add cssbundling-rails to your Gemfile with gem 'cssbundling-rails'
2. Run ./bin/bundle install
3. Run ./bin/rails css:install:sass
Install foundation-sites
```
yarn add foundation-sites
```
I'm using yarn for this tutorial. You could use npm for this one but I prefer yarn for now. For more information, you could check the foundation website.

Setup the SASS files.

Copy the file _settings.scss under node_modules/foundation-sites/scss/settings/_settings.scss. Then paste it in app/assets/stylesheets.

Edit the new _settings.scss. Change the line from:

@import  'util/util'

@import '../../../node_modules/foundation-sites/scss/util/util';

Create foundation_and_overrides.scss in app/assets/stylesheets with the following code:

@charset 'utf-8';

@import 'settings';
@import '../../../node_modules/foundation-sites/scss/foundation';

// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;

// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;

// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;

// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;

// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

// Helpers
@include foundation-float-classes;
// @include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;

This code is referenced from this.

Import the foundation_and_overrides.scss in application.sass.scss:

// app/assets/stylesheets/application.sass.scss
@import "foundation_and_overrides";

We're almost done. We just need the javascript necessary to use foundation.

Download foundation-sites js.
```
$ ./bin/importmap pin foundation-sites --download
```
This would download the javascript needed for the foundation. It would also download jquery. The downloaded file is located in /vendor/javascript

Next is add the javascripts in config/initializers/assets.rb
```
Rails.application.config.assets.precompile += %w( foundation-sites.js jquery.js  )
```
After that, update app/javascript/application.js
```
// Other imports...
import jquery from "jquery"
import "foundation-sites"

window.jQuery = jquery
window.$ = jquery

$(function() {
$(document).foundation();
})
```
Finally, recompile assets by running:
```
$ rails assets:precompile
```
That should do it! Check your rails app. Run localhost by using ./bin/dev instead of rails server.

In case you want to see the code, you could check the repository.