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

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.
• Point Django's static files directories at the compiled Foundation resources:

# myapp/settings.py
# ...
STATICFILES_DIRS = (
    ('foundation', '/path/to/foundation/root/bower_components/foundation'), # all Foundation assets
    ('javascripts', '/path/to/foundation/root/javascripts'), # might still have some customizations here
    ('stylesheets', '/path/to/foundation/root/stylesheets'), # my generated CSS
)

To use the Foundation assets in a template:

<script src="{% static 'foundation/js/vendor/modernizr.js' %}"></script>

Prerequisites

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

Links

Reference

• Getting Started with Foundation and Sass - Foundation Documentation