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.

1. 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

2. 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.

3. 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'
   

   to
   

   @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.

4. 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.