DEV Community

Cover image for Foundation + Rails 7 tutorial
John Kevin Baluyot
John Kevin Baluyot

Posted on • Edited on

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.

Top comments (0)