puiu91
8/3/2017 - 3:18 AM

Getting Foundation 6.4.1 to play nice with Palantir Blueprint 1.24.0

Getting Foundation 6.4.1 to play nice with Palantir Blueprint 1.24.0

root.scss
content_copyfile_download
/**
 * 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';
readme.md
content_copyfile_download
  • Rendered
  • Source

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