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 if necessary with npm install -g foundation-cli
• Install npm-distributed components with npm install from the project root directory.
• Install bower if necessary with npm install -g bower
• Install bower-distributed components with bower install
• At this point if everything is present it should be possible to do gulp sass.

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

• 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.
• 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