Foundation + Rails 7 tutorial
Tags: ruby, css, rails, foundation
Published: 2022-04-14 10:44:26

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](https://github.com/foundation/foundation-rails), 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](https://github.com/rails/cssbundling-rails).
  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](https://get.foundation/sites/docs/installation.html)
    ```terminal
    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:
    ```css
    @import  'util/util'
    ```
    to 
    ```css
    @import '../../../node_modules/foundation-sites/scss/util/util'
    ```

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

    ```scss
    @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](https://get.foundation/sites/docs/sass.html).

    Import the `foundation_and_overrides.scss` in `application.sass.scss`:
    ```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`
    ```ruby
    Rails.application.config.assets.precompile += %w( foundation-sites.js jquery.js  )
    ```
    After that, update `app/javascript/application.js`
    ```javascript
    // 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](https://github.com/jkevinbaluyot/foundation-test).