Setting up 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 saw that the Zurb Foundation can be installed through composer , and since I installed Laravel through composer , I thought it was a good idea. I did this, Foundation is in the vendor folder ( vendor/zurb/foundation ).

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 files? In the resources/assets/sass , where resources/assets/sass Laravel already provide the scss file (app.scss)? If so, how can I associate it with the Zurb Foundation?

Many thanks for your help.

Answer 1

I think Laravel Elixir is more suitable for this purpose.

From the manual:

Install Node

Before starting Elixir, you must first make sure that Node.js is installed on your computer.

  node -v 

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

Gulp

Then you want to insert Gulp as a global NPM package, for example:

  npm install --global gulp 

Laravel Elixir

The only remaining step is to install Elixir! With a new Laravel installation, you will find the package.json file in the root. Think of it like your composer.json file, except that it defines Node dependencies instead of PHP. You can install the dependencies to which it refers by running:

  npm install 

Then, to install Foundation 6 for sites, it is recommended that you use Bower , a (different) package manager, but specifically for managing external libraries like Foundation and jQuery.

You can see the Zurb example template for a better understanding.

 npm install --global bower 

Create a file called 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 into CSS:

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

Finally, to compile, run:

 gulp 

Answer 2

I think the npm way is better for front-end products. Take a look at this:

http://somethingnewtutorial.blogspot.com/2017/07/using-foundation-6-with-laravel-5.html

If you are using an earlier version, just use gulp instead of laravel-mix.