Zeek WordPress starter theme based on _s and Foundation
PHP CSS JavaScript
Latest commit ef6a766 Dec 13, 2016 @jacobarriola jacobarriola committed on GitHub πŸ› Fix template parts path
Permalink
Failed to load latest commit information.
assets πŸ“¦ Compile CSS Dec 6, 2016
includes Clean up, simplify, use autoloading, use more closures to simplify fu… Aug 5, 2016
languages sync w/ _s commit f6ddaaa21ef... Jan 25, 2016
page-templates πŸ› Fix template parts path Dec 13, 2016
template-parts Remove '+' characters from template Oct 30, 2016
vendor Remove autoload static file Aug 24, 2016
.gitignore Clean up, simplify, use autoloading, use more closures to simplify fu… Aug 5, 2016
404.php Remove excess PHP tags Oct 30, 2016
README.md ⬆️ Upgrade Foundation to 6.2.4 Dec 6, 2016
archive.php Remove excess PHP tags Oct 30, 2016
comments.php sync w/ _s commit f6ddaaa21ef... Jan 25, 2016
footer.php Fix theme name typo Sep 9, 2016
front-page.php Remove excess PHP tags Oct 30, 2016
functions.php 🎨 Move foundation mixins into their own Sass partial Dec 6, 2016
gulpfile.js 🎨 Make gulp-notify messages more consistent Dec 6, 2016
header.php Use class name to hide title-bar for offcanvas Jul 6, 2016
index.php Remove excess PHP tags Oct 30, 2016
package.json Clean up, simplify, use autoloading, use more closures to simplify fu… Aug 5, 2016
page.php Remove excess PHP tags Oct 30, 2016
rtl.css sync w/ _s commit f6ddaaa21ef... Jan 25, 2016
screenshot.png sync w/ _s commit f6ddaaa21ef... Jan 25, 2016
search.php Remove excess PHP tags Oct 30, 2016
sidebar.php Remove excess PHP tags Oct 30, 2016
single.php Remove excess PHP tags Oct 30, 2016
style.css Clean up, simplify, use autoloading, use more closures to simplify fu… Aug 5, 2016
yarn.lock βž•Add yarn Dec 6, 2016

README.md

Heisenberg - Zeek Starter Theme

This is the Zeek Starter theme, based on Underscores and Foundation for Sites, version ^6.2.4.

Prerequisites

  • Node.js 4.x.x and npm 2.x.x
  • Gulp.js - from Terminal or Command Prompt run npm install --global gulp

Note: if you run into errors when using Terminal, you may have to use the sudo command to install Gulp.js. For instance, sudo npm install -g gulp

How to get started

  1. Clone or download the project onto your themes directory (./wp-content/themes)
  2. From the theme directory, run npm install. All of the theme dependencies will be installed into node_modules.
  3. Run a find and replace to remove the heisenberg slug/string throughout with your project name.
  4. Run gulp serve

Gulp

Gulp will handle Sass compiling, vendor-prefixing, CSS/JS minification and browser reloading. It will watch your Sass, JS and PHP files and will compile when a change is made, inject new CSS after compilation and will reload the browser when your PHP and JS files change.

You have 3 gulp commands that you can use:

  1. gulp serve - will run all of the gulp tasks, watch your files, and start a node server that does auto refreshing and CSS injection
  2. gulp watch - everything in gulp serve except running the node server
  3. gulp - a one-time command that will run your Sass, JS and image tasks

CSS/Sass Tasks – gulp will compile a compressed CSS and sourcemap file for you.

JavaScript Tasks - gulp will concatenate all of the JavaScript files located in ./assets/js into a new file named app.js.

What's up with the 'dist' directory? - the ./assets/dist directory is where gulp will send prepared JS and CSS files. The logic behind this is simply a nice segregated place to send and enqueue our files generated by gulp (outputs). That way we can keep our inputs and outputs separated. If you're not a fan and want it to go somewhere else, just adjust the gulp.dest() paths in the gulpfile.js for the 'js' and 'styles' tasks. Be sure to adjust your enqueue path in functions.php as well.

How to use the Foundation Sass files

Using the _settings.scss file, you can overwrite a Foundation default style before things get compiled, thereby making your final CSS lighter. To do so, find the variable in the file, uncomment it, and set the value you desire. The file is located in ./assets/sass.

Also, in the app.scss file, you can remove a Foundation CSS module by commenting out the associated mixin. For instance, if your project doesn't use Foundation's Orbit module, simply comment out the @include foundation-orbit mixin and the code will never reach your final app.css file.

Be sure to check Foundation’s docs on using Sass and their mixins for custom control on styles.

Assets + NPM architecture

assets/
    |- dist/                        # Gulp generated files enqueued by theme go here
    |   |
    |   |- css/
    |   |
    |   |   |- app.css              # Our compressed CSS file
    |   |   |- app.css.map          # Our sourcemap file
    |   |   |- login.css            # Login page styles
    |
    |   |- js/
    |   |
    |   |   |- app.js               # Our non-minified development JavaScript file
    |   |   |- app.min.js           # Our minified production JavaScript file
    |   |   |- customizer.js
    |
    |- img/                     # Images
    |
    |- js/                      # JavaScript files
    |
    |- sass/
    |   |
    |   |– base/               # Base element custom styles such as type, buttons, colors, etc. (non-Foundation stuff)
    |   |   |– _buttons.scss     # Buttons
    |   |   |– _typography.scss  # Typography rules
    |   |   |– _utilities.scss   # Mixins and functions
    |   |   ...                  # Etc.
    |   |
    |   |– components/         # Element items that are a combination of base items
    |   |   |– _navigation.scss  # Navigation
    |   |   ...                  # Etc.
    |   |
    |   |
    |   |– sections/           # Element items that make up large sections of the application
    |   |   |– _header.scss      # Header
    |   |   |– _footer.scss      # Footer
    |   |   |– _sidebar.scss     # Sidebar
    |   |   ...                  # Etc.
    |   |
    |   |– vendors/            # 3rd-party element items such as plugins and core WordPress overwrites
    |   |   |– _wordpress.scss   # WordPress style adjustments
    |   |   ...                  # Etc.
    |   |
    |   |– pages/                  # Page specific styles
    |   |   |– _front-page.scss  # Home specific styles
    |   |   |– _page.scss        # Page specific styles
    |   |   ...                  # Etc.
    |   |
    |   |
    |   |– _settings.scss          # Foundation settings file
    |   |- _shame.scss           # Temporary work arounds
    |   |– app.scss              # Primary Sass file
    | |
    | |- login.scss             # Styles for the WordPress login page
    | |
node_modules/                   # Foundation for sites + gulp plugins
    | |
    | |-foundation-sites/

WordPress files

Our starter theme follows the Codex Template Hierarchy as found on http://codex.wordpress.org/Template_Hierarchy.

Site Front Page - front-page.php

History

This project is based off of Automattic's _s project, based on the distribution zip generated off of commit f6ddaaa21ef562fe85881f7e3cc5bdd1e592bb0e.