Using Foundation 5 with Hammer for Mac and Bourbon

Question

I asked a similar question yesterday because of the amount of time Compass was taking to watch and compile my Sass files.

So, I pose this question. What is the ideal way to use a framework like Foundation 5, and still have the ability to update it in the future, while using Hammer for Mac for compiling and optimising my stylesheets and allows me to use the Bourbon mixins instead of Compass.

Any help is appreciated. Thanks in advance!

Answer 1

If you want to update Foundation in the future without any problems, you should follow rule: don't change files in foundation/components directory

all variables, that you need, you can find in foundation/settings.

some example of app.scss:

@import "bourbon";
@import "settings"; //where you can change all variables
@import "foundation";  //better

settings file look like: https://github.com/zurb/foundation/blob/master/scss/foundation/_settings.scss

Answer 2

I arrange my styles as follows to ensure a clear separation:

styles/
  app.scss
  _settings.scss
  external/
    _bourbon.scss
    _foundation5.scss

My externals folder above does not contain vendor CSS but is instead used for (selectively) importing vendor CSS located elsewhere in my project by using a sass load path.

I currently fetch vendor CSS using bower, therefore all my CSS lives in a bower_components/ folder at the root of my project. This way I can easily update to newer versions and there is a clear separation from what is vendor source and what is specific to my project.

I found I also had to resolve a few conflicts with bourbon and foundation as follows. I am currently using Bourbon 3.1.8 but experimented briefly with 3.2 (which doesn't yet compile with he current sass toolchain) hence the commented out lines specific to Bourbon 3.2:

// external/_bourbon.scss

// we comment out things that conflict with foundation styles
//@import "bower-bourbon/settings/prefixer"; // 3.2+ only
//@import "settings/px-to-em"; // 3.2+ only

// Custom Helpers
@import "bower-bourbon/helpers/deprecated-webkit-gradient"; // 3.1.8 only
@import "bower-bourbon/helpers/gradient-positions-parser";
@import "bower-bourbon/helpers/linear-positions-parser";
@import "bower-bourbon/helpers/radial-arg-parser";
@import "bower-bourbon/helpers/radial-positions-parser";
@import "bower-bourbon/helpers/render-gradients";
@import "bower-bourbon/helpers/shape-size-stripper";

// Custom Functions
//@import "bower-bourbon/functions/assin"; // 3.2+ only
@import "bower-bourbon/functions/compact"; // 3.1.8 only
//@import "bower-bourbon/functions/flex-grid"; // foundation conflict
//@import "bower-bourbon/functions/grid-width"; // foundation conflict
@import "bower-bourbon/functions/linear-gradient";
@import "bower-bourbon/functions/modular-scale";
@import "bower-bourbon/functions/px-to-em";
@import "bower-bourbon/functions/radial-gradient";
//@import "bower-bourbon/functions/strip-units"; // 3.2+ only
@import "bower-bourbon/functions/tint-shade";
@import "bower-bourbon/functions/transition-property-name";
//@import "bower-bourbon/functions/unpack"; // 3.2+ only

// CSS3 Mixins
@import "bower-bourbon/css3/animation";
@import "bower-bourbon/css3/appearance";
@import "bower-bourbon/css3/backface-visibility";
@import "bower-bourbon/css3/background";
@import "bower-bourbon/css3/background-image";
@import "bower-bourbon/css3/border-image";
@import "bower-bourbon/css3/border-radius";
//@import "bower-bourbon/css3/box-sizing"; // foundation conflict
//@import "bower-bourbon/css3/calc"; // 3.2+ only
//@import "bower-bourbon/css3/columns"; // foundation conflict
@import "bower-bourbon/css3/flex-box";
@import "bower-bourbon/css3/font-face";
//@import "bower-bourbon/css3/hyphens"; // 3.2+ only
@import "bower-bourbon/css3/hidpi-media-query";
@import "bower-bourbon/css3/image-rendering";
@import "bower-bourbon/css3/inline-block";
@import "bower-bourbon/css3/keyframes";
@import "bower-bourbon/css3/linear-gradient";
@import "bower-bourbon/css3/perspective";
@import "bower-bourbon/css3/radial-gradient";
@import "bower-bourbon/css3/transform";
@import "bower-bourbon/css3/transition";
@import "bower-bourbon/css3/user-select";
@import "bower-bourbon/css3/placeholder";

// Addons & other mixins
//@import "bower-bourbon/addons/button"; // foundation conflict
//@import "bower-bourbon/addons/clearfix"; // foundation conflict
@import "bower-bourbon/addons/font-family";
@import "bower-bourbon/addons/hide-text";
//@import "bower-bourbon/addons/directional-values"; // 3.2+ only
//@import "bower-bourbon/addons/ellipsis"; // 3.2+ only
@import "bower-bourbon/addons/html5-input-types";
@import "bower-bourbon/addons/position";
@import "bower-bourbon/addons/prefixer";
//@import "bower-bourbon/addons/rem"; // 3.2+ only
@import "bower-bourbon/addons/retina-image";
@import "bower-bourbon/addons/size";
@import "bower-bourbon/addons/timing-functions";
//@import "bower-bourbon/addons/triangle"; // foundation conflict

// Soon to be deprecated Mixins
@import "bower-bourbon/bourbon-deprecated-upcoming";

Importing foundation is just a one-liner currently but you could tweak it to only source what you need from foundation:

// external/_foundation5.scss
@import 'foundation/scss/foundation';