Foundation with Sass

CDN

CDNs for stubbing out projects.

• //cdn.foundation5.zurb.com/foundation.css
• //cdn.foundation5.zurb.com/foundation.js

or

• //cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js
• //cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css

Installing Foundation with Sass

Installing the Foundation CLI

$ npm install --global foundation-cli

Creating a new project

The foundation new command will create a foundation directory. It prompts for the following project properties:

• Framework - Foundation for Sites
• Template
  • "Basic" includes Sass and a flat directory structure
  • "ZURB" includes JavaScript processing, Handlebars templating, and image compression
• Directory/Project Name is relative to the current directory. So a directory with the project name will be created in the current directory.

These properties can be set with arguments to foundation new:

$ foundation new --framework sites --template basic --directory [app_name]

Upgrading from earlier versions

First uninstall the existing Foundation installation

$ npm uninstall foundation

Copying a project to another workstation

• Fetch the project from GitHub.
• Install foundation-cli and any necessary Foundation components (e.g. foundation-sites, motion-ui):

$ sudo npm install -g foundation-cli
$ npm install foundation-sites --save
$ npm install motion-ui --save

The last two lines add Foundation components in the current directory under the node_modules directory, where they need to be located to hook up with the sassPaths values in gulpfile.js.

At this point if everything is present it should be possible to do gulp sass or gulp build.

Compiling Sass

Foundation 6

Foundation 6 uses gulp to compile.

Creating a new Foundation project creates a gulpfile.js in the project directory. The default action is to watch for changes in .scss and .js files, so simply running gulp will spawn a process that will compile the project.

The gulp task for compiling Sass is named sass, so from the foundation project's root directory:

$ gulp sass

Configuring a file watcher in PhpStorm/PyCharm

Project Settings > Tools > File Watchers > SCSS

• File Type: SCSS
• Scope: Project Files
• Program: [/path/to/gulp] e.g. /usr/local/bin/gulp
• Arguments: sass (name of gulp task to run, from gulpfile.js)
• Working Directory: $FileDir$
• Environment variables: n/a
• Output paths to refresh: $FileNameWithoutExtension$.css (Not sure if this is correct)

Compiling Compass

I couldn't figure out a way to use config.rb to use the compass compile command with the Foundation for Sites 6 libraries. It's necessary to use the gulp task.

These Compass mixins emulate the compass mixins. Download them and place the lib directory in the project's scss/ directory. Then e.g. include with @include "compass-mixins\compass\animation";

Foundation 5

Foundation 5 offers a collection of Sass files that they suggest customizing.

• Variables controlling appearance are located in _settings.scss
• The documentation recommends placing custom styles in app.scss
• Foundation components can be included or excluded by commenting them out in app.scss

Question: how well does this arrangement accommodate upgrades? Do these two files get overwritten in the course of an upgrade? How to preserve changes?

Integrating Foundation with Django

A boiler plate Foundation for Django package nrose-foundation can be found on GitHub.

Or, if starting from scratch,

• Install Foundation in a directory outside the Django project.
• Compile Foundation assets into a directory named static/.
  The name isn't important, but all compiled files should be placed in a directory separate from source files so that it can be collected into the Django project's static files cleanly.

Then point Django's static files directories at the compiled Foundation resources:

# myapp/settings.py
# ...
STATICFILES_DIRS = [
    os.path.join(DJANGO_ROOT, '..', 'grappelli', 'static'),
    os.path.join(BASE_DIR, '..', 'nrose-foundation', 'static'),
]

To use the Foundation assets in a Jinja template:

<link type="text/css" rel="stylesheet" href="{{ static("css/app.css") }}" />

Prerequisites

• Git
• Node.js
• Ruby 1.9+
• Bower

Links

Reference

• Getting Started with Foundation and Sass - Foundation Documentation