How to Setup Bower in Your Next Project

Throughout this series, we've been taking a look at Bower and how it can improve our WordPress developer. As we wrap up this series, we're going to take a look at how to setup Bower for your next project. Specifically, we're going to cover how to install, update, and customize various components using Bower.

In previous posts, I talked about what Bower is and how it can help you with you WordPress development. In this post, I am going to walk you through how to setup Bower for your project and some advanced techniques with it as well.

Some of the concepts are similar to Grunt, so I would suggest taking a look at a previous post, Setting Up Grunt For Your Next Project. We are finally getting into some code. Let's do this!

bower.json

The key to Bower in a project is the bower.json file. This is what will be parsed during a bower install for you and any consumer of your project. It is also necessary in order to save dependencies, but more on that later.

The first thing that we are going to do is create a bower.json file in the project's root folder. I would suggest starting with at least the name, description, and version.

Here's what we will start with:

{
    "name": "tuts-bower",
    "description": "Example project for tutorial on Bower for Tuts+",
    "version": "1.0.0"
}

Installing Dependencies

Now that we have a bower.json file, let's add Bootstrap to our project. We are going to do this by going to the command line and typing in bower install bootstrap-sass-official --save. This should create a bower_components folder with a bootstrap-sass-official folder inside it, along with updating our bower.json file.

Here's what it should look like now:

{
  "name": "tuts-bower",
  "description": "Example project for tutorial on Bower for Tuts+",
  "version": "1.0.0",
  "dependencies": {
    "bootstrap-sass-official": "~3.1.1"
  }
}

You will notice dependencies is added and there is bootstrap-sass-official along with the latest version number.

Updating Components

One of my favorite features of Bower is how simple it is to update the components I use in a project. For those who know me, I am usually one to try out the latest version of whatever libraries I'm currently using. As soon at a new release of Bootstrap comes out, I'm pulling it into a project. Bower makes it really easy to do this.

In our above example, the tilde "~" in front of the version number simply means to use at least this version. It will also update your project to any new patch release when you run bower update. For example, when/if Bootstrap updates to 3.1.2, you can simply run bower update and you will get updated to that version.

There's a number of different ways that you can specify what versions of each component to use.

Explicit version - 3.1.1
Only patch versions - ~3.1.1
Minor versions - ^3.1.1
Latest version - *
The whole list

Using Components

Now that we have Bootstrap installed, let's get it built into our project. For the example in this post I am only going to add the styles to the project, not the JavaScript or Fonts. I do include these in the full project on GitHub.

The first thing we are going to want to do is create a style.scss file that we will compile into our style.css file in the root of our project. I usually create a structure like css/sass/ then place all of my .scss files in the sass folder. Let's go ahead and create our style.scss file in there.

Since we are making a theme, we need a few comments at the top, then we can import in the bootstrap.scss file that we pulled down with Bower. You will need to figure out the path to it, then use an @import to bring it in like so:

/*!
Theme Name: Tuts Bower
Theme URI: http://code.tutsplus.com/
Version: 1.0.0
Description: Example project for tutorial on Bower for Tuts+
Author: Jason Bradley
Author URI: http://jasonbradley.me
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

// Import Bootstrap styles
@import '../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';

I'm using grunt-contrib-sass in my example project, now when we run our Sass compiler, it will compile the bootstrap.scss into our style.css file. Now we have all of the Bootstrap styles added to our project.

Customizing Components

There are two ways that you can customize these components: I'm going to focus on the styling. One way is to override the styles with another stylesheet or lower in the order of things being compiled in your .scss files. Another way, the one I recommend, is to override the existing .scss files that you are pulling in with Bower.

Let's look at the bootstrap.scss file that I referenced in the previous section. It is essentially importing to the other .scss files it needs to compile. If you look at the files and the order in which things are being imported, you should see the variables.scss file at the top. As a project, Bootstrap has done a great job of extracting out commonly overriden or reused styles like colors and font sizes into here.

What we can do is copy the bootstrap.scss file and add it as one of our theme's .scss files in the css/sass folder. Once we do that we will want to change the path of all of the files it imports to point to our bower_components directory.

We can also add our own .scss files inside this file to override things, like the sass variables in variables.scss. Let's say you wanted to update the background color. There's a variable inside of Bootstrap's variables.scs file called $body-bg, and we can simply override that in our theme's variables.scss file.

Both examples above would be changing from this:

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

to this:

// Core variables and mixins
@import "../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/variables";
// Overriding default Bootstrap variables
@import "variables";
@import "../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/mixins";

This is one thing that is a little bit harder to explain without a concrete demo, so I put together an example on GitHub so you can take a look.

Conclusion

This concludes our series on Bower. We talked about what Bower is, how it can help your WordPress development and now talked about how to set it up.

Bower has really become the defacto frontend dependency manager, so I hope this helps you know the concept and understand how to utilize it in your own projects.

HIGHLIGHTS OF THE DAY