Editing Foundation with Sass

[[Category:Sass]] [[Category:CSS]] [[Category:Web Development]]
== 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 ===

<syntaxhighlight lang="sh">
$ npm install --global foundation-cli
</syntaxhighlight>

=== 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`:

<syntaxhighlight lang="sh">
$ foundation new --framework sites --template basic --directory [app_name]
</syntaxhighlight>

=== Upgrading from earlier versions ===

First uninstall the existing Foundation installation

<syntaxhighlight lang="sh">
$ npm uninstall foundation
</syntaxhighlight>

=== 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`):

<syntaxhighlight lang="sh">
$ sudo npm install -g foundation-cli
$ npm install foundation-sites --save
$ npm install motion-ui --save
</syntaxhighlight>

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:

<syntaxhighlight lang="sh">
$ gulp sass
</syntaxhighlight>

==== 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 [https://github.com/Igosuki/compass-mixins 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. <ref>[http://foundation.zurb.com/sites/docs/v/5.5.3/using-sass.html How to Use Foundation Sass] Foundation documentation (version 5)</ref>

* 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 [https://github.com/dbarchowsky/northrose-foundation GitHub].

Or, if starting from scratch,

* Install Foundation in a directory outside the Django project.
* Compile Foundation assets into a directory named `static/`.<br />''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:

<syntaxhighlight lang="python" highlight="5">
# myapp/settings.py
# ...
STATICFILES_DIRS = [
    os.path.join(DJANGO_ROOT, '..', 'grappelli', 'static'),
    os.path.join(BASE_DIR, '..', 'nrose-foundation', 'static'),
]
</syntaxhighlight>

To use the Foundation assets in a Jinja template:

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

== Prerequisites ==

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

== Links ==

=== Reference ===

* [http://foundation.zurb.com/sites/docs/v/5.5.3/sass.html Getting Started with Foundation and Sass] - Foundation Documentation

=== Notes ===