Best practice: adding Bourbon to Sage

Hey guys, I recently found this post on best practice of adding Compass into Sage.

Could anyone give any tips on best practice for adding Bourbon?

It seems there are 3 ways I can think of doing it:

  1. Adding Bourbon into the bower.json file before setting up Sage, then running bower install

  2. Installing Bourbon as a gem gem install bourbon, then running bourbon install --path /bower_components

  3. The method I’ve chosen: just run bower install bourbon

3 Seems the simplest. I’m not sure which method is best though. Just wanted to cross-check this with the great and wise Sage community.

I do 3. Works fine. I can’t remember if I had to put any overrides. I’m pretty sure wiredep just picks it up automatically without any work on your part.


Edit: I was having some issues importing it on the project I was working on, then I realized I was just being silly because that project was Sage-LESS. Obviously Bourbon wouldn’t work on LESS. Only SCSS/SASS– v8.2+.

Seems to be working great now that I realized that. Thanks man!

Hey guys, I’m curious, are the two of you using Neat & the Refills as well, or just the Bourbon mixin library?

I’ve been intrigued by the Bourbon stuff for a while. I’ve played around with it, but I haven’t used it in a real project, and I’ve always stuck to Bootstrap with my Sage projects because I wasn’t sure how much of a PITA it would be to get everything up and running.

It’s a relatively simple theme, but here’s an example of one:

You don’t get as much as Bootstrap out of the box, obviously. But compiled CSS and JS can be quite a bit smaller


I’m actually in the exact same boat as you Smutek, I’m just barely looking into Bourbon as of today.

This is exactly why I was skeptical of making the switch from LESS to SASS. My LESS library is now evolving into something bigger– more comprehensive as SASS. All these new frameworks keep popping up– such as Compass and Bourbon(as well as Bitters, Neat, Refills, etc). I was planning on using Compass, but I REALLY like to keep things SUPER simple, so I think Bourbon is where I’m going to experiment for the moment(because it’s lighter and simpler than Compasss, to my knowledge).

But this is my first day to it. I’m trying to figure out how to implement it into my projects as quickly as possible and watching this video to get a starting point.

Compass has been around for a long time, and I wouldn’t necessarily suggest using it anymore. It has some helper functions, and back in the day the automatic sprite generator was amazing. However with the ability to use gulp.js now as well as the rising of font icons, sprites aren’t super needed anymore on most projects, and if you do need image sprites you can add that in pretty quickly with a gulp plugin.

Bourbon has also been around for a while, but it continues to evolve. About two years ago, Bourbon and Neat was all there was, so since I’ve really used them a lot, Bitters and Refills are brand new to me. But the cool thing is that they’re all optional, so you can start with Bourbon (and probably Neat, as that’s basically the grid system), and add on the other things as necessary.

The other cool thing about using Bourbon and it’s components instead of Bootstrap is that it’s mostly mixins and variables, so the initial stylesheet is much smaller than even a customized and reduced Bootstrap CSS file.


That’s funny you say Compass was well known for it’s sprite generator because I’ve heard that as well. And when I heard that I thought– why would I need to use sprites? I use almost strictly SVG nowadays.

SVGs can be tricky, but I’ve got a system that works for me. It’s primarily based on Chris Coyier’s Using SVG article, mixed with Treehouse’s method for The Perfect WordPress Inline SVG Workflow.

So to do it in Sage, you just:

  1. Open up vector file in Adobe Illustrator.
  2. Save as an .svg, click okay on the default SVG settings.
  3. Take that SVG and optimize it on this site
  4. Save it as inline-[your-file-name].svg.php (no brackets obviously)
  5. Then to input the html/php markup I use this <svg><?php get_template_part( 'assets/svg/inline', 'your-file-name.svg' ); ?></svg>

I’m sure a lot of you have your own systems, but I love inline SVGs because they keep things super clean. If anyone has any methods for SVGs with cleaner base markup, I’d LOVE to hear 'em. Although this should definitely be a topic for another thread.


Good stuff Kalen! I’m going to load this up and have a look tomorrow.

As an aside, I love that social media menu technique. I do something similar, I learned it from this post on Justin Tadlock’s site. I’m kind of addicted to it, and use it everywhere now. :slight_smile: It’s a really great, easy to use option on the client side, I think.

1 Like

Thanks, I think I put in the credits that I basically yanked the idea from Automattics Minnow theme. I reviewed it for the WP theme repository and thought it was a pretty cool idea

I’ve used Bourbon + Neat quite a bit. I’ve also used Bootstrap and Foundation quite a bit.

Bourbon + Neat Breakdown


  • The grid is excellent (table grids, automatic rows, minimalistic)
  • Everything is mixin based so very compact, grokkable, and predictable codebase and output.
  • Separate styling from the templates. Never touch HTML files to change the grid or look and feel of a component
  • Extremely flexible for responsive design. No hacks or workarounds needed for complex responsive components


  • Will have to create conventions and documentation from scratch if working on a team of inexperienced people
  • Reinvent the wheel for every project
  • Takes longer to use compared to bootstrap or foundation
  • Difficult to enforce consistency between controls on larger projects. Need strong processes in place (styleguides, etc.)

“Up in the air”

  • You will not have the javascript components from foundation or bootstrap to lean on. This could be considered a negative. However, the ease of bringing in third-party, modular dependencies via NPM or bower sort of negates this.

Do not use bourbon + neat

  • Large dashboard/CRUD web applications
  • You are trying to build something quick to hand off to someone else

Use bourbon + neat

  • Extremely bespoke interfaces, cutting-edge UX concepts
  • Projects where you require granularity in the design
  • You are working on a long-lived product


If you are building a site similar to most of the stuff found here. You should probably just use bootstrap or foundation. If you are worried about file-size and performance: I hope you are properly benchmarking and have data to support your decisions. If you are building something very bespoke:

Neat is a great fit because it stays out of the way and is more of a power tool than a framework.


Great stuff, thanks Austin!

I just ran bower install bourbon, and tried using bourbon mixins, but no avail — gulp claims the mixins don’t exist.

What steps are necessary after running bower install bourbon?

Edit: works if I manually include the _bourbon.scss file in main.scss, but it’s definitely not getting injected automatically by wiredep. Thoughts?

Hey @timichango

Try uninstalling, then reinstalling with the save flag -
bower install --save bourbon
then compile again with gulp

Bower won’t add dependencies to bower.json without the save flag, which means wiredep won’t inject it, etc.

That should get you sorted.


Thanks muchly :slight_smile: Will try this and report back!

I set up a Sage fork with Bourbon, Neat and Bitters here -

If anyone is interested.


Great tip!
Adding the --save flag added Bower dependencies via wiredep to my main.scss file.

Why do you prefer Bourbon?

Hi @smutek
I’ve been using your Fork for my last Wordpress project. Thanks a lot
I just wanted to know if you’ve planned to build a fork of the upcoming Sage 9 release?
It would be great to have Bourbony Sage 9 in place to use bourbon has a Webpack module, etc…
Thanks for your reply

1 Like

Hey @mecanographik - really glad to hear it’s been useful. I’ve not even experimented with Sage 9 yet but I definitely plan to build a Bourbony Sage 9 fork once Sage 9 has been released. :slight_smile: