Setup Bootstrap Sass with Laravel Elixir

Laravel Elixir is a fantastic package that simplifies working with Gulp. For the unfamiliar Gulp is a JavaScript task runner that allows you to automate tasks. It can be used for compiling CSS, concating and minifying JavaScript, and much more.

Gulp was designed to be faster than previous build tools by utilizing node streams and has become one of the go to build systems. Laravel Elixir is a wrapper around Gulp making the setup a breeze.

In this tutorial let’s take a look at how to setup Bootstrap Sass with Elixir in a default Laravel 5.1 install.

#Installing NPM Dependencies

Both Bootstrap and Elixir are node packages that are available via NPM, node package manager. If you open up the default package.json file you will see a list of dependencies:

"dependencies": {
    "laravel-elixir": "^3.0.0",
    "bootstrap-sass": "^3.0.0"
}

From terminal, run npm install and both these packages will be installed as well as any of their dependencies. If you are familiar with composer for PHP then it’s almost identical.

After the command finishes running, you can look in the node_modules folder and see a list of all the packages.

#Bootstrap Sass

Implementing Bootstrap into your project is now simple. Open resources/assets/sass/app.scss and uncomment this line:

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Save it and run gulp, then you have all the Bootstrap styles ready for you to use. That’s literally all that is required.

#Customizing Bootstrap Styles

If you are not happy with the default Bootstrap design you can easily customize it by overriding its variables. As an example let’s change the default font to Lato from Google Fonts.

Open resources/assets/sass/app.scss again and we can import the font and adjust the variable. Here is the whole file with these changes:

@import url(https://fonts.googleapis.com/css?family=Lato);
$font-family-sans-serif: 'Lato', sans-serif;
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

How this works is first we import the Lato font from Google. Next, we override Bootstrap’s existing variable for font-family. This works because Bootstrap uses the Saas !default. Here is how they describe it:

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

To find a list of all the variables you can customize open:

node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss

#Including Bootstrap JavaScript with Browserify

For including the Bootstrap JavaScript we have a few options. We could use their CDN, download it manually, or use a system called Browserify.

Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.

Because we already have Bootstrap installed through NPM we can utilize browserify and pull these into our app.js file. First, we do need to install jQuery and let’s do it through NPM by running the following command:

npm install jquery --save

Now, create the following file: resources/assets/js/app.js and add the following code:

window.$ = window.jQuery = require('jquery')
require('bootstrap-sass');
 
$( document ).ready(function() {
    console.log($.fn.tooltip.Constructor.VERSION);
});

Bootstrap expects jQuery to be global and with the first line we are including jQuery and assigning it to the window. The second line is requiring Bootstrap JavaScript. The last section is just a jQuery on ready and logging out the bootstrap tooltip version. This is used to just confirm it’s loading as we expect.

Now, lets modify the gulpfile.js in the project root:

elixir(function(mix) {
    mix.sass('app.scss')
        .browserify('app.js');
});

The simplicity of this shows just how great Elixir is. By just adding .browserify('app.js') everything is handled automatically. After saving run gulp again and this will be compiled into public/js/app.js

If you include this in your layout and load the site in a browser you should see 3.3.5 showing in the console.

#Going further

This tutorial just barely touches the surface on everything Elixir can do. Check the official docs for more information and be sure and check out the Laravel Elixir category for more tutorials and resources.