Search code examples
laravelzurb-foundationzurb-foundation-6laravel-5.5

How to add Foundation framework to Laravel 5.5

How can I add lattest Zurb Foundation framework to Laravel 5.5? I want to change default Bootstrap framework to Foundation.

Solution

  • This is how I add the lattest Zurb Foundation framework to Laravel 5.5.

    Hope it will help somebody.

    1. Open package.json and remove bootstrap entry and then install lattest foundation-site version using npm: npm install foundation-sites@latest --save-dev

    2. Then go to resources/assets/sass/app.scss You can import settings here if you have your own, if not you just need to import foundation.scss with default foundation settings:

    @import "~foundation-sites/scss/foundation.scss"; @include foundation-everything(true);

    1. Next step you need to go to node_modules/foundation-sites/sass/foundation.scss and do that steps:

      • Uncomment there a default settings import block which can be found at row number 18 or 20.

      • Then swap that settings import block with util import block placed right below the first one, because settings.scss needs util therefore it should be placed before.

    2. Then go to node_modules/foundation-sites/sass/settings/_settings.scss, find there a default util import block at row number 63 and comment it. You do this because util imported before, so you aint need to duplicate that import.

    3. Then go to resources/assets/js/bootstrap.js and change

    require('bootstrap-sass');

    to

    require('foundation-sites');
    $(document).foundation();

    You don't need to change anything in webpack.mix.js