Add webpack

README.md

@@ -2,32 +2,31 @@
 
 A minimalistic WordPress starter theme, based on <a href="http://underscores.me/">Underscores</a> and Foundation for Sites, version ^6.4.3.
 
-
 ## Prerequisites
 * Node.js 9.x and npm 5.x
-* Gulp.js - from Terminal or Command Prompt run `npm install -g gulp`
 
 ## How to get started
 1. Clone or [download](https://github.com/ZeekInteractive/heisenberg/archive/master.zip "Download the Heisenberg Zip") 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 for the string/slug `heisenberg` throughout the theme and replace it with your project name.
-4. Run `npm run dev` or `npm run build` to run a one-time compile of assets.
-
-## 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.
+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`.
 
-### You have 3 gulp commands that you can use:
-1. `gulp dev` or `npm run dev` - 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` or `npm run 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
+## Webpack
+The theme uses Webpack as its bundler with ES6 modules for JavaScript files.
 
-**CSS/Sass Tasks** – gulp will compile a compressed CSS and sourcemap file for you.
+## Deployment
+```bash
+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`.
 
-**JavaScript Tasks** - gulp will concatenate all of the JavaScript files located in `./assets/js` into a new file named `app.js`.
+## Foundation
 
-**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 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
+### 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.

assets/js/foundation.js

@@ -0,0 +1,11 @@
+import { Foundation } from 'foundation-sites/js/foundation.core'
+import { Tabs } from 'foundation-sites/js/foundation.tabs'
+
+// Include the Tab Module
+Foundation.plugin(Tabs, 'Tabs')
+
+// Add jQuery to foundation
+Foundation.addToJquery(jQuery)
+
+// Kick off foundation
+jQuery(document).foundation()

assets/main.js

@@ -0,0 +1,2 @@
+import './sass/app.scss'
+import './js/foundation'

assets/sass/base/_typography.scss

@@ -1,16 +1,2 @@
 // Typography
 // - - - - - - - - - - - - - - - - - - - - - - - - -
-
-p {
-	margin: 0;
-}
-
-h1 {
-	font-size: 2rem;
-	font-weight: 700;
-}
-
-h2 {
-	font-size: 1.25rem;
-	font-weight: 700;
-}

index.php

@@ -27,8 +27,25 @@
 
 				echo esc_html( 'Sorry, no posts' );
 
+			endif;
+
+			if ( is_home() ) : ?>
+
+				<h4 style="margin-top: 1.25em;">Tabs</h4>
+				<ul class="tabs" data-tabs id="example-tabs">
+					<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
+					<li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
+				</ul>
+				<div class="tabs-content" data-tabs-content="example-tabs" style="margin-bottom: 5em;">
+					<div class="tabs-panel is-active" id="panel1">
+						<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
+					</div>
+					<div class="tabs-panel" id="panel2">
+						<p>Suspendisse dictum feugiat nisl ut dapibus.  Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.  Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+					</div>
+				</div>
+			<?php
 			endif; ?>
-
 		</main>
 
 		<aside class="medium-4 columns">