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.
-
Install cssbundling-rails gem.
- Add cssbundling-rails to your Gemfile with
gem 'cssbundling-rails'
- Run
./bin/bundle install
- Run
./bin/rails css:install:sass
- Add cssbundling-rails to your Gemfile with
-
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. -
Setup the SASS files.
Copy the file
_settings.scss
undernode_modules/foundation-sites/scss/settings/_settings.scss
. Then paste it inapp/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
inapp/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
inapplication.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.
-
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 ofrails server
.In case you want to see the code, you could check the repository.
Top comments (0)