Some help setting up Zurb Foundation 5 with Laravel

Question

Fairly new to Laravel but have used older versions of Foundation a few times. I've setup a new laravel project and I'm trying to add the foundation framework into my project but I'm a little bit confused about how I go about doing this when I want to customise the scss files.

I don't see to be able to follow the limited instructions provided on the foundation website. I download the latest foundation version using bower and then 'created a new project' using grunt which places the foundation core files in a directory of my choosing. At this point I'm confused as to what I'm supposed to do next? I think I need to add the scss files into my app folder under assets which will then compile into my public/assets/css or js folders. Is this supposed to be a manual process or am I missing something? I assume I'm missing something else I don't see the benefit of using all these different packages just to get the source files.

I'm not clear how I go about setting this up, where everything should go. Is anyone able to give me a break down of the steps I should be following to get this setup? I specifically want to be able to customise the styles through sass, otherwise I would just manually create the folders for the compiled js and css.

Answer 1

I have the same issue as using Bootstrap SCSS version for Admin & Foundation SCSS for the frontend. I noticed also that both css frameworks come as composer packages however the issue you have with this approach is that you generally use other Javascript files in a development that will be merged also so using the composer versions just adds to the confusion.

The best solution i found was using either gulp or grunt with bower at the top level of your Laravel build. Rather that go through the configuration for you there is a good article at http://blog.elenakolevska.com/using-grunt-with-laravel-and-bootstrap/ that goes over a bootstrap integration but this can be tweaked for Foundation. This solution is good as grunt has many of the other popular javascript libraries that you may use in your project also..

Alternatively you could use an application like codekit and create a compass project to manage the merging & compiling of your assets into the public folder. As a side note if using git again your would need to exclude additional folders from your project.

If you think of your SCSS framework files as development assets there is no real need for them to be in the project as you only really need one version of Foundation on your development machine.

Your custom SCSS changes can be added to your Laravel project as modules ie a navigation module, via a private composer repo for the project or just added to the Compass project at development time. Your public folder should only be referencing the final merged style.css & java.js files for example. Any images from the framework can then just be copied over to the public folder ie icons etc.. Hope that helps..