Foundation with Laravel and Elixir

Question

How should one use Foundation with Laravel?

I thought I'd install Foundation in vendor folder with bower install foundation. This results into having a vendor/bower_components folder where I have Foundation and all required libraries such as jQuery.

What should I add in gulpfile.js for Elixir to interpret this correctly? It should be possible to

• update Bower components
• install new Bower packages
• modify Foundation Sass variables without these being overwritten when updating
• use Compass

In a non-Laravel project I would run the Ruby gem foundation new my_project and include the compiled files manually. However, in this case the command creates a lot of files 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'll need is bower and Laravel Elixir. Also you don't need to copy files from bower_components folder to resources/assets folder.

First follow official instrucctions for installing Elixir.

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

{
    "directory": "vendor/bower_components"
}

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

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

Then install both bower and foundation:

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

Then create the file resources/assets/sass/_settings.scss file 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 file resources/assets/sass/app.scss file 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 file gulpfile.js with 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 just follow 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

Your compiled files will be at public/css/app.css and public/js/app.js.

To update to the latest Zurb Foundation version just run:

bower update

Answer 2

Copy Fundation > scss folder to resources > assets folder, rename scss to sass, in your gulpfile.js add following

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

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

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

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