How to use Foundation with Laravel Elixir

24 de July, 2015

Update: a new version of this tutorial is available.

When it comes to front-end frameworks, Bootstrap (formerly known as Twitter Bootstrap) is the most popular. But popular does not mean better, and I’ve always preferred Foundation. So far, to use Foundation in a Laravel project I simply did a regular installation within the assets directory. Now, with the release of Elixir, we can simplify things a bit and use only one task runner for all the tasks you want to automate (compile SCSS, concatenate files, run tests…).

Let’s see how to use Foundation in a Laravel project.

0. Set up Elixir

Before we start, ensure that you have Elixir up and running. For this, it’s necessary to have Node.js (with npm) and gulp installed. Then, just run the following command at the root of the project (where the “package.json” file is). More information on the Laravel documentation.

npm install

By default, “package.json” includes Twitter Bootstrap as a dependency. Because we will use Foundation, we can delete that line before running the previous command. To remove Twitter Bootstrap after it’s installed just run:

npm rm bootstrap-sass --save

By this time we should be able to run, without errors, the gulp command.

1. Install Bower

Bower is the package manager that we’ll use to install Foundation. Note that it should be installed globally (so the flag -g).

npm install -g bower

Then we have to initialize Bower. For this, create a file called bower.json (where the only required value is “name”) or run the initialization tool:

bower init

Don’t forget to add the “bower_components” folder to “.gitignore”.

According to the Foundation page on GitHub there is also a npm package, that would made it unnecessary to install Bower. But from what I saw, if we install Foundation via npm, none of the dependencies (jquery, Modernizr, etc …) are installed. Hence the preference for Bower.

2. Install Foundation

We are finally ready to install Foundation, with the following command:

bower install foundation --save

After installation, we’ll need two files in the “resources/assets/sass” folder. These are the files that we’re going to edit.

2.1. Copy the “_settings.scss” file from “bower_components/foundation/scss/foundation” to “resources/assets/sass”. This file contains all the parameters of the various elements of Foundation that we can customize.

2.2. In “resources/assets/sass” create a file called “app.scss”with the following content.

@import "settings";
@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";

This is the main file, which makes all the necessary imports and where we can write our own SCSS. Note that it’s preferable to import only the components that we are actually going to use, in order to limit the size of the CSS file that will be generated. For this, we must comment or delete the line @import “foundation”; and uncomment the required lines in the following block.

3. Write the Elixir tasks

Finally, we just have to write the Elixir of tasks that will compile the SCSS to CSS and copy some required JavaScript files.

elixir(function(mix) {
    // Sass
    var options = {
        includePaths: ['bower_components/foundation/scss']
    };

    mix.sass('app.scss', null, options);

    // Javascript

    // base directories
    var bower = '../../../bower_components/';
    var foundationScripts = bower + 'foundation/js/foundation/';

    mix.scripts([
        bower + 'jquery/dist/jquery.js',
        foundationScripts + 'foundation.js',
        foundationScripts + 'foundation.topbar.js',
        foundationScripts + 'foundation.alert.js',
        foundationScripts + 'foundation.reveal.js',
        foundationScripts + 'foundation.tooltip.js',
        foundationScripts + 'foundation.accordion.js',
        'start_foundation.js'
    ])
       .scripts([
        bower + 'modernizr/modernizr.js'
    ], 'public/js/modernizr.js');
});

In the Sass task, we set the ‘includePaths’ option so we can simplify all the imports in .scss files. This task will create a file “app.css” in the “public/css” that we can then use on our website.

In the JavaScript tasks, we copy and concatenate the needed files to Foundation work properly. At a minimum, we need “jquery.js” and “foundation.js”. Then we add the files for the components that we’ll use (the files listed are only an example). The “start_foundation.js” file includes only the code to initialize Foundation.

$(document).foundation();

This will generate a file called “all.js” in “public/js” that we can then use.

The “modernizr.js” file is created apart because, normally, this file should be included in the head of the HTML document, while the remainder may be included at the end.

4. Conclusion

And that’s it. Now, to run, simply type gulp to run the tasks once or gulp watch to perform the tasks whenever there’s a change in one of the files.

If we want the created files to also be minified we must add the flag “–production” (gulp –production or gulp watch –production).