Foundation with Laravel and Elixir

Question

How to use Foundation with Laravel?

I thought I installed Foundation in the vendor folder with bower install foundation . This leads to the presence of the vendor/bower_components , where I have Foundation and all the necessary libraries like jQuery.

What should be added to gulpfile.js for Elixir to correctly interpret this? It should be possible

• update Bower components
• install new bower packages
• Modify Foundation Sass variables without overwriting them when upgrading
• use compass

In a project other than Laravel, I will run Ruby gem foundation new my_project and include the compiled files manually. However, in this case, the command creates many files that are not required to work.

Answer 1

Laravel Elixir includes Libsass, so you won’t need Ruby to compile your Foundation Sass files from Laravel. All you need is a gazebo and an elite caramel elixir. Also, you do not need to copy files from the bower_components folder to the resources/assets folder.

First, follow the official instructions for installing Elixir.

Then create a .bowerrc file in the root of your Laravel project with this content:

 { "directory": "vendor/bower_components" } 

Then create a bower.json file in the root of your Laravel project with this content:

 { "name": "laravel-and-foundation", "private": "true", "dependencies": { "foundation": "latest" } } 

Then install both towers and the foundation:

 npm install --global bower bower install # This will install Foundation into vendor/bower_components 

Then create a resources/assets/sass/_settings.scss with this content:

 // Custom settings for Zurb Foundation. Default settings can be found at // vendor/bower_components/foundation/scss/foundation/_settings.scss 

Then edit the resources/assets/sass/app.scss with this content:

 @import "normalize"; @import "settings"; // Include all foundation @import "foundation"; // Or selectively include components // @import // "foundation/components/accordion", // "foundation/components/alert-boxes", // "foundation/components/block-grid", // "foundation/components/breadcrumbs", // "foundation/components/button-groups", // "foundation/components/buttons", // "foundation/components/clearing", // "foundation/components/dropdown", // "foundation/components/dropdown-buttons", // "foundation/components/flex-video", // "foundation/components/forms", // "foundation/components/grid", // "foundation/components/inline-lists", // "foundation/components/joyride", // "foundation/components/keystrokes", // "foundation/components/labels", // "foundation/components/magellan", // "foundation/components/orbit", // "foundation/components/pagination", // "foundation/components/panels", // "foundation/components/pricing-tables", // "foundation/components/progress-bars", // "foundation/components/reveal", // "foundation/components/side-nav", // "foundation/components/split-buttons", // "foundation/components/sub-nav", // "foundation/components/switches", // "foundation/components/tables", // "foundation/components/tabs", // "foundation/components/thumbs", // "foundation/components/tooltips", // "foundation/components/top-bar", // "foundation/components/type", // "foundation/components/offcanvas", // "foundation/components/visibility"; 

Configure the gulpfile.js file for this content:

 elixir(function(mix) { // Compile CSS mix.sass( 'app.scss', // Source files 'public/css', // Destination folder {includePaths: ['vendor/bower_components/foundation/scss']} ); // Compile JavaScript mix.scripts( ['vendor/modernizr.js', 'vendor/jquery.js', 'foundation.min.js'], // Source files. You can also selective choose only some components 'public/js/app.js', // Destination file 'vendor/bower_components/foundation/js/' // Source files base directory ); }); 

To build, simply follow the official docs:

 gulp # Run all tasks... gulp --production # Run all tasks and minify files gulp watch # Watch for changes and run all tasks on the fly 

Compiled files will be in public/css/app.css and public/js/app.js

To update the latest version of Zurb Foundation, do:

 bower update 

Answer 2

Copy the tool> scss folder to resources> resource folder, rename scss to sass, in gulpfile.js add the following

 elixir(function(mix) { mix.sass('foundation.scss'); }); 

Run gulp, which will generate the foundation.css file in the public css folder, include this file in your project.

For js files, you can just use something like this to copy the file

 mix.copy('resources/assets/foundation/js/app.js', 'public/js/app.js');