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.

Dissect

Nice question ,however id like to reframe it : how would you intergrate foundation-apps with laravel as in this question #33966213 . PLEASE NOTE : FOUNDATION-APPS AND NOT FOUNDATION-SITES – Redfish

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

Alterant

Awesome! Not only this helps not to duplicate the resources but it also keeps them in the place I'd suppose them to be in. By the way, where can I find a good documentation for these commands? Laravel Elixir page doesn't have much. For example, this includePaths was a new one for me. – Dissect

Right now, documentation about Elixir in the 5.1 branch is too brief. If you take a look at the 5.0 branch it contains more information. What I usually do is read the source code. All Laravel functions and classes use to be very well documented in the source code. – Alterant

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');

Reinwald