Theming with a Solid ‘Foundation’

Building a theme with a solid foundation is essential in any frontend project. Save an average of 8 hours in development time by using gulp-foundation.

Building a theme with a solid foundation is essential in any frontend project. Coding standards, optimization, automation & testing is key to ensure a stable, readable, flexible and completely customizable theme. That’s where gulp-foundation comes in — a starter Gulp build integrated with the ZURB Foundation framework.

# What is gulp-foundation?

gulp-foundation is a starter Gulp build integrated with the ZURB Foundation framework. It provides a solid foundation to rapidly build websites no matter the platform (WordPress, Drupal, static, etc.). It’s focus is to provide a standards-driven, optimized, flexible, highly customizable, automated starter theme that can easily be dropped into any project using NodeJS. It’s simple to configure, easy to use and will cut your initial development time by more than half with the help of:

  • Node.js – JavaScript runtime built on Chrome’s V8 JavaScript engine.
  • Gulp.js – Toolkit for automating painful or time-consuming tasks in your development workflow.
  • Babel – ECMAScript2015+ JavaScript compiler.
  • ESLint – Configurable linter tool for identifying and reporting on patterns in JavaScript.
  • UglifyJS – JavaScript parser, minifier, compressor and beautifier toolkit.
  • Sass – A mature, stable and powerful professional grade CSS extension language.
  • cssnano – A modular CSS minifier built on top of the PostCSS ecosystem.
  • autoprefixer – Configurable node package used to translate modern CSS for backward compatibility.
  • ZURB Foundation (optional) – A framework for any device, medium and accessibility.
  • imagemin – Node package to automate minifying images.
  • stylelint – Modern CSS linter that helps avoid errors and enforce conventions in styles.
  • sourcemaps – Configurable source map generation.
  • todo – Generates a TODO.md from todos and fixmes.
  • htmlmin (static sites) – Configurable HTML minifer with safety features.

# Who uses gulp-foundation?

Breast Cancer Research Foundation
Robert Rauschenberg Foundation
Arthroscopic Innovations
Austin JeepPeople
Trinity Wall Street Church
Ben Marshall

# Getting Started with gulp-foundation

Setting up gulp-foundation is simple and quick once downloaded:

npm install

Once installed, you can start prototyping your theme or with a little config completely customize it to your needs saving more than an average of 8 hours in development time*.

*Based on over 4 years of personal development use in more than 20 production running websites.

# Configuration

Configuring gulp-foundation can be as simple or complex as needed. Project, JavaScript and more advanced configuration can be found in gulpfile.babel.js.

# CSS & Base Component Styles

A good start in configuration if using the ZURB Foundation framework is defining your theme base styles using Foundation’s Sass variables found in src/scss/config/_settings.scss. For instance:

$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
  primary: #1779ba,
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
);
...
IMPORTANT: Avoid adding additional Sass variables in src/scss/config/_settings.scss. If you need additional variables, place them in src/scss/config/_variables.scss.

Next, you’ll need to add/remove the design components needed in your project. You can do this in src/scss/critical.scss and src/scss/non-critical.scss. By default only base HTML elements and typography are included.

For more information on the available variables and components, see ZURB Foundation’s documentation.

# JavaScript

When using JS, it’s important it’s properly configured for compiling, minifying, linting, etc. Configuration for JS files (along with more advanced project configuration) can be handled in gulpfile.babel.js. To add/edit/create additional JS files, use the js constant:

const js = {
  // Name & location of file in the JS directory.
  'components/foundation-core': [
    // Source(s) for the JS file
    foundationDir + 'js/plugins/foundation.core.js',
  ]
}
PRO TIP: Use the Node package manager when possible to install scripts. This makes it easier to update those packages when updates are released.

# Usage

Once configured, you’re ready to start compiling.

For development, run the following with the optional --prod flag to compile as production:

gulp watch
gulp watch --prod

For production, run:

gulp build
gulp build --prod

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

All comments are held for moderation and only published when on topic and not rude. You'll even get little stars if you do an extra good job.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.

icon-search icon-link