Difference between revisions of "Setup a foundation libsass site"

Revision as of 17:45, 2 February 2015

foundation --libsass

http://foundation.zurb.com/docs/sass.html

gitolite server

git clone git@cvs2:web/FoundationZurbProject.git

you'll need the following folders and files from this project

bower_components
node_modules
scss
Gruntfile.js
bower.json
package.json

create .gitignore file

*.DS_Store
/bower_components/*
/node_modules/*

run grunt if the theme folder and it will watch the scss directory

How to setup foundation after a git clone of the project

run these commands and it will setup your bower_components and node_modules directory. This will allow a clean setup from the project without having to copy any files over from an existing foundation project.

npm install
bower update

Then run grunt build and grunt to watch your files

grunt build
grunt

If you have issues with doing this make sure your package.json has

{
  "name": "foundation-libsass-template",
  "version": "0.0.1",
  "devDependencies": {
    "node-sass": "~1.2.3",
    "grunt": "~0.4.5",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-sass": "~0.17.0"
  }
}

I ran into issues with an earlier setup (PrestonFeather) that was giving errors when trying to do grunt build.

How to add compass

Edit bower.json file

{
  "name": "foundation-libsass-template",
  "dependencies": {
    "foundation": "zurb/bower-foundation",
    "compass-mixins": "Igosuki/compass-mixins"
  }
}

Update your project

foundation update

add to the includePaths in Gruntfile.js

sass: {
      options: {
        includePaths: ['bower_components/foundation/scss','bower_components/compass-mixins/lib']
      },
      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: {
          'css/app.css': 'scss/app.scss'
        }
      }
    }