How to install Foundation in a Rails 6 site?

Rails has changed the asset pipeline and so the foundation gem does not work unfortunately (there’s been an open issue since August last year). What is the best way to add it to a new Rails 6 app?

Here’s what I have from a Foundation download:

Should I copy the css files into app/assets/stylesheets and add /*= require foundation to application.scss?

Do I then copy the contents of the js folder to: javascript/packs/? Then add this:

$(function(){ $(document).foundation(); });

to javascripts/packs/application.js?

The old instructions also say add //= require foundation however this no longer seems applicable in Rails 6 - should we instead be specifying:

require("vendor/") 

or will simply moving all of those files into the JS folder suffice?

Would be great if there was an up to date install guide for Rails 6 :relaxed:

There is no scss on your screenshot. You either use the css or the scss version but not both.

1 Like

Thanks @DanielRuf

I copied the css file over and renamed it scss (I only need scss to set my own variables) - is this ok?

I can’t get the JS to work, I copied the JS files into

javascript/packs/foundation

Then added

require("foundation") 
$(function(){ $(document).foundation(); });

Into javascripts/packs/application.js.

Is this correct? Should I do something else?

Are there are better ways to use Foundation in a Rails 6 app?

Your help would be greatly appreciated as I can’t find anything else on the web :relaxed:

In general we have the scss files in our templates and sourcecode so you could use this and extend the settings. But technically your approach should also work.

1 Like

This would require / load a package named foundation from node_modules. If you want to require / load a file you have to use its name and prepend ./ so it would be require("./foundation.js") if your file is foundation.js (it should have a file extension).

1 Like

I’m still having trouble with this sorry @DanielRuf. Is there a step-by-step guide to install Foundation for Rails 6 anywhere please?

I found this on Reddit, is this in line with your official guide on getting Foundation (and jQuery) set up in a Rails app?


yarn add jquery foundation-sites

In: config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}))

module.exports = environment

mkdir app/javascript/src

In: app/javascript/src/application.scss

@import '~foundation-sites/dist/css/foundation';

In: app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "foundation-sites"
require("src/application")

$(document).on('turbolinks:load', function() {
  $(document).foundation()
});

In: app/views/layouts/application.html.erb

<%=stylesheet_pack_tag'application',media: 'all','data-turbolinks-track':'reload'%>

Unfortunately the above only partly works - my css overrides in app/stylesheets/application.scss don’t seem to be having any effect and the foundation JS (for tooltips) is not working either.

Rails has become such a mess with webpacker :weary:

Is there an official guide on how to install Foundation for Rails 6 sites anywhere? It would be a huge help…

webpack is mostly for js and require without a leading ./ loads files from node_modules.

The require statement does not look right. And require is just for js files by default. Not sure how webpacker works under the hood but for scss you might need sass-loader and css-loader. Also not sure why you load the dist css file in a scss file. For more control you want to import the foundation sass files. See also https://github.com/foundation/foundation-zurb-template/blob/8336d31c7ead46baa7574ebcca5f9c449da2cbcf/src/assets/scss/app.scss

1 Like

12 posts were split to a new topic: Issues with Ruby on Rails and Foundation Sites 6

Daniel, lots of thanks as i found some really helpful information for my project. i appreciate it a lot. i was wondering if i could ask you some questions and if you don’t mind helping me further? again - thanks

Please create separate forum threads / topics so anyone can answer them.

Hi Daniel, which imports do I need to add to mimic the same as clicking ‘Download Everything’ from here: https://download.get.foundation/sites/download/

When I add everything in your link, the rails (dev) server just hangs for some reason :thinking:

It’s probably a setup issue as you have to define the right paths for the sass compiler (includePaths).

The ZURB template contains a complete setup and uses gulp to build the css files from the scss files.

1 Like

Where/how should I do that Daniel?

In my application.scss when I add the following I get some basic styles:

@import 'foundation-sites/scss/foundation';
@include foundation-global-styles;
@include foundation-typography;
@include foundation-xy-grid-classes;

(If I remove the 3 @includes I seem to get no styling) however I want to essentially get the same as when downloading the complete ‘download everything’ from your site as that’s what I’ve been using for the initial static build.

I am using a standard Rails 6 set-up (Webpacker).

(Is there a demo repo anywhere that shows a Rails 6 Foundation set-up?)

I think we already had some people here with webpacker (webpack) setups.
https://foundation.discourse.group/search?q=webpacker

If you still want to use webpack, you need a different setup.

~foundation-sites loads from node_modules/foundation-sites

So in your case try:

@import '~foundation-sites/scss/foundation';
@include foundation-global-styles;
@include foundation-typography;
@include foundation-xy-grid-classes;
1 Like

I had some issue with Foundation and Webpacker. So, I have created an exploration project here, a bit old but with few useful informations:

  • Rails 5.2.3
  • Ruby version 2.4.1p111 (2017-03-22)
  • Node version v10.15.3

The project first aim was to test Vue.js. The vue.js components are written:

  • Using haml instead of html
  • Using sass instead of css
  • Using coffeescript insteat of javascript.

This is an example of foundation used inside of a component:

<style scoped lang='sass'>
  @import '../foundation/application'
  @import "~leaflet/dist/leaflet.css"
  #carte_container
    width: 100%
    height: 75vh
    border: thin solid black
    background-color: $light-gray
    margin: 0

  #providers-list
    min-height: calc(11 * 36px)
    margin-left: 5px !important

  .footer
    position: absolute
    bottom: 0

  button.cell
    @extend .button
    margin: 15px

</style>

The whole project is available here:

and it is deployed on heroku here:

https://test-vue3.herokuapp.com/

Another example, simpler (no haml, very little coffeescript), Rails 6 and Ruby 2.7.0. This installation uses SASS/SCSS files (both are supported). The “interesting files” are located in /app/javascripts/foundation (_settings.scss, application.scss).