using the build

www/wp-content/themes/ation2016/functions.php

@@ -19,6 +19,7 @@ function __construct() {
 		add_filter( 'get_twig', array( $this, 'add_to_twig' ) );
 		add_action( 'init', array( $this, 'register_post_types' ) );
 		add_action( 'init', array( $this, 'register_taxonomies' ) );
+		add_action( 'wp_enqueue_scripts', array( $this, 'loadScripts' ) );
 		parent::__construct();
 	}
 
@@ -51,6 +52,11 @@ function add_to_twig( $twig ) {
 		return $twig;
 	}
 
+	function loadScripts() {
+		wp_enqueue_style( 'main', get_template_directory_uri() . '/static/styles/site.min.css' );
+    wp_enqueue_script( 'main', get_template_directory_uri() . '/static/scripts/main.min.js', array('jquery'), '1.0.0', true );
+  }
+
 }
 
 new StarterSite();

www/wp-content/themes/ation2016/gulpfile.js

@@ -9,6 +9,7 @@ var imagemin = require('gulp-imagemin'),
     cache = require('gulp-cache');
 var minifycss = require('gulp-minify-css');
 var sass = require('gulp-sass');
+var sourcemaps = require('gulp-sourcemaps');
 
 gulp.task('images', function(){
   gulp.src('src/images/**/*')
@@ -17,7 +18,8 @@ gulp.task('images', function(){
 });
 
 gulp.task('styles', function(){
-  gulp.src(['src/styles/**/*.scss'])
+  gulp.src(['src/styles/site.scss'])
+    .pipe(sourcemaps.init())
     .pipe(plumber({
       errorHandler: function (error) {
         console.log(error.message);
@@ -28,11 +30,13 @@ gulp.task('styles', function(){
     .pipe(gulp.dest('static/styles/'))
     .pipe(rename({suffix: '.min'}))
     .pipe(minifycss())
+    .pipe(sourcemaps.write())
     .pipe(gulp.dest('static/styles/'))
 });
 
 gulp.task('scripts', function(){
   return gulp.src('src/scripts/**/*.js')
+    .pipe(sourcemaps.init())
     .pipe(plumber({
       errorHandler: function (error) {
         console.log(error.message);
@@ -44,6 +48,7 @@ gulp.task('scripts', function(){
     .pipe(gulp.dest('static/scripts/'))
     .pipe(rename({suffix: '.min'}))
     .pipe(uglify())
+    .pipe(sourcemaps.write())
     .pipe(gulp.dest('static/scripts/'))
 });
 

www/wp-content/themes/ation2016/src/styles/components/_header.scss

@@ -0,0 +1,4 @@
+.header-logo {
+  max-width: 300px;
+  display: block;
+}

www/wp-content/themes/ation2016/src/styles/site.scss

@@ -1,5 +1,11 @@
 $orange: orange;
 
+@import 'type/typography';
+
+@import 'components/header';
+
+@import 'utility/images';
+
 .menu {
   color: $orange;
 }

www/wp-content/themes/ation2016/src/styles/type/_typography.scss

@@ -0,0 +1,10 @@
+$header-font: 'Arial', sans-serif;
+$body-font: 'Times New Roman', serif;
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $header-font;
+}
+
+p, li, span {
+  font-family: $body-font;
+}

www/wp-content/themes/ation2016/src/styles/utility/_images.scss

@@ -0,0 +1,5 @@
+img {
+  max-width: 100%;
+  display: block;
+  height: auto;
+}

www/wp-content/themes/ation2016/static/styles/site.css

@@ -1,2 +1,17 @@
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Arial", sans-serif; }
+
+p, li, span {
+  font-family: "Times New Roman", serif; }
+
+.header-logo {
+  max-width: 300px;
+  display: block; }
+
+img {
+  max-width: 100%;
+  display: block;
+  height: auto; }
+
 .menu {
   color: orange; }

www/wp-content/themes/ation2016/templates/base.twig

@@ -10,9 +10,9 @@
 		<header class="header" >
 			{% block header %}
 				<div class="wrapper">
-					<h1 class="hdr-logo" role="banner">
-						<a class="hdr-logo-link" href="/" rel="home">{{site.name}}</a>
-					</h1>
+					<a href="/" rel="home" class="header-logo">
+						<img src="{{theme.path}}/static/images/logo.png" alt="ATION Digital Media" />
+					</a>
 					<nav id="nav-main" class="nav-main" role="navigation">
 						{% include "menu.twig" with {'menu': menu.get_items} %}
 					</nav><!-- #nav -->