DEV Community šŸ‘©ā€šŸ’»šŸ‘Øā€šŸ’»

DEV Community šŸ‘©ā€šŸ’»šŸ‘Øā€šŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Foundation + Rails 7 tutorial
John Kevin Baluyot
John Kevin Baluyot

Posted on • Updated 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)

šŸŒš Friends don't let friends browse without dark mode.

Sorry, it's true.