Skip to content

Foundation for Sites Notes

  • Using foundation from zurb
  • Install foundation-cli - npm install --global foundation-cli
  • Create new project - foundation new --framework sites --template zurb
    • Use foundation-zurb-template
  • Install building block - foundation kits install news
  • foundation watch


Other Packages

  • fontawesome
  • eslint

Setup eslint

  1. npm install eslint
  2. node_modules/.bin/eslint --init
    • Select standard

Adding font-awesome to your foundation site

HowTo: Foundation 6 Font Awesome and other asset fonts * npm install font-awesome * Modify config.yml

# Gulp will reference these paths when it copies files
  # Path to dist folder
  dist: "dist"
    - "node_modules/@fortawesome/fontawesome-free/webfonts"
    - "node_modules/foundation-sites/scss"
    - "node_modules/motion-ui/src"
* Modify gulpfile.js
'use strict'

const gulp = require('gulp');
const panini = require('panini');
const sherpa = require('style-sherpa');
const rimraf = require('rimraf');
const browserSync = require('browser-sync');
const gulpwebpack = require('webpack-stream');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');
// sass
const sass = require('gulp-sass');
const sassLint = require('gulp-sass-lint');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const sourcemaps = require('gulp-sourcemaps');

// = true;

const webpackDevMiddleWare = require('webpack-dev-middleware');
const webpackHotMiddleWare = require('webpack-hot-middleware');

const webpackCompiler = webpack(webpackConfig);

const yaml = require('js-yaml');
const fs = require('fs');

// Load settings from settings.yml
const {
} = loadConfig();

const server = browserSync.create();

function loadConfig() {
  let ymlFile = fs.readFileSync('config.yml', 'utf8');
  return yaml.load(ymlFile);

// Build the index.html files for the final result
  gulp.series(clean, gulp.parallel(buildSass, fonts, pages, images), styleGuide));

// Build the site, run the server, and watch for file changes
  gulp.series(clean, gulp.parallel(buildSass, fonts, mywebpack, pages, images), styleGuide, serve, watch)

// add webpack stream
function mywebpack() {
  return gulp.src('src/main.js')
    .pipe(gulpwebpack(webpackConfig, webpack))

// scss compile
function buildSass() {
  return gulp.src(['src/assets/styles/styles.scss'])
      includePaths: PATHS.sass
    }).on('error', sass.logError))
    .pipe(gulp.dest(PATHS.dist + '/assets'))

