To be honest, the title of this blog post is misleading. Yes, I will demonstrate who I import Zurb’s Foundation CSS Framework into a WordPress theme. But the kicker is, this method can be used in any NodeJS project.

Why would you want to manually compile Foundation and

The objective here is to customize Foundation to fit out specific brand design. Why would you want to customize Foundation? Why wouldn’t you just use the minified version fro a CDN, and customize by overriding default styling? Well, what if the design of the site makes the site feel very open, and you want to use Foundation’s XY Grid, but it’s default gutter size is too small? How do you compile Foundation with a custom gutter size? Furthermore, how do you reuse that custom gutter size in your own SASS development so that everything has consistent spacing?

Manually Compiling SASS

Manually compiling Foundation starts with importing it’s setting.scss file. The path to this file, relative to the project’s root folder, is scss/settings._settings.scss. This file has all the variables used by Foundation, and these are the variables we can customize to fit our site design. The documentation suggests ” Download the latest settings file here, add it to your project as _settings.scss, then import it before Foundation itself.” In my setup, I just leveraged the existing settings.scss file that came when I installed the Foundation package. Either way, you’re going to have a local copy of the settings.scss file that will override the default variables.

At any rate, the simplest process of manually importing Foundation looks like this (assuming you installed via npm):
1. Import node_modules/foundation-sites/scss/settings/_settings.scss
2. Import node_modules/foundation-sites/scss/foundation.scss
3. Include foundation-everything (or whatever components you need)

The resulting SASS file will look like:

@import "settings/_settings.scss";

@import "foundation.scss";

@include foundation-everything;

Check out this branch to see how I’ve implemented this process using Gulp.

Customizing Foundation

Manually compiling Foundation is nice, but its no different that just linking to a version of Foundation on some CDN. In fact, why are we compiling Foundation ourselves? Why don’t we simply link to the CDN version of Foundation, then override the default styling with your own styling. Well, that way always gives me headaches, that’s why. Its a hack. It requires you to use strong selectors in your SASS (to override the default styling), and its very easy to create layouts with inconsistent margins and paddings.

Pixel Perfect

Even in today’s ecosystem of browsing devices and the wide variety of screen sizes out there, I still encounter clients who want “pixel perfect” design, meaning I need to match the design perfectly. If the designer made all the gutters between elements to be 50 pixels wide on desktop screens, by golly, it better be 50 pixels on desktop. For me, its much easier to ensure that consistent spacing by customizing Foundation SASS files and compiling Foundation manually. And, should the client ever wants to change the amount of spacing, I can simply change the value in my SASS files and recompile my CSS.

Creating SASS Variables for the Theme

If we want to customize the gutters of Foundation’s grid to be 50 pixels wide on large screens, we first need to find the name of the variable we need to override. Every component in Foundation has a SASS Reference section that details the SASS variables that can be customize.

This is the point where I should refer to the documentation, but I am not able to get the desired results when I follow what’s in the documentation. Also, if I dig deeper into Foundation’s SASS file, I realize that there many variables I need to override in order to customize the grid gutters. Because Foundation Settings variables do not use the !default flag, I have to override the default variables AFTER I import _settings.scss. Therefore, at this point, I’m deviating from whats currently documented and making up my own solution.

The specific values that we need to override are $grid-column-gutter, $grid-padding-gutters, $grid-margin-gutters, and $grid-container-padding. We can customize the size of the gutters at a given screen size if we provide a Map value, with the keys for the map being the names of the defined breakpoints. See Below. (The default breakpoint names are small, medium, large, x-large.)

$grid-column-gutter: (
  small: 30px,
  medium: 40px,
  large: 50px
) !default;

The complete SASS to override the gutter variables looks like:

// file: _site-settings.scss
$grid-column-gutter: (
  small: 30px,
  medium: 40px,
  large: 50px
);

$grid-margin-gutters: $grid-column-gutter;
$grid-padding-gutters: $grid-margin-gutters;
$grid-container-padding: $grid-padding-gutters;

To compile Foundation with these variables, import these settings AFTER importing Foundation’s settings. Our main SASS file now looks like:

@import "settings/_settings.scss";
@import "site-settings";

@import "foundation.scss";

@include foundation-everything;

Look here at this branch for a complete demonstration of customizing Foundation variables.

Using Foundation’s Mixins in Theme Development

Along with the hundreds of settings declared in Foundation’s Settings files, one can also leverage the many mixins that come with the framework. Every component has a SASS Reference section that details the settings and mixins available for that component. For example, if you look at the SASS reference for buttons, you’ll discover a mixin called button, which will make any element look like a button. Therefore, if you want to make all links with a class of .my-random-class, you’ll just have to include the button mixin, ie:

.my-random-class {
    @include button();
}

Since we are customizing Foundation’s XY grid gutters, let’s suppose that we also want to apply those same gutters to every section tag that appears in an article (tag). Well, if we look at the Mixins for the XY Grid, we discover a mixin called xy-gutters. If we choose to apply our grid gutters as top and bottom paddings to our section tags, the resulting SASS looks like:

article section {
    @include xy-grid-gutters($gutter-position: top bottom, $gutter-type: padding);
}

Let’s put this in our project so we can use it! In this demonstration, I’ll create a new SCSS file called site.scss, separate from the foundation-custom.scss that was shown above. Like the foundation-custom file, we’ll import Foundation’s settings file, followed by our own site variable, before importing all of Foundation’s mixins from foundation.scss. Finally, we can write the styles for the site. The resulting SCSS looks like:

// file: site.scss

@import "settings/_settings.scss";
@import "site-settings";

// Import Mixins
@import "foundation.scss";

article section {
    @include xy-gutters($gutter-position: top bottom, $gutter-type: padding);
}

After tweaking our gulpFile to accommodate the new site.scss file, we are ready to compile all of our styles, and take advantage of the immense library of SASS variables and mixins that come with Foundation. Our complete gulpFile looks like:

// file: gulpfile.babel.js
'use strict';

import gulp from 'gulp';
import autoprefixer from 'gulp-autoprefixer';
import concat from 'gulp-concat';
import sass from 'gulp-sass';
import sourcemaps from 'gulp-sourcemaps';
import cssNano from 'gulp-cssnano';
import rename from 'gulp-rename';
import gutil from 'gulp-util';

global.paths = {
	site: {
		scss: 'assets/scss/*.scss',
		dist: 'dist'
	},
	'foundation': {
		scss: 'node_modules/foundation-sites/scss/'
	}
};

gulp.task('sass', () => {
	gulp.src(global.paths.site.scss)
		.pipe(sass( {
				includePaths: [global.paths.foundation.scss]
			} ).on('erroor', sass.logError))
		.pipe(autoprefixer())
		.pipe(gulp.dest(global.paths.site.dist))
		.pipe(rename( {suffix: '.min'} ))
		.pipe(gulp.dest(global.paths.site.dist));

});

gulp.task('default', ['sass']);

Check out this branch to study the full setup.

Conclusion

I’ve tried to demonstrate how to use a CSS Framework in your web project to:

  1. Override Foundation settings variables in order to compile a customized version of Foundation that fits your site’s design or theme
  2. Make use of the mixins in that come with Foundation to make it easier to create consistent layouts quickly.

Feel free to study how I’ve implemented this problem. All of the code discussed in this post is displayed in this repo. Check out all the branches.

As a developer, I don’t care the specific design of the site. Instead, I care more about translating that design into a series of variables that I can apply to my markup in a consistent manner. This is especially true on WordPress sites, where design values like colors and margins can change without notice. Including Foundation into your project and leveraging the mixins and variables are a great way to build out a theme without causing headaches down the road.