Foundation Laravel Package

Getting Started

1. Installation: Use npm or Yarn (npm install foundation-sites or yarn add foundation-sites) — Laravel Mix (or Vite) is typically used to compile the 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;
   

3. First Use Case: Build a responsive layout using the grid:

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

4. First Component: Add an accessible accordion:

   <div data-accordion>
     <button class="accordion-button" aria-expanded="true" aria-controls="panel1">Section 1</button>
     <div class="accordion-content" data-panel="panel1" id="panel1">
       <p>Content goes here.</p>
     </div>
   </div>
   

   Tip: Run npm run dev or npm run build after first setup to see changes.

Implementation Patterns

• Sass Theming: Override defaults before importing Foundation (in app.scss):

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

• Component JS with Alpine.js (Laravel native): Mount Foundation components imperatively in Alpine’s mounted():

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

• Utility-First Layouts: Combine grid and utility classes for rapid prototyping:

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

• Build Tool Integration: In webpack.mix.js, ensure sass() processes Foundation’s source files (set sourceMaps = true for easier debugging).
• Tree Shaking: Use @include foundation-xy-grid-classes; + selective imports (e.g., @import '~foundation-sites/scss/components/accordion';) to reduce CSS bundle size.

Gotchas and Tips

• Double Grid Conflicts: Avoid mixing .grid-x (Flexbox grid) and legacy .row/.column. Prefer .grid-x unless explicitly migrating.
• Component Initialization: Components don’t auto-initialize — call Foundation.addToJquery($); before $(document).foundation(); if using jQuery, or instantiate manually with vanilla JS (recommended in modern stacks).
• Sass Import Order Matters: Custom variable overrides must come before @import to take effect.
• RTL Support: Enable with $global-rtl: true; before import — but test thoroughly; some components (e.g., tooltips) need manual tweaks.
• Accessibility Pitfalls: Components like dropdown or orbit require correct aria- attributes — use the official component demos as templates.
• Debugging: Use Foundation.zf_init(); to rebind event listeners after DOM updates (e.g., in SPA workflows or Livewire re-renders).
• Custom Builds: Exclude unused components via selective imports:

  @import '~foundation-sites/scss/util/util';
  @import '~foundation-sites/scss/components/grid/grid';
  @import '~foundation-sites/scss/components/buttons/buttons';
  // Skip heavier components like Reveal or Interchange if not needed