// copy fonts
// Copy fonts to the "dist" folder
function fonts() {
  return gulp.src(PATHS.fonts + '/*.*')
    .pipe(gulp.dest(PATHS.dist + '/assets/fonts'));

// browser-sync
function serve(done) {
    server: {
      baseDir: "./dist"
    middleware: [

function reload(done) {

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
  return gulp.src('src/app/img/**/*')
    .pipe(gulp.dest(PATHS.dist + '/img'))

// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
  sherpa('src/styleguide/', {
    output: PATHS.dist + '/styleguide.html',
    template: 'src/styleguide/template.html'
  }, done)

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
  rimraf(PATHS.dist, done)

// Copy page templates into finished HTML files
function pages() {
  return gulp.src('src/html/pages/**/*.{html,hbs,handlebars}')
      root: 'src/html/pages/',
      layouts: 'src/html/layouts/',
      partials: 'src/html/partials/',
      data: 'src/html/data/',
      helpers: 'src/html/helpers/'

// Load updated HTML templates and partials into Panini
function resetPages(done) {

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
  //'src/html/pages/**/*.html').on('all', gulp.series(resetPages, pages, reload));'src/html/{layouts,partials,pages,helpers}/**/*.html').on('all', gulp.series(resetPages, pages, reload));'src/html/data/*.yml').on('all', gulp.series(resetPages, pages, reload));'src/styleguide/*.*').on('all', gulp.series(styleGuide, reload));'src/app/img/**/*').on('all', gulp.series(images, reload));'src/**/*.js').on('all', gulp.series(mywebpack, reload));'src/assets/styles/*.scss').on('all', gulp.series(mywebpack, reload));
  //'src/assets/styles/*.scss').on('all', gulp.series(buildSass, reload));
* Add
// Copy fonts to the "dist" folder
function fonts() {
  return gulp.src(PATHS.fonts)
    .pipe(gulp.dest(PATHS.dist + '/assets/fonts'));
* Modify
// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {, copy);'src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));'src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));'src/assets/scss/**/*.scss').on('all', gulp.series(sass, browser.reload));'src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));'src/assets/img/**/*').on('all', gulp.series(images, browser.reload));'src/assets/fonts/**/*').on('all', gulp.series(fonts, browser.reload));'src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
* Create _custom.scss and import into app.css * Import fontawesome into _custom.scss
$fa-font-path: '/assets/fonts'; //set path for fonts

@import 'node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
@import "node_modules/@fortawesome/fontawesome-free/scss/fa-solid";
@import "node_modules/@fortawesome/fontawesome-free/scss/fa-brands";
@import "node_modules/@fortawesome/fontawesome-free/scss/fa-regular";

  • npm run dev

Foundation 6 with @fortawesome fonts and webpack - If using Webpack for everything. Gulp version works pretty well.

Using webpack rather than gulp to manage scss and fonts. Webpack uses the url-loader to grab the fonts. Eliminates a function I’ll have to write in gulp.

  • settings.scss
    • @import '~foundation-sites/scss/util/util'; - Change import statement to point to node_modules
    • $fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; - Set the $fa-font-path so *fontawesome can find the web fonts.
  • styles.scss - main import file with all foundation imports
    • @import '~foundation-sites/scss/foundation'; - import foundation from node_modules.
    • @import '~motion-ui/src/motion-ui'; - Make sure we’re only importing the scss for motion-ui.
    • Import the fontawesome v5 scss and font scss.
      • @import '~@fortawesome/fontawesome-free/scss/fontawesome';
      • @import "~@fortawesome/fontawesome-free/scss/fa-solid"; fas
      • @import "~@fortawesome/fontawesome-free/scss/fa-brands"; - fab
      • @import "~@fortawesome/fontawesome-free/scss/fa-regular"; - fa
      • @import 'local'; - Our local scss - imports our custom components.
  • Import into our main.js file. Our entry point for our webpack application.
    • import "@/assets/styles/styles.scss"; - importing our main styles file.
  • wepack.config.js
    • Takes care of copying the fonts over.
          test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf|svg)$/,
          loader: 'url-loader?limit=100000'
  • Compiles our scss to css. Extracts the css so our static html page can use it. scss section compiles scss to css for us.
    const pluginConfig = [
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css'
    const moduleConfigBase = [{
        test: /\.(sa|sc|c)ss$/,
        exclude: /node_modules/,
        use: [
          // devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader'
        test: /\.tsx?$/,
        exclude: /(node_modules)/,
        loader: 'awesome-typescript-loader'
        test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000'
  • Using webpack in gulp. Watch scss and run webpack whenever it changes.
    const gulpwebpack = require('webpack-stream');
    const webpack = require('webpack');
    const webpackConfig = require('./webpack.config.js');
    // add webpack stream
    function mywebpack() {
      return gulp.src('src/main.js')
        .pipe(gulpwebpack(webpackConfig, webpack))
    }'src/assets/styles/*.scss').on('all', gulp.series(mywebpack, reload));

Zurb Panini Notes

  • Partials are your friends.
    • Inserting values {{>partion value="value"}}
    • Use {{#each}} to iterate over array data
    • Use filename.variable to access data from file in data folder
  • Custom Global Panini Variables
    // src/data/globals.js
    module.exports = {
      production: process.env.NODE_ENV === 'production',
    In handlbars template
    {{#if globals.production}}
      <p>Not production.</p>

Create background-image slide show with orbit


  • Using mixins for grid
    footer {
      @include xy-grid;
      @include xy-grid-layout(4, 'div');
  • Result
          <section class="footer">
              <h2>my title</h2>
              <img src="" alt="image">
              <h2>contact me</h2>


  • Trying to organize my CSS/Styles. Get an overview of what I’m doing. Too many different options.
    • StyleSherpa - Gives you an overview of all your styles. Forces you to at least have some type of plan.

Last update: April 13, 2020 15:25:03