Weave Code
Foundation Laravel Package
zurb/foundation
Foundation is a responsive front-end framework for building sites and apps on any device. Includes a customizable grid, Sass mixins, JavaScript plugins, and accessibility support, with docs and releases available to help you go from prototype to production.
The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
Frequently asked questions about Foundation
- Can I use Foundation 6.9 directly in Laravel without Node.js?
- No, Foundation requires Node.js 18+ for Sass compilation and JavaScript processing. Laravel projects must integrate it via Laravel Mix or Vite, which both depend on Node.js. Ensure your environment supports Node 18+ for full functionality.
- How do I migrate from Node Sass to sass-embedded in Laravel Mix?
- Remove `node-sass` from your `package.json`, install `sass-embedded` via npm, then update your `webpack.mix.js` to explicitly use it: `mix.sass('resources/scss/app.scss', 'public/css', { implementation: require('sass-embedded') })`. Test your build pipeline afterward.
- Will Foundation 6.9 work with Laravel 8 or 9?
- Yes, but you’ll need to manually configure Laravel Mix to use `sass-embedded` or migrate to Vite (recommended for long-term compatibility). Laravel 10+ natively supports sass-embedded via Vite, reducing setup complexity.
- Are there breaking changes in Foundation 6.9 for Laravel projects?
- The shift to `sass-embedded` and Node 18+ are the primary changes. Existing Sass using `@include` may trigger deprecation warnings until Foundation 7 (F7), which will enforce `@use`. Audit your Sass files and plan for migration if needed.
- How do I integrate Foundation’s JavaScript plugins (e.g., Tabs, Abide) in Laravel?
- Include Foundation’s JS via npm (`foundation-sites`), then initialize plugins in your app.js: `$(document).foundation();`. For Laravel Mix, ensure the JS is bundled and included in your Blade templates. Test for conflicts with other libraries like jQuery.
- What’s the best way to handle Foundation’s CSS in Laravel 10 with Vite?
- Laravel 10’s Vite setup automatically supports `sass-embedded`, so no additional configuration is needed for Foundation’s Sass. Import Foundation’s SCSS in your `resources/css/app.css` and reference it in Blade using `@vite('resources/css/app.css')`.
- Does Foundation 6.9 support older browsers like IE11?
- No, Foundation 6.9 drops IE11 support. It targets modern browsers (Chrome, Firefox, Safari, Edge). Verify your Laravel app’s browser support requirements before adoption.
- How do I test Foundation’s responsive grid in Laravel?
- Use Laravel’s built-in testing tools (e.g., `php artisan serve`) alongside browser dev tools or services like BrowserStack. Test grid breakpoints, mobile menus, and JavaScript interactions across devices to ensure responsiveness.
- Are there alternatives to Foundation for Laravel frontend development?
- Yes, alternatives include Bootstrap (via Laravel packages like `laravel-bootstrap-5`), Tailwind CSS (with `laravel-mix` or `vite`), or Bulma. Foundation stands out for its advanced grid system and Sass flexibility, but choose based on your project’s needs.
- How do I update Foundation in a Laravel project without breaking builds?
- Backup your `node_modules` and `package-lock.json`, then run `npm update foundation-sites`. Test your build pipeline (Laravel Mix/Vite) and CI/CD environments thoroughly. Check Foundation’s release notes for breaking changes between versions.
Weaver
How can I help you explore Laravel packages today?