5

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.

Hari Harker
  • 702
  • 1
  • 12
  • 29
Nicolas Lemoine
  • 341
  • 4
  • 18

2 Answers2

3

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
Community
  • 1
  • 1
Adam Elsodaney
  • 7,722
  • 6
  • 39
  • 65
  • I realised that I didn't actually answer your question - how to use the Composer-installed Foundation - I'll do that shortly (though I'm not to familiar with doing this approach) – Adam Elsodaney Mar 08 '16 at 22:31
  • 1
    Thanks for your reply but I did not manage to install Zurb Foundation with neither bower or npm... I managed only with composer... but I don't know how to use it. – Nicolas Lemoine Mar 13 '16 at 21:11
  • 1
    I'm confused as to the purpose of using yet another tool in the form of Elixir. Are you saying it's not possible to use Foundation for PHP with `composer`? This seems weird considering `composer` is the industry standard package manager for PHP. – Hashim Aziz Nov 19 '20 at 20:15
  • @Prometheus Since this was a Laravel application and Laravel already provided a dedicated frontend tool for this purpose, I thought it would make sense to use it... at the time. However fast-forward to today 4 and half years later and Elixir is dead along with Bower, Gulp is no longer the preferred tool. Yet Composer is still very much alive. – Adam Elsodaney Nov 23 '20 at 15:40
0

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

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

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

Deepak Shrestha
  • 773
  • 2
  • 9
  • 25