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.
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:
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
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.
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.
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).