Search code examples
twitter-bootstrapsasscompassbourbon

Bootstrap and Bourbon in combination


Could someone please confirm that it's correct for me to use the Sass version of Bootstrap 3 as the framework (utilising all of the grid classes, stylings etc), in combination with Bourbon as a means of ensuring cross browser compatibility on things like linear gradients, image backgrounds etc, as it adds moz-webkits etc.

To me it looks like 'Bourbon' and 'Neat' together is the same theory as using 'Bootstrap' and 'Bourbon' together. And then 'Compass' is an alternative to 'Bourbon'.

If anyone could just give me a thumbs up and a nod, I'll be on my merry way.


Solution

  • If your primary concern is cross-browser compatibility, I would recommend Autoprefixer (https://github.com/postcss/autoprefixer) instead of Bourbon.

    While Bourbon 4.x does support prefixing, that is not the purpose of the library and requires the use of mixins throughout your SCSS. The nice thing about using Autoprefixer is that you just write vanilla styles and it decides what needs prefixing.

    To me it looks like 'Bourbon' and 'Neat' together is the same theory as using 'Bootstrap' and 'Bourbon' together. And then 'Compass' is an alternative to 'Bourbon'.

    Not really. Bootstrap is intended to really give you the kitchen sink of everything you might need to make a whole site/app, with things like grids, styles, form stuff, and a large amount of javascript.

    Bourbon is a set of tools for writing SCSS more effectively and maintainably, Neat is a grid system. the two of them combined will only make it easy to create your own components and modules.

    It really depends on if you are looking to author your own stylesheets (bourbon/neat) or use an out of the box solution where you are adding pre-defined classes to your HTML.

    Quick breakdown:

    bourbon = 👍  
    bourbon + neat = 👍  
    bourbon + neat + autoprefixer = 👍  
    bootstrap = 👍  
    compass = …  
    bourbon + neat + bootstrap = 🚫