Menu icon Foundation
Sass Frameworks with Foundation 6 ZURB Template Starter Project

I'm using the Foundation 6 ZURB Template Starter Project (http://foundation.zurb.com/sites/docs/panini.html) and I'm wondering what the best practice would be to use a Sass framework. In the past I used Compass with F5 but using Bower or NPM perhaps I could try Bourbon or something similar and put the library's files as Sass partials in src/assets/scss/? Thanks in advance for any input!

foundation 6paniniSassBourbonZURB Template

I'm using the Foundation 6 ZURB Template Starter Project (http://foundation.zurb.com/sites/docs/panini.html) and I'm wondering what the best practice would be to use a Sass framework. In the past I used Compass with F5 but using Bower or NPM perhaps I could try Bourbon or something similar and put the library's files as Sass partials in src/assets/scss/? Thanks in advance for any input!

Rafi Benkual over 2 years ago

Sure you can use any Sass library along with Foundation! Which one were you looking to use? What features are most interesting to you?

You could cd into your project directory and into the location you want to add it. Then run bourbon install

I would create/add the mixins in the src -> assets -> scss folder. I normally create a mixins folder for these partials.

Then add the import into the app.scss file after foundation

@import "settings";
@import "foundation";
@import "bourbon/bourbon";

brianl@scgpr.com over 2 years ago

Thanks Rafi! I'll give Bourbon a shot (heh) to start but let me know if there's any others you recommend? To answer your question the features I'm needing are gradients, all kinds of shadows/glows, full background images (ideally with a parallax option) and something sort of specific with a diagonal CSS transform kinda thang (I assume) for main nav and buttons—was going to start here for that: http://callmenick.com/post/create-a-pure-css-diagonal-menu). Thanks again!

Rafi Benkual over 2 years ago

Cool! So you'll be adding SCSS partials and JS snippets. That's pretty standard. When you add jQuery plugins this will help: http://foundation.zurb.com/forum/posts/36974-enhancing-foundation-with-bower-components