Using Foundation 6 with Laravel 5

Laravel comes ready with Twitter bootstrap and Vue.js to get started with our project. But what if we want to use Zurb Foundation?

I am assuming we already know the traditional way of referencing and using foundation via CDN or downloading and referencing it locally. But this tutorial is for those who want to use the power of SCSS in foundation inside Laravel.

As of this writing I am using Laravel 5.4 and Foundation 6.4.1 on windows 10 with XAMPP.

Assuming we have all the necessary installation like php, composer, node.js, npm, git etc., let get started.

Let get started and go through it step by step.

Step 1: Install a Fresh Copy of Laravel

Documentation: https://laravel.com/docs/5.4

$ laravel new foundation_test
$ cd foundation_test

Open the folder with our favorite editor like Sublime Text, Atom Editor or Visual Studio Code.

If we open package.json file, the initial file looks like this

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

Step 2: Install Foundation For Sites via npm

$ npm install foundation-sites --save-dev

After this step we will be able to see the foundation version installed on our package.json file.


"devDependencies": {
  "axios": "^0.16.2",
  "bootstrap-sass": "^3.3.7",
  "cross-env": "^5.0.1",
  "foundation-sites": "^6.4.1",
  "jquery": "^3.1.1",
  "laravel-mix": "^1.0",
  "lodash": "^4.17.4",
  "vue": "^2.1.10"
}

Step 3: Edit 'package.json' File

(a) Open the package.json file on editor and remove the line that contains bootstrap and save the file.

(b) If we look at the foundation installation, foundation works with Jquery version 2. To check this, open the file node_modules/foundation-sites/vendor/jquery/dist/jquery.js

(c) Since we have Jquery 3.1.1 installed by default, lets change the version to 2.1.4 as foundation might have problem with latest version. So after editing, section should look like this.

"devDependencies": {
  "axios": "^0.16.2",
  "cross-env": "^5.0.1",
  "foundation-sites": "^6.4.1",
  "jquery": "^2.1.4",
  "laravel-mix": "^1.0",
  "lodash": "^4.17.4",
  "vue": "^2.1.10"
}


(d) Lets update the packages

$ npm update



Once updated, at least Jquery 2.2.4 will be installed. We are done with this part and lets work on SCSS part now.

Step 4: Set up SCSS Part

(a) If we look at the resources/assets/sass folder, we can find 2 files _variables.scss and app.scss. We can rename app.scss whatever we like (we just have to reflect that change on laravel-mix as well). Let's edit app.scss file.

Remove the lines

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";


Replace with

// Foundation
@import "node_modules/foundation-sites/assets/foundation";


(b) Foundation uses global settings file called _settings.scss, in this file we can change any default values set by foundation to suit our needs. Let say we don't care about the customization, we can leave this intact. However if our site theme changes during special times, this file is very handy for tweaking. This file can be found at /node_modules/foundation-sites/scss/settings/_settings.scss.

At this point we can do 2 things, either reference that file in our app.scss directly on node_modules folder or copy it to our resources/assets/sass folder. Later option is more suitable in a situation where we need to do lots to tweaking. Lets copy that file now so that we don't have to dig down to node_modules later when we need it.

(c) copy /node_modules/foundation-sites/scss/settings/_settings.scss to our resources/assets/sass

(d) Reference this file in our `app.scss`

Remove this line

// Variables
@import "variables";


and replace with

// Foundation settings
@import "settings";


At this point we can delete the file _variables.scss


(e) Since we copied _settings.scss file to our convenient location, lets edit this file.

Change this line

@import 'util/util';


with this one, so that it can reference it correctly

@import "node_modules/foundation-sites/scss/util/util";


(f) From this point we can create other SCSS files as needed and import it in our app.scss

Step 5: Setup JS Part

(a) Rename resources/assets/js/bootstrap.js to foundation.js. Change the following:

Change this

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

    require('bootstrap-sass');
} catch (e) {}


to this one

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

    require('foundation-sites');
} catch (e) {}



$(document).foundation(); // initialize foundation 


 


(b) Open app.js

Change this

require('./bootstrap');


to

require('./foundation');







If foundation doesn't initialize as expected, then initialize on the page like this
.
.
.
<script>
   $(document).foundation(); 
</script>
</body> // before closing body tag
 

At this point we are all set to be using Foundation.

Step 7: Testing

=================

(a) Open resources/views/welcome.blade.php

Add this line after <title> tag
<link href="css/app.css" rel="stylesheet" type="text/css">

Add this line before </body> ending tag.
<script src="js/app.js"></script>


(b) Use some Foundation styling.

Grab this code from Foundation Documentation site http://foundation.zurb.com/sites/docs/button-group.html#coloring

Paste it on our blade file somewhere after <body> tag and save the file.

<body>

  <div class="small 12 columns">
    <div class="button-group">
      <a class="secondary button">View</a>
      <a class="success button">Edit</a>
      <a class="warning button">Share</a>
      <a class="alert button">Delete</a>
    </div>
  </div>
  .
  .
  .


(c) Open the console (Git Bash or similar) on the location of our installation.

$ npm run dev

Let it finish processing

$ php artisan serve


(d) Open browser and go to http://127.0.0.1:8000/. We should see the colored buttons on the page as expected.



Thanks for spending time together. Hope this helps in someway.