A Foundation 6 / SASS work-flow

Foundation is one of the most advanced front-end frameworks for building responsive websites. It is designed to work on all types of devices. It uses SASS which is a CSS pre-processor helping to reduce repetition with CSS and save time. In this short tutorial, I’ll discuss my current workflow using these two technologies.

Install dependencies

NPM is required for installing gulp and plugins so install that first. Next, install bower. Bower is used to manage front-end dependencies such as Foundation and jQuery.

$ npm install --save bower

Download Foundation 6 using bower:

$ bower install foundation-sites

This will download jQuery too as jQuery is a dependency of Foundation.

Next, we’re going to install Gulp. Gulp is a super fast task management tool configured using JavaScript:

$ npm install --save gulp

For this tutorial, we need the following Gulp plugins. Plugins such as gulp-sass will perform the pre-processing of SCSS to CSS.

$ npm install --save gulp-plumber gulp-sass gulp-postcss autoprefixer gulp-sourcemaps gulp-group-css-media-queries

And we’re done installing our dependencies.

Getting started

Firstly, we need to setup our files. Below is my project directory tree for this example:

My project
- scss
  - app.scss
  - _settings.scss
- css
  - app.css
- bower.json
- gulpfile.js
- package.json
- index.html

The gulpfile.js we’ll describe next but the app.scss and _settings.scss are copies of foundation.scss and settings/_settings.scss respectively from the bower_components/foundation-sites/scss/ directory. Once those files have been copied, make the following changes to them:

app.scss

@import 'scss/settings'; // uncommented @import 'settings/settings', and path changed
.
.
.
@include foundation-everything; // add this at the end

Additional changes can be made to this file such as commenting out unused Foundation components as well as adding app specific styles (e.g. header). The settings file basically contains variables defining margins etc for components. These can also be changed to suite your project without having to overwrite existing styles.

Below is my full gulpfile.js. This file is a script of how to execute tasks. It is written in JavaScript which hopefully is familiar to most developers:

const gulp = require('gulp');
const plumber = require('gulp-plumber');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const groupmq = require('gulp-group-css-media-queries');

const INCLUDE_PATHS = [
    'bower_components/foundation-sites/_vendor',
    'bower_components/foundation-sites/scss',
    'bower_components/motion-ui/src'
];

/**
 * Compile Sass files
 */
gulp.task('compile:sass', [], () =>
  gulp.src('scss/app.scss')
    .pipe(plumber()) // Prevent termination on error
    .pipe(sass({
      indentType: 'tab',
      indentWidth: 1,
      outputStyle: 'expanded', // Expanded so that our CSS is readable
      includePaths: INCLUDE_PATHS
    })).on('error', sass.logError)
    .pipe(postcss([
      autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false,
      })
    ]))
    .pipe(groupmq()) // Group media queries!
    .pipe(gulp.dest('css'))); // Output compiled files to css/ dir

/**
 * Watch Sass files for changes
 */
gulp.task('watch:sass', ['compile:sass'], () => {
    gulp.watch(SASS_SOURCES, ['compile:sass']);
});

/**
 * Default task executed by running `gulp`
 */
gulp.task('default', ['watch:sass']);

Now watch for any changes:

$ gulp watch

This will automatically run Gulp on our SCSS files, and the task “compile:sass” will be run as changes are made. Notably we’re converting SCSS code to browser readable CSS, we’re auto prefixing properties and selectors with browser supported alternatives (e.g. -webkit-input-placeholder), we’re grouping media queries so we know where to find them and lastly we writing the file to a CSS file that we can use in our website.