Setup Zurb Foundation 6 (sass) in Laravel 5 using composer

Question

I am starting a new Laravel project with v5.2 and I would like to use Zurb Foundation v6.2.

I've seen that Zurb Foundation can be installed through composer and since I've installed Laravel through composer, I thought it as a good idea. I did it, Foundation is in the vendor (vendor/zurb/foundation) folder.

It has also been added to the composer.json:

"require": {
    "php": ">=5.5.9",
    "laravel/framework": "5.2.*",
    "zurb/foundation": "^6.1"
},

But now, how can I use it? Where should I create my css file(s)? In the resources/assets/sass folder where Laravel already provides a scss file (app.scss)? If so, how can I link it to Zurb Foundation?

Thanks a lot for your help.

Answer 1

I think Laravel Elixir is more suitable for this purpose.

From the guide:

Installing Node

Before triggering Elixir, you must first ensure that Node.js is installed on your machine.

 node -v

By default, Laravel Homestead includes everything you need; however, if you aren't using Vagrant, then you can easily install Node by visiting their download page. Don't worry, it's quick and easy!

Gulp

Next, you'll want to pull in Gulp as a global NPM package like so:

 npm install --global gulp

Laravel Elixir

The only remaining step is to install Elixir! With a new install of Laravel, you'll find a package.json file in the root. Think of this like your composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:

 npm install

Then to install Foundation 6 for Sites it's recommended to use Bower, (another) package manager, but specifically for managing frontend facing libraries like Foundation and jQuery.

You can have a look at Zurb's example template for better understanding.

npm install --global bower

Create a file named bower.json:

{
  "name": "my-site",
  "dependencies": {
    "foundation-sites": "~6.1.2",
    "motion-ui": "~1.1.0",
    "foundation-sites": "~6.2.0",
    "motion-ui": "~1.2.2"
  },
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "private": true
}

Then run bower install.

In app.scss, import Foundation:

@import 'foundation';
@include foundation-everything;

Then in gulpfile.js, compile it to CSS:

mix.sass('app.scss', 'public/css/app.css', {
  includePaths: [
      'bower_components/foundation-sites/scss/'
  ]
});

Finally to compile, run:

gulp