Search code examples
csssassbourbonneat

Change Bourbon default em size

Bourbon.io is great, even better when used with Neat. The default 1em size is set to 16px, how do you change that to 14px?

// Overwrite the em-base
$em-base: 14px;

I know that is the correct overwrite, but where should be added to get the correct result?

Solution

  • Posting the solution for future reference.

    There are two steps to complete this and 'overwrite the $em-base' globally:

    1. Add the new variable.

    This can be done after importing bourbon/neat by using the !global flag.

    //Import Plugins
@import "bourbon"
@import "neat"

//Overwrite $em-base
$em-base: 14px !global;

    2. Make sure the new $em-base variable is used to overwrite the font-size.

    //Set font-size
html,
body {
 font-size: $em-base; //14px
}

    You can now use the bourbon em-function to correctly size with em.

    !! It is important to make sure that the font size is set on the root element - (HTML), this is the element that defines the pixel size of the em.

    Here is a Pen http://codepen.io/matthewelsom/pen/WQPgQq