Category Archives: SASS

Integrating Foundation 5 with SASS and GRUNT with website

Recently several clients have requested that websites is built using Foundation. For those of you who don’t what that is click here.

It basically is a responsive-design framework that is built mobile-first, meaning mobile-view is designed first and then expanded up to bigger screens.

If you want to install Foundation with SASS support in your website do the following:

# Go to project root in terminal

sudo gem install foundation
sudo npm install -g bower grunt-cli
foundation new MY_PROJECT

This installs bower and grunt for your project and also creates a new foundation-installation with the name MY_PROJECT. Your foundation SASS-files are now located at “MY_PROJECT/scss/”.

Now we need to edit a few files to get it working. Edit “MY_PROJECT/scss/app.scss” like this:

@import "../bower_components/foundation/scss/foundation/components/_global";
@import "settings";
@import "../bower_components/foundation/scss/foundation";

// Or selectively include components
// @import
// "../bower_components/foundation/scss/foundation/components/accordion",
// "../bower_components/foundation/scss/foundation/components/alert-boxes",
// "../bower_components/foundation/scss/foundation/components/block-grid",
// "../bower_components/foundation/scss/foundation/components/breadcrumbs",
// "../bower_components/foundation/scss/foundation/components/button-groups",
// "../bower_components/foundation/scss/foundation/components/buttons",
// "../bower_components/foundation/scss/foundation/components/clearing",
// "../bower_components/foundation/scss/foundation/components/dropdown",
// "../bower_components/foundation/scss/foundation/components/dropdown-buttons",
// "../bower_components/foundation/scss/foundation/components/flex-video",
// "../bower_components/foundation/scss/foundation/components/forms",
// "../bower_components/foundation/scss/foundation/components/grid",
// "../bower_components/foundation/scss/foundation/components/inline-lists",
// "../bower_components/foundation/scss/foundation/components/joyride",
// "../bower_components/foundation/scss/foundation/components/keystrokes",
// "../bower_components/foundation/scss/foundation/components/labels",
// "../bower_components/foundation/scss/foundation/components/magellan",
// "../bower_components/foundation/scss/foundation/components/orbit",
// "../bower_components/foundation/scss/foundation/components/pagination",
// "../bower_components/foundation/scss/foundation/components/panels",
// "../bower_components/foundation/scss/foundation/components/pricing-tables",
// "../bower_components/foundation/scss/foundation/components/progress-bars",
// "../bower_components/foundation/scss/foundation/components/reveal",
// "../bower_components/foundation/scss/foundation/components/side-nav",
// "../bower_components/foundation/scss/foundation/components/split-buttons",
// "../bower_components/foundation/scss/foundation/components/sub-nav",
// "../bower_components/foundation/scss/foundation/components/switches",
// "../bower_components/foundation/scss/foundation/components/tables",
// "../bower_components/foundation/scss/foundation/components/tabs",
// "../bower_components/foundation/scss/foundation/components/thumbs",
// "../bower_components/foundation/scss/foundation/components/tooltips",
// "../bower_components/foundation/scss/foundation/components/top-bar",
// "../bower_components/foundation/scss/foundation/components/type",
// "../bower_components/foundation/scss/foundation/components/offcanvas",
// "../bower_components/foundation/scss/foundation/components/visibility";

Also edit your “MY_PROJECT/scss/_settings.scss” and update the import to this:

@import "../bower_components/foundation/scss/foundation/functions";

I usually like having SASS and CSS files in distinct folders so I have one folder at /sass for SASS and one folder for CSS at /css.

Open up your main sass file (i.e. /sass/style.scss) for edit:

// Import Foundation with settings
@import "../MY_PROJECT/scss/app";

// Other stuff here
// …

To install GRUNT, make a grunt folder and create a file named ‘package.json’ like this:

{
"name": "MyProject",
"version": "0.0.1",
"description": "Node for grunt, compile scss",
"private": true,
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-watch": "*",
"grunt-contrib-compass": "*",
"grunt-contrib-concat": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-jshint": "*",
"grunt-rem-to-pixels": "^0.2.0"
}
}

For more information visit npm Documentation.

Visit grunt folder and execute:

npm install

Now create a GRUNT file named ‘gruntfile.js’ like this:

module.exports = function(grunt) {

    var tfThemeDir = "../";

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json’),
        compass: {
          dist: {
            options: {
              cssDir: tfThemeDir + "/css",
              sassDir: tfThemeDir + "/sass",
              imagesDir: tfThemeDir + "/images",
              javascriptsDir: tfThemeDir + "/js",
              outputStyle: ‘compressed’
            }
          }
        },
        rem_to_px: {
            options: {
                baseFontSize: 16,
                removeFontFace: true
            },
            dist: {
                src: [ tfThemeDir + ‘/css/**/*.css’ ],
                dest: tfThemeDir + ‘/stylesheet-fallbacks/’
            }
        },
        jshint: {
          files: [ tfThemeDir +‘/js/scripts.js’]
        },
        watch: {
          css: {
            files: [ tfThemeDir +‘/sass/**/*.scss’],
            tasks: [‘compass’]
          },
          js: {
            files: [ tfThemeDir +‘/js/**.js’],
            tasks: [‘uglify’]
          }
        },
        uglify: {
          dist: {
              files: [ tfThemeDir + ‘/js/scripts.min.js’ ]
          }
        }
    });

    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks(‘grunt-contrib-watch’);
    grunt.loadNpmTasks(‘grunt-contrib-compass’);
    grunt.loadNpmTasks(‘grunt-contrib-jshint’);
    grunt.loadNpmTasks(‘grunt-contrib-concat’);
    grunt.loadNpmTasks(‘grunt-contrib-uglify’);

    /** @link https://github.com/lohmander/grunt-rem-to-px */
    grunt.loadNpmTasks(‘grunt-rem-to-pixels’);

};

For more information visit Grunt Documentation.

Now compile your sass file by executing:

grunt compass

SASS files in /sass/ are compiled into CSS files in /css/.

Now you should have running Foundation installation with compiled CSS from SASS via GRUNT. You can add your other stylesheets as neccesary below the Foundation import. Settings for Foundation are specified at “MY_PROJECT/scss/_settings.scss”.

The good thing of doing a installation like this is that you can use bower to update your Foundation installation in isolation and still you include Foundation and it’s settings in your project. Do this to update your Foundation installation:

cd MY_PROJECT
bower update

Hope you found this guide useful.