Getting Foundation 6.4.1 to play nice with Palantir Blueprint 1.24.0

readme.md

Steps

1. In order to import blueprint.scss like @import "~@blueprintjs/core/src/blueprint";
   • need to install bourbon via npm install bourbon@4.3.2 --save as of Palantir Blueprint 1.24.0
2. Foundation and Palantir Blueprint both use scss variables $switch-height and $switch-height-large and will result in a conflict when compiling the scss files. The solution involves resetting the variables to zero after loading Foundation but before loading Blueprint.
3. Must manually specify the icon font path since relative path breaks when you import blueprint.scss in your application
   • do this with $icon-font-path: "~@blueprintjs/core/resources/icons";
   • see palantir/blueprint#123

root.scss

/**
 * 1 - Foundation
 */
@import "~foundation-sites/scss/foundation";

/**
 * Foundation compatibility with Palantir Blueprint requires
 * resetting these variables to zero because both libraries use
 * the same variable names internally.
 */
$switch-height: 0;
$switch-height-large: 0;

/**
 * 2 - Palantir Blueprint
 */
$icon-font-path: "~@blueprintjs/core/resources/icons"; // see https://github.com/palantir/blueprint/issues/123
@import "~@blueprintjs/core/src/blueprint"; // requires bourbon 4.3.2 installed as dependency via `npm install bourbon@4.3.2 --save`
@import "~@blueprintjs/datetime/dist/blueprint-datetime.css";

/**
 * 3 - Application
 */
@import 'app/app';