# Best practice: adding Bourbon to Sage **URL:** https://discourse.roots.io/t/best-practice-adding-bourbon-to-sage/3947 **Category:** sage **Created:** 2015-06-02T23:48:21Z **Posts:** 26 ## Post 1 by @masoninthesis — 2015-06-02T23:48:21Z Hey guys, I recently found [this post](https://discourse.roots.io/t/adding-compass-to-gulpfile-js/3210/2) 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. --- ## Post 2 by @austin — 2015-06-03T01:00:44Z 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. --- ## Post 3 by @masoninthesis — 2015-06-03T01:25:36Z 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! --- ## Post 4 by @smutek — 2015-06-03T02:25:10Z 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. --- ## Post 5 by @kalenjohnson — 2015-06-03T03:23:12Z It’s a relatively simple theme, but here’s an example of one: [https://github.com/kalenjohnson/source-theme/tree/master/assets/styles](https://github.com/kalenjohnson/source-theme/tree/master/assets/styles) You don’t get as much as Bootstrap out of the box, obviously. But compiled CSS and JS can be quite a bit smaller --- ## Post 6 by @masoninthesis — 2015-06-03T05:05:09Z 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](https://youtu.be/8ItNE_DX6Cc?t=12m25s) to get a starting point. --- ## Post 7 by @kalenjohnson — 2015-06-03T05:35:11Z 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. --- ## Post 8 by @masoninthesis — 2015-06-03T05:46:34Z 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](https://css-tricks.com/using-svg/), mixed with Treehouse’s method for [The Perfect WordPress Inline SVG Workflow](http://blog.teamtreehouse.com/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](http://petercollingridge.appspot.com/svg_optimiser) 4. Save it as `inline-[your-file-name].svg.php` (no brackets obviously) 5. Then to input the html/php markup I use this `` 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. --- ## Post 9 by @smutek — 2015-06-03T06:24:34Z 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. --- ## Post 10 by @kalenjohnson — 2015-06-03T07:15:18Z 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 --- ## Post 11 by @austin — 2015-06-03T16:38:08Z > [@smutek](#): > > I’m curious, are the two of you using Neat & the Refills as well, or just the Bourbon mixin library? I’ve used Bourbon + Neat quite a bit. I’ve also used Bootstrap and Foundation quite a bit. ### Bourbon + Neat Breakdown #### Pros - 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 #### Pitfalls - 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 ### Bottom-line If you are building a site similar to most of the stuff found [here](http://builtwithbootstrap.com). 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](http://www.sciencekids.co.nz/projects/thescientificmethod.html). If you are building something very bespoke: - [https://cash.me/$austinpray](https://cash.me/$austinpray) - [https://showroom.typeform.com/to/qTIJCU](https://showroom.typeform.com/to/qTIJCU) - [https://medium.com/@pierrebaz/why-i-won-t-recommend-meteor-anymore-fcec4e478d78](https://medium.com/@pierrebaz/why-i-won-t-recommend-meteor-anymore-fcec4e478d78) Neat is a great fit because it stays out of the way and is more of a power tool than a framework. --- ## Post 12 by @smutek — 2015-06-04T01:33:40Z Great stuff, thanks Austin! --- ## Post 13 by @timichango — 2015-10-15T23:03:21Z 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? --- ## Post 14 by @smutek — 2015-10-16T06:13:03Z 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. --- ## Post 15 by @timichango — 2015-10-23T23:27:46Z Thanks muchly :slight_smile: Will try this and report back! --- ## Post 16 by @smutek — 2016-01-13T17:04:55Z I set up a Sage fork with Bourbon, Neat and Bitters here - [https://github.com/smutek/BourbonySage](https://github.com/smutek/BourbonySage) If anyone is interested. --- ## Post 17 by @Johann_Billar — 2016-03-21T17:47:01Z Great tip! Adding the --save flag added Bower dependencies via wiredep to my main.scss file. --- ## Post 18 by @xav — 2016-05-10T21:05:43Z Why do you prefer Bourbon? Thanks --- ## Post 19 by @mecanographik — 2016-09-26T15:38:12Z 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 --- ## Post 20 by @smutek — 2016-09-26T19:03:12Z 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: --- ## Post 21 by @smutek — 2016-09-26T19:08:48Z @xav so sorry, I thought I’d replied to this. I don’t necessarily prefer Bourbon, in fact I’ve used Bootstrap for probably the last 3 projects I built. I really like both of them. Which I choose really depends on what I have to build and how quickly I have to build it. I like Bourbon because it’s so light weight, but I can move much more quickly with Bootstrap due to all the cool stuff it comes with. That’s just me. Sorry again for the late response, better late than never though. :slight_smile: --- ## Post 22 by @mecanographik — 2016-09-26T20:32:40Z Hi @smutek that’s great news! i’ve been using Bootstrap 3 a lot and Bootstrap 4 alpha looks great to, but like you told to @xav , Bourbon with neat and refills are really lightweight, i really see the difference when i run the `Gulp build` command :smirk: And when i need some extra components i often grab my inspiration and scripts ressources on the awesome [Codyhouse bourbon Library](https://codyhouse.co) ! I won’t forget to share the link of the wordpress bourbon sage 8 i’m actually working on when it’s on production :rocket: Do you know some other Bourbon refills extra components library? Thanks again for your quick reply. Can’t wait to install the Bourbony sage 9 package! --- ## Post 23 by @smutek — 2016-09-26T20:56:58Z > [@mecanographik](#): > > And when i need some extra components i often grab my inspiration and scripts ressources on the awesome Codyhouse bourbon Library ! Nice, I hadn’t heard of that, bookmarked, thanks! --- ## Post 24 by @mecanographik — 2016-12-31T08:59:22Z Hi @smutek @ben It would be great if you could add the following fork to your [docs](https://roots.io/sage/docs/extending-customizing-sage/) official list: > **[smutek/BourbonySage](https://github.com/smutek/BourbonySage)** > > BourbonySage - Fork of Sage 8.5.0 using Bourbon, Neat & Bitters I’ve been using this fork for my last projects, and it is a great alternative to bootstrap ! Here is a “work in progress” beta version of my latest project built on top of the BourbonySage fork: [http://v2.laplateforme.net](http://v2.laplateforme.net) I wish you an happy cody new year! --- ## Post 25 by @smutek — 2016-12-31T14:14:52Z Hey, thanks for the shout out, I’m glad you’re still finding the fork helpful! --- ## Post 26 by @raffjones — 2017-02-21T20:02:59Z Hi all. I am using Sage 9.0.0-beta.2. Just in case you want to try this puppy with Sage 9… After fully installing the theme, I ran `npm install bourbon-neat` and was able to import the core styles into my `main.scss` file using `@import "~bourbon-neat/core/neat"` I’ve been using Bootstrap v4 but find that even after I customise the build, the CSS just gets a bit out of hand in terms of file size, especially after the webpack autoprefixer kicks in, so the lightweight nature of Neat is quite appealing. We’ll see :slight_smile: I’ll definitely check out your fork, @smutek - sounds good, although I’m now fully committed to the Sage 9 branch - loving the Laravel Blade templates and fast builds.