Foundation CSS Framework

Template Source

Review the code before running this template on your machine.

run "yarn add foundation-sites"
run "mkdir -p app/javascript/css"
run "touch app/javascript/css/application.scss"

copy_file Rails.root.join("node_modules/foundation-sites/scss/settings/_settings.scss"), "app/javascript/css/_settings.scss"
gsub_file "app/javascript/css/_settings.scss", "@import 'util/util';", "@import '~foundation-sites/scss/util/util';"

inject_into_file "app/javascript/css/application.scss" do
  <<~EOF
    @import '~foundation-sites/scss/foundation';
    
    @import 'settings';

    // Include everything by default. Pick individual components from here instead
    // https://github.com/foundation/foundation-sites/blob/develop/scss/foundation.scss#L80

    @include foundation-everything();
  EOF
end

inject_into_file "app/javascript/packs/application.js" do
  <<~EOF

    require("css/application.scss")
  EOF
end

inject_into_file "config/webpack/environment.js", after: "require('@rails/webpacker')\n" do
  <<~EOF

    environment.loaders
    .get('sass')
    .use.find(item => item.loader === 'sass-loader').options.includePaths = [
      'node_modules'
    ]
  EOF
end

inject_into_file "app/views/layouts/application.html.erb", before: "</head>" do
  <<~EOF
    <%= stylesheet_pack_tag 'stylesheets', media: 'all', 'data-turbolinks-track': 'reload' %>
  EOF
end

# Add the javascript part of Foundation. Requires jQuery
run "yarn add jquery"

inject_into_file "app/javascript/packs/application.js" do
  <<~EOF

    import { Foundation } from 'foundation-sites'
    import $ from 'jquery'

    document.addEventListener('turbolinks:load', () => $(document).foundation())
  EOF
end

Comments

Sign up or Login to leave a comment.