UPDATE
Bourbon team decided to drop browser prefixing features and recommends to use Autoprefixer https://t.co/APQOSf0UVI
— Autoprefixer (@Autoprefixer) March 24, 2015
… so use Autoprefixer instead!
In my last article, I showed you how you can create your own mixins to generate the various vendor prefixes needed for the latest unstabilised CSS3 features to work across all the latest browsers.
Recently, I discovered the mixin library Bourbon which has better versions of the custom mixins I previously wrote. So in this article I’ll be showing you how to use it.
I really like to use Gulp to build my apps. So I’ll be setting up Bourbon to work with that.
Setting up Gulp and supporting plugins
First things first, install the packages you’ll need using the node package manager (npm). The easiest would be for you to take a copy of my package.json file below and edit the obvious parts. The important parts (to leave as is) are the “devDependencies” and “engines” object definitions.
Then simply run..
npm install
Then configure your gulpfile.js file. The version I currently work with looks like this..
Using Bourbon in your SCSS
Then import Bourbon in your main SCSS file and begin using the mixins!
To see this flyIn in action, you can check out my landing page.
Bourbon is well maintained and very popular. I’ll be using it from now on 🙂