Foundation w/Sass standalone

README.md

Requirements

Make sure Ruby, Node.js, and bower are setup on your system before continuing.

• Ruby 1.9.3+
• Node.js
• bower: [sudo] npm install bower -g

Setup a new project

Let's call this project my_project. It should look like this:

my_project/
└── bower.json

The bower.json file should contain the following:

{
  "name": "foundation-sass-standalone-app",
  "dependencies": {
    "foundation": "~5.0.2"
  }
}

Then from within the my_project folder you should run bower install. This will download Foundation, jQuery, and Modernizr to the bower_components folder. After running this you should see the following folders present:

my_project/
├── bower_components/
│   ├── foundation/
│   ├── jquery/
│   └── modernizr/
└── bower.json

Setup and import Foundation into your project

Now let's create an scss/app.scss Sass file in this project:

my_project/
├── scss/
│   ├── app.scss
├── bower_components/
│   ├── foundation/
│   ├── jquery/
│   └── modernizr/
└── bower.json

Inside of scss/app.scss let's import Foundation:

@import "foundation";

Compiling Foundation

We'll use the sass command line tool to watch and compile our *.scss files. In the terminal you'll need to install Sass:

gem install sass

Then you can compile your project using the following (run from within the my_project folder):

sass --load-path bower_components/foundation/scss --watch scss:css

The resulting CSS files will be saved to css/app.css.