Codekit + Foundation + Compass + Sass Starter Template

Setup Instructions

Create an empty folder anywhere in your directory i.e. ../Desktop/Zurb5.3.3

In Codekit

• Click the menu-icon (top-left)
• Click 'New Zurb Foundation Project...' and choose the empty folder you just created
• Back in Codekit make sure you project is selected and click the settings icon
• In Frameworks>Compass change the file outputs accordingly (sass --> scss)
• Open config.rb in Finder
• Beneath "# Require any additional compass plugins here." --> paste "add_import_path "bower_components/foundation/scss"

Foundation File Structure (changes to make within in your text editor)

• Open _settings.scss and uncomment "@import foundation" [Uncomment functions as needed]
• Create a newfile within /stylesheets called _custom-settings.scss
• At the end of the document type: "@import "custom-settings""

Changes to _settings.scss that will make your life easier

• Include custom global mixins like font and color at the top of this file use Sass mixins to incorporate them into your styles as you move along
• This will make it easier for you to implement changes via sass files and not get compiling errors