Massive revamping for Rails 8 and Zurb

app/assets/stylesheets/_settings.scss

@@ -61,7 +61,7 @@
 //  57. Xy Grid
 
 @use "sass:color";
-@import 'util/util';
+@import 'foundation-sites/scss/util/util';
 
 // 1. Global
 // ---------

app/assets/stylesheets/actiontext.scss

@@ -1,36 +0,0 @@
-//
-// Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
-// the trix-editor content (whether displayed or under editing). Feel free to incorporate this
-// inclusion directly in any other asset bundle and remove this file.
-//
-//= require trix/dist/trix
-
-// We need to override trix.css’s image gallery styles to accommodate the
-// <action-text-attachment> element we wrap around attachments. Otherwise,
-// images in galleries will be squished by the max-width: 33%; rule.
-.trix-content {
-  .attachment-gallery {
-    > action-text-attachment,
-    > .attachment {
-      flex: 1 0 33%;
-      padding: 0 0.5em;
-      max-width: 33%;
-    }
-
-    &.attachment-gallery--2,
-    &.attachment-gallery--4 {
-      > action-text-attachment,
-      > .attachment {
-        flex-basis: 50%;
-        max-width: 50%;
-      }
-    }
-  }
-
-  action-text-attachment {
-    .attachment {
-      padding: 0 !important;
-      max-width: 100% !important;
-    }
-  }
-}

app/assets/stylesheets/admin.scss

@@ -1,3 +0,0 @@
-// Place all the styles related to the admin controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/application.sass.scss

@@ -0,0 +1,22 @@
+// Customize Foundation settings before loading the framework
+// @use '_settings' with (
+//   // Override default variables
+//   $primary-color: #1779ba,
+//   $header-color: green
+// );
+
+// @import 'foundation-sites/scss/foundation';
+@import 'foundation_and_overrides';
+
+// @import 'foundation-sites/scss/util/util';
+
+// Include specific Foundation components (optional)
+// see https://get.foundation/sites/docs/sass.html#adjusting-css-output
+@include foundation-global-styles;
+@include foundation-grid;
+@include foundation-typography;
+@include foundation-forms;
+@include foundation-button;
+// Add more components as needed
+
+@import 'my_styles';

app/assets/stylesheets/application.scss

@@ -1,16 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the top of the
- * compiled file, but it's generally better to create a new file per style scope.
- *
- *= require_self
- *= require font-awesome
- *= require my_styles
- */
-
-@import "foundation_and_overrides";

app/assets/stylesheets/browserslist

@@ -1,4 +0,0 @@
-last 2 versions
-ie >= 9
-Android >= 2.3
-ios >= 7

app/assets/stylesheets/foundation_and_overrides.scss

@@ -1,7 +1,7 @@
 @charset 'utf-8';
 
-@import 'settings';
-@import 'foundation';
+@import '_settings';
+@import '../../../node_modules/foundation-sites/scss/foundation';
 
 // If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
 //
@@ -9,48 +9,60 @@
 
 // We include everything by default.  To slim your CSS, remove components you don't use.
 
+// Global styles
 @include foundation-global-styles;
-@include foundation-xy-grid-classes;
-//@include foundation-grid;
-//@include foundation-flex-grid;
-@include foundation-flex-classes;
-@include foundation-typography;
 @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-accordion;
-@include foundation-accordion-menu;
-@include foundation-badge;
-@include foundation-breadcrumbs;
 @include foundation-button-group;
-@include foundation-callout;
-@include foundation-card;
 @include foundation-close-button;
-@include foundation-menu;
-@include foundation-menu-icon;
-@include foundation-drilldown-menu;
-@include foundation-dropdown;
-@include foundation-dropdown-menu;
-@include foundation-responsive-embed;
 @include foundation-label;
-@include foundation-media-object;
-@include foundation-off-canvas;
-@include foundation-orbit;
-@include foundation-pagination;
 @include foundation-progress-bar;
 @include foundation-slider;
-@include foundation-sticky;
-@include foundation-reveal;
 @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;
-@include foundation-title-bar;
-@include foundation-tooltip;
-@include foundation-top-bar;
-@include foundation-visibility-classes;
-@include foundation-float-classes;
 
-// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
-//
-// @include motion-ui-transitions;
-// @include motion-ui-animations;
+// 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;
+