Using Foundation With Laravel 5.8

In my quest to move on from WordPress, I’m building my own blogging system / CMS for my website so that I only have the bits I need and can customise it to my requirements. Plus, I’m becoming a full-time web developer, I should at least develop my own website right? Part of this involves learning and using Foundation.

Foundation by Zurb is a CSS framework that you can use in your Laravel projects instead of Bootstrap, which is the default. After trying a few older ways to install Foundation with Laravel, I’ve decided to document the process that worked for me on Laravel 5.8.7.

First, install Laravel

laravel new project_name

Next, install the standard dependencies to initiate a basic npm environment with a fresh Laravel installation and make sure you have laravel-mix as we’ll be relying on this later on.

npm install
npm install laravel-mix

Great, that’s all set up and ready to go. Now, you’ll need to install the foundation-sites package.

npm install foundation-sites

Well, that was easy. Now, just a few edits to a few files and we’re all good and ready to go!


One thing I quickly wanted to mention here, depending on how you have things set up you may see the error below

npm WARN foundation-sites@6.5.3 requires a peer of what-input@>=4.1.0 but none is installed. You must install peer dependencies yourself.

Luckily, this is easily fixed with the command below!

npm install what-input

First, open up resources/js/bootstrap.js and remove the following lines from the initial try{} statement

window.Popper = require('popper.js').default;
...

require('bootstrap');

Then add the following to the same try{} statement

require('foundation-sites');

$(function() {
    $(document).foundation();
});

This should leave the whole area looking something a bit like this

try {
    window.$ = window.jQuery = require('jquery');

    require('foundation-sites');

    $(function() {
        $(document).foundation();
    });

} catch (e) {}

Great, now the last step is to edit /resources/assets/sass/app.scss and just make sure it looks like the following

// Variables
@import 'variables';

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

Now just empty all of the bootstrap related things from the _variables.scss file leaving it ready for your own uses.

Last step, check your webpack.mix.js file in the root of your project is set up as it should be below and you will find that running npm run dev or npm run prod will package everything up and plop the files where they should be ready for use in your next project.

const mix = require('laravel-mix');

...

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.