Foundation with Sass

From Littledamien Wiki
Revision as of 03:24, 5 December 2015 by Video8 (talk | contribs)
Jump to navigation Jump to search

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

$ npm install --global foundation-cli

Creating a new project

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

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";

Prerequisites

  • Git
  • Node.js
  • Ruby 1.9+

Links

Reference

Notes