This is an old revision of the document!

---

Foundation SCSS mit Grunt

Was tuts Aktuell?

• Es zieht die einzelnen CSS Dateien und verarbeitet diese wie compass
• Es zieht die einzelnen JS Dateien aus Foundation + gewünschte Libraries und verarbeitet diese wie compass
• Es nudelt JS Dateien durch JS-Hint, wenn das Fehler wirft kann glaub Jenkins eingreifen.

Evtl. blöd

• compass kann Sprites generieren, ob das Grunt kann, ich denke ja aber im Moment wohl kaum benötigt.

Was fehlt noch?

Ein parameter mit dem man JS und CSS mit debug info und unkomprimiert ausgeben kann.

Setup

Install dependencies

npm install -g bower grunt-cli
gem install foundation

Files

Tiny setup Skript:

setupFoundation.sh

#!/bin/bash
 
if [ -z "$1" ];
	then
		echo " ";
		echo "Set name of your skin variation, mostly 'default' !";
		echo "eg. > ./setupFoundation.sh default <";
		echo " ";
	else
 
		mkdir -p ./$1/lib/
		cd ./$1/lib/ && /root/.rvm/gems/ruby-2.1.2/bin/foundation new foundation --libsass
 
		cd ./foundation/
		bower install --allow-root
		npm install grunt
		npm install grunt-sass
		npm install grunt-contrib watch
		npm install grunt-contrib-jshint
		npm install grunt-contrib-uglify
 
fi

Package requirements NodeJS

package.json

{
  "name": "T1.Foundation",
  "version": "0.0.1",
  "repository": {
    "type": "git",
    "url": "https://rm.tagwork-one.de/git/t1_foundation"
  },
  "devDependencies": {
    "node-sass": "~2.0.1",
    "grunt": "~0.4.5",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-sass": "~0.18.0",
    "time-grunt": "~0.3.2",
    "load-grunt-tasks": "~0.6.0"
  }
}

jshint Javascript Validation

.. in THEME/default/lib/foundation/:

.jshintrc

{
  "bitwise": true,
  "browser": true,
  "curly": true,
  "eqeqeq": true,
  "eqnull": true,
  "esnext": true,
  "immed": true,
  "jquery": true,
  "latedef": true,
  "newcap": true,
  "noarg": true,
  "node": true,
  "strict": false,
  "trailing": true
}

The Gruntfile.js - Adding and managing Tasks

Gruntfile.js

module.exports = function(grunt) {
  // INCLUDE TASKS
  require('load-grunt-tasks')(grunt);
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
 
  // MAKE COMPILING LOOK FANCY
  require('time-grunt')(grunt);
 
  // ARRAY FOR ALL JS FILES IN PAGE HEADER
  var jsLibs = [
    'bower_components/foundation/js/vendor/jquery.js',
    'bower_components/foundation/js/vendor/jquery.cookie.js',
    'bower_components/foundation/js/vendor/placeholder.js',
    'bower_components/foundation/js/vendor/fastclick.js'
  ];
 
  // ARRAY FOR ALL FOUNDATION AND OTHER JS FILES JUST BEFORE CLOSING </BODY>-TAG
  var jsFoundation = [
    'bower_components/foundation/js/foundation/foundation.js',
    'bower_components/foundation/js/foundation/foundation.abide.js',
    'bower_components/foundation/js/foundation/foundation.accordion.js',
    'bower_components/foundation/js/foundation/foundation.alert.js',
    'bower_components/foundation/js/foundation/foundation.clearing.js',
    'bower_components/foundation/js/foundation/foundation.dropdown.js',
    'bower_components/foundation/js/foundation/foundation.equalizer.js',
    'bower_components/foundation/js/foundation/foundation.interchange.js',
    'bower_components/foundation/js/foundation/foundation.joyride.js',
    'bower_components/foundation/js/foundation/foundation.magellan.js',
    'bower_components/foundation/js/foundation/foundation.offcanvas.js',
    'bower_components/foundation/js/foundation/foundation.orbit.js',
    'bower_components/foundation/js/foundation/foundation.reveal.js',
    'bower_components/foundation/js/foundation/foundation.slider.js',
    'bower_components/foundation/js/foundation/foundation.tab.js',
    'bower_components/foundation/js/foundation/foundation.tooltip.js',
    'bower_components/foundation/js/foundation/foundation.topbar.js'
  ];
 
  // ARRAY FOR ALL YOUR CUSTOM JS FILES
  var jsApp = [
    'js/app.js',
    'js/_*.js'
  ];
 
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
 
    sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'compressed',
          sourceMap: false,
        },
        files: {
          '../../css/foundation.css': 'scss/app.scss'
        }
      }
    },
    jshint: {
      options: {
        jshintrc: '.jshintrc'
      },
      all: [
        'Gruntfile.js',
        jsApp
      ]
    },
 
    uglify: {
      options: {
        sourceMap: true
      },
      dist: {
        files: {
	  // THE NAME AND LOCATION OF JS FILES TO BE WRITTEN
          '../../js/libs/header.min.js': [jsLibs],
          '../../js/libs/foundation.min.js': [jsFoundation],
          '../../js/tagwork.app.min.js': [jsApp]
        }
      }
    },
 
    watch: {
      grunt: {
        options: {
          reload: true
        },
        files: ['Gruntfile.js']
      },
 
      sass: {
        files: 'scss/*.scss',
        tasks: ['sass']
      },
 
      js: {
        files: [
          jsLibs,
          jsFoundation,
          '<%= jshint.all %>'
        ],
        tasks: ['jshint', 'uglify']
      },
      livereload: {
        options: {
          livereload: true
        },
        files: [
          '../../js/tagwork.app.min.js',
          '../../css/foundation.css',
          '*.php'
        ]
      }
    }
  });
 
  grunt.registerTask('build', [
    'jshint',
    'uglify',
    'sass'
  ]);
 
  grunt.registerTask('default', ['build','watch']);
 
};

_settings.scss Example File

https://github.com/zurb/foundation/blob/master/scss/foundation/_settings.scss