If you’re a follower of this blog, you’ll know that I’m a fan of static site generators like Jekyll. Creating a basic Jekyll site is very simple: Jekyll will do the heavy lifting for you. But there’s more to a modern website than a basic scaffold of folders and files. Most depend on a number of external libraries, frameworks, and other tools.
The process of beginning a new project often involves heading to the sites of tools like Bootstrap, Foundation, and JQuery to grab the most recent version, unzipping them and dropping them where you want them in your project folder. That doesn’t seem especially onerous, and it isn’t, but it can be a drag when you do it for every new project.
Bower is a package manager for web developers that streamlines the job. If you’re a Linux user, the concept of a package manager will be familiar to you. A package is a bundle of software components, and package managers allow you to install, update, and otherwise manage them. But package managers don’t just deal with single packages: they also manage the dependencies of those packages.
The easiest way to install Bower is with the Node package manager “npm”. If you haven’t got Node installed, use your OS package manager to grab it (it’s package managers all the way down). To install Bower globally run the following command.
npm install -g Bower
To continue with the Foundation example, installing the framework is as simple as running “bower install foundation” from within your project directory. Bower will create a folder called “bower_components” and pull in Foundation and its dependencies.
You shouldn’t edit the files in this folder: Bower is capable of updating them to new versions, and files you have edited will be overridden.
If you aren’t sure of the right name of the package you need, you can search the available packages with:
bower search < package-name >
Bower has some other tricks up its sleeve too. Its complement of packages is fairly extensive, but nowhere near as extensive as the number of projects on GitHub, which is why it’s rather nice that Bower can import GitHub projects. For example, the excellent Sassline framework, which is worth a look at if you’re interested in web typography, isn’t available as a Bower package.
To install it you simply need to run:
Bower install git://github.com/designbyjake/sassline.git
Bower isn’t an essential tool, but modern front-end development involves an increasingly complex set of libraries and frameworks, and Bower makes managing them as painless as possible.