Skip to content

Zeek WordPress starter theme based on _s and Foundation

Notifications You must be signed in to change notification settings

ZeekInteractive/heisenberg

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Steve Zehngut
Nov 17, 2022
819c24b · Nov 17, 2022
Oct 12, 2018
Jun 14, 2019
May 1, 2018
Oct 12, 2018
Jul 23, 2018
Aug 28, 2017
Oct 12, 2018
Aug 28, 2017
May 7, 2019
Oct 12, 2018
Nov 17, 2022
Nov 17, 2022
Nov 27, 2018
Oct 12, 2018
Oct 12, 2018
Apr 13, 2018
Apr 13, 2018
Nov 27, 2018

Repository files navigation

Heisenberg - Zeek Starter Theme

A minimalistic WordPress starter theme, based on Underscores and Foundation for Sites, version ^6.4.3.

Prerequisites

  • Node.js 9.x and npm 5.x

How to get started

  1. Clone or download the project onto your themes directory (./wp-content/themes)
  2. Run a find for the string/slug heisenberg throughout the theme and replace it with your project name.
  3. Run npm install
  4. (optional) Copy the variables.sample.env file and name it variables.env to override some development variables
  5. Run npm start.

Webpack

The theme uses Webpack as its bundler with ES6 modules for JavaScript files.

Deployment

npm run build

This will run both a production and development set of webpack tasks. The enqueue hook will load the correct version of the JS file, based on whether your development/staging server contains the SCRIPT_DEBUG set to true.

Foundation

How to use the Foundation JS files

The theme uses ES6 Modules, so use the existing foundation.js file as a guide to bring in additional Foundation JS modules. There is an existing module included as an example (Tabs).

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.