Foundation Laravel Package

Getting Started

1. Installation: Use npm or Yarn (npm install foundation-sites@6.9.0 or yarn add foundation-sites@6.9.0) with Node 18+ required. Ensure your build toolchain uses Dart Sass (v1.60+). Laravel Mix/Vite will need sass-embedded (no longer requires separate node-sass).
2. Initial Setup: Import Foundation’s core Sass into your main stylesheet (e.g., resources/sass/app.scss):

   @import '~foundation-sites/scss/foundation';
   @include foundation-everything;
   

   Run npm run dev or npm run build with sass-embedded to see changes.
3. First Use Case: Build a responsive layout using the grid (unchanged):

   <div class="grid-container">
     <div class="grid-x grid-padding-x">
       <div class="cell small-12 medium-6 large-4">...</div>
     </div>
   </div>
   

4. First Component: Initialize an accordion with Alpine.js (now optimized for Dart Sass):

   Alpine.data('accordion', () => ({
     init() {
       new foundation.Accordion(this.$el, { slideSpeed: 300 });
     }
   }));
   

Implementation Patterns

• Sass Theming: Override variables before importing Foundation (Dart Sass 2.0 compatibility):

  $primary-color: #1779ba;
  @import '~foundation-sites/scss/foundation';
  @include foundation-everything;
  

• Component JS: Use vanilla JS or Alpine.js for initialization (no jQuery dependency). Example for Tabs (fixed deep-linking bug in v6.9.0):

  document.addEventListener('DOMContentLoaded', () => {
    new foundation.Tabs(document.querySelector('[data-tabs]'));
  });
  

• Utility-First Layouts: Combine grid + utilities (unchanged):

  <div class="grid-x align-center">
    <div class="cell auto text-center py-3">Centered content</div>
  </div>
  

• Build Tool Integration: Update webpack.mix.js to use sass-embedded:

  mix.sass('resources/sass/app.scss', 'public/css', {
    implementation: require('sass-embedded')
  });
  

• Tree Shaking: Exclude unused components via selective imports (Dart Sass 2.0 warnings resolved):

  @import '~foundation-sites/scss/util/util';
  @import '~foundation-sites/scss/components/grid/grid';
  

Gotchas and Tips

• Node 18+ Requirement: Downgrade to Node 16+ will break builds. Use nvm to manage versions.
• Dart Sass 2.0 Migration: No breaking changes yet, but @use syntax (for @include replacement) is delayed to Foundation 7. Current @include usage remains stable.
• Abide Fixes: aria-describedby no longer auto-adds to hidden inputs (v6.9.0). Manually add if needed:

  <input type="hidden" aria-describedby="error-id">
  

• Focus Styles: Switch component now has improved focus behavior (test with :focus-visible).
• Deep Linking: Tabs now support hash-based navigation (e.g., #tab-panel-1).
• Debugging: Use Foundation.zf_init() for dynamic content (e.g., Livewire/Alpine). For Sass warnings, check the Discord server (GitHub issues are locked).
• Performance: sass-embedded reduces build times. Enable source maps in webpack.mix.js for debugging:

  mix.sass('...', '...', { sourceMap: true });