Feature/utilities updates (#319)

* Updates .wrap to use $max-width

* Removes omega reset mixin
Neat 2.0.0 no longer uses right-margin, which is why this mixin was useful in the first place

* Moves units of measure from mixins to functions directory
This is now called earlier in our main style.scss file, and can be used for calculations within the variables file

* Remoces $base-context declaration from typography, and adds it to units-of-measure

* Updates breakpoints to use em, and aligns with internal coding standards

* Removes phone-portrait map, which was only a 1px query 😬

* Adds a get-gutter function for getting the gutter out of a custom grid Sass map

* Adds Sassdoc annotations

* Adds the grids classes mixin

* Adds a media mixin to aid in writing media queries

* Adds super-basic scaffolding for a grid system

* compiled styles

* Sets up partial for colors mixin

* Adds colors mixin

* Adds $theme-colors Sass map

* Adds colors partial for creating our color presentational classes

* compiled styles

* Adds color as a param for SVG function

* Updates svg function to use display terminology

* Adds Sassdoc as npm dependency

* Adds Sassdoc gulp task

* Initial run of Sassdoc 🎉

* Fixes doc comments

* Removes Sassdoc-esque comment

* Adds basic description to reverse list function

* Updates index.html for Sassdoc

* Adds Sassdoc comment

* Removes extra poster comment for Sassdoc

* Updates gutter function and adds better Sass docs

* Updates gutter function

* Moves em function into its own file

* Moves rem function into its own partial

* Moves line-height function to its own partial

* Updates units of measure to strip-units

* Adds separate base-context partial

* Moves reverse list function to functions directory

* Adds full Sassdoc to vertical align

* Removes vendor prefixes
(no longer required per caniuse & internal browser requirements)

* Updates param line in Sassdoc

* Adds sassdocs to media mixin

* compiled styles & sassdoc

* Adds Sassdoc block

* Updates global media breakpoints (#307); fixes #229

* adds new breakpoints and updates documentation

* updates grid settings to utilize the new breakpoints — removes now unused breakpoints

* Update breakpoint variables (#309)

* adds new breakpoints and updates documentation

* updates grid settings to utilize the new breakpoints — removes now unused breakpoints

* Replace breakpoint variables (adds -up suffix where applicable) from breakpoint/grid updates so compiles don't break.

* Feature/#272 use px on all grid items (#316)

* Updates media query breakpoints to use pixels
This also removes the -up from the variable name to keep with current convention

* Updates variable names throughout theme

* Updates media query to remove 1px if a breakpoint variable is used

* compiled styles

* Feature/#275 use more semantic containers (#317)

* Updates grid partial name

* Adds full width mixin

* Adds content width variable

* Adds more helpful comments

* Adds better column classes and full width class

* Removes full-width class from media partial

* Adds a page template that contains sidebar
This allows us to blow up the sidebar in our regular page template 😄

* Removes sidebar from standard page template 💥

* Fixes template name

* Removes wrap class styles & adds padding to primary & secondary

* Adds new column classes

* Removes primary / secondary styles in favor of using column classes

* Removes all the wraps 👋 💥

* Adds new semantic grid classes to ACF content blocks

* Adds has-sidebar to single posts by default

* Removes extra padding declarations & adds primary styling when sidebar is present

* Removes left / right padding so comments are aligned with content & header / footer by default

* Updates Sassdoc

* compiled styles

* Theme/#314 remove em move back to px and rem (#318)

* Removes em and reverts back to rem
Some of the updates ensure things like borders meet our internal guidelines (px)

* Removes custom grids
I've never seen these used, and they're easy enough to spin up

* Adds a transitions partial to standardize our transitions

* Updates partials to use transition variables

* Updates border radii to use the $border-radius variables

* compiled styles

* Updates full width mixin header

* Fixes Colors Sassdoc default doc

* Updates CSS output for media mixin

* Updates Sassdocs

404.php

@@ -9,27 +9,24 @@
 
 get_header(); ?>
 
-	<div class="wrap">
-		<div class="primary content-area">
-			<main id="main" class="site-main">
+	<div class="primary content-area">
+		<main id="main" class="site-main">
 
-				<section class="error-404 not-found">
-					<header class="page-header">
-						<h1 class="page-title"><?php esc_html_e( 'Sorry, this page doesn\'t exist.', '_s' ); ?></h1>
-					</header><!-- .page-header -->
+			<section class="error-404 not-found">
+				<header class="page-header">
+					<h1 class="page-title"><?php esc_html_e( 'Sorry, this page doesn\'t exist.', '_s' ); ?></h1>
+				</header><!-- .page-header -->
 
-					<div class="page-content">
+				<div class="page-content">
 
-						<p><?php esc_html_e( 'It seems we can’t find what you’re looking for. Perhaps searching can help.', '_s' ); ?></p>
+					<p><?php esc_html_e( 'It seems we can’t find what you’re looking for. Perhaps searching can help.', '_s' ); ?></p>
 
-						<?php get_search_form(); ?>
+					<?php get_search_form(); ?>
 
-					</div><!-- .page-content -->
-				</section><!-- .error-404 -->
+				</div><!-- .page-content -->
+			</section><!-- .error-404 -->
 
-			</main><!-- #main -->
-		</div><!-- .primary -->
-
-	</div><!-- .wrap -->
+		</main><!-- #main -->
+	</div><!-- .primary -->
 
 <?php get_footer(); ?>

Gulpfile.js

@@ -20,6 +20,7 @@ const postcss = require( 'gulp-postcss' );
 const reload = browserSync.reload;
 const rename = require( 'gulp-rename' );
 const sass = require( 'gulp-sass' );
+const sassdoc = require( 'sassdoc' );
 const sassLint = require( 'gulp-sass-lint' );
 const sort = require( 'gulp-sort' );
 const sourcemaps = require( 'gulp-sourcemaps' );
@@ -317,6 +318,18 @@ gulp.task( 'js:lint', () =>
 		.pipe( eslint.failAfterError() )
 );
 
+/**
+ * Generate Sass docs.
+ */
+gulp.task( 'sassdoc', function() {
+	var options = {
+		dest: 'docs',
+	};
+
+	return gulp.src( 'assets/sass/**/*.scss' )
+		.pipe( sassdoc( options ) );
+});
+
 /**
  * Process tasks and reload browsers on file changes.
  *
@@ -347,10 +360,11 @@ gulp.task( 'watch', function() {
  * Create individual tasks.
  */
 gulp.task( 'markup', browserSync.reload );
-gulp.task( 'i18n', [ 'wp-pot' ]);
-gulp.task( 'icons', [ 'svg' ]);
-gulp.task( 'scripts', [ 'uglify' ]);
-gulp.task( 'styles', [ 'cssnano' ]);
-gulp.task( 'sprites', [ 'spritesmith' ]);
-gulp.task( 'lint', [ 'sass:lint', 'js:lint' ]);
-gulp.task( 'default', [ 'sprites', 'i18n', 'icons', 'styles', 'scripts', 'imagemin' ]);
+gulp.task( 'i18n', [ 'wp-pot' ] );
+gulp.task( 'icons', [ 'svg' ] );
+gulp.task( 'scripts', [ 'uglify' ] );
+gulp.task( 'styles', [ 'cssnano' ] );
+gulp.task( 'sprites', [ 'spritesmith' ] );
+gulp.task( 'lint', [ 'sass:lint', 'js:lint' ] );
+gulp.task( 'docs', ['sassdoc'] );
+gulp.task( 'default', [ 'sprites', 'i18n', 'icons', 'styles', 'scripts', 'imagemin'] );

archive.php

@@ -9,46 +9,40 @@
 
 get_header(); ?>
 
-	<div class="wrap">
-		<div class="primary content-area">
-			<main id="main" class="site-main">
+	<div class="primary content-area">
+		<main id="main" class="site-main">
 
-			<?php
-			if ( have_posts() ) : ?>
-
-				<header class="page-header">
-					<?php
-						the_archive_title( '<h1 class="page-title">', '</h1>' );
-						the_archive_description( '<div class="archive-description">', '</div>' );
-					?>
-				</header><!-- .page-header -->
+		<?php
+		if ( have_posts() ) : ?>
 
+			<header class="page-header">
 				<?php
-				/* Start the Loop */
-				while ( have_posts() ) : the_post();
-
-					/*
-					 * Include the Post-Format-specific template for the content.
-					 * If you want to override this in a child theme, then include a file
-					 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
-					 */
-					get_template_part( 'template-parts/content', get_post_format() );
+					the_archive_title( '<h1 class="page-title">', '</h1>' );
+					the_archive_description( '<div class="archive-description">', '</div>' );
+				?>
+			</header><!-- .page-header -->
 
-				endwhile;
-
-				the_posts_navigation();
+			<?php
+			/* Start the Loop */
+			while ( have_posts() ) : the_post();
 
-			else :
+				/*
+					* Include the Post-Format-specific template for the content.
+					* If you want to override this in a child theme, then include a file
+					* called content-___.php (where ___ is the Post Format name) and that will be used instead.
+					*/
+				get_template_part( 'template-parts/content', get_post_format() );
 
-				get_template_part( 'template-parts/content', 'none' );
+			endwhile;
 
-			endif; ?>
+			the_posts_navigation();
 
-			</main><!-- #main -->
-		</div><!-- .primary -->
+		else :
 
-		<?php get_sidebar(); ?>
+			get_template_part( 'template-parts/content', 'none' );
 
-	</div><!-- .wrap -->
+		endif; ?>
 
+		</main><!-- #main -->
+	</div><!-- .primary -->
 <?php get_footer(); ?>

assets/sass/base/_accessibility.scss

@@ -17,12 +17,12 @@
 		@include size(auto);
 
 		background-color: $color-background-screen-reader;
-		border-radius: $border-radius;
+		border-radius: $border-radius-medium;
 		box-shadow: 0 0 2px 2px rgba($color-black, 0.6);
 		clip: auto;
 		color: $color-text-screen-reader;
 		display: block;
-		font-size: em(14);
+		font-size: rem(14);
 		font-weight: 700;
 		left: rem(5);
 		line-height: normal;

assets/sass/base/_colors.scss

@@ -0,0 +1,6 @@
+//--------------------------------------------------------------
+// COLORS
+//--------------------------------------------------------------
+
+// Create our background, color, and fill presentational classes.
+@include colors($theme-colors);

assets/sass/base/_media.scss

@@ -135,7 +135,6 @@ img {
 
 // Jetpack now auto wraps all oembed videos in a <div>
 // Let's make it full-width in the content cuz it looks cool.
-.full-width,
 .jetpack-video-wrapper {
 	margin-left: rem(-35);
 	max-width: calc(100% + 70px);

assets/sass/base/_scaffolding.scss

@@ -79,8 +79,8 @@
 		@include size(100% rem(125));
 		@include grid-column(3);
 
+		border: 1px solid black;
 		border-radius: rem(5);
-		border: rem(1) solid black;
 		margin-bottom: $gutter;
 		position: relative;
 		text-align: center;

assets/sass/base/_typography.scss

@@ -7,7 +7,7 @@ html {
 	// sass-lint:disable property-units
 	font-size: $base-context * 1px;
 	// sass-lint:enable property-units
-}
+} // html
 
 body,
 button,
@@ -107,7 +107,7 @@ kbd,
 tt,
 var {
 	font-family: $font-code;
-	font-size: em(15);
+	font-size: rem(15);
 } // code, kbd, tt, var
 
 abbr,

assets/sass/base/_window-ready.scss

@@ -5,7 +5,7 @@
 // I will cause FOUT, hide me by default!
 .not-ready {
 	opacity: 0;
-	transition: opacity 0.5s ease;
+	transition: $transition-opacity;
 	visibility: hidden;
 
 	// When everything has loaded, fade me in using window-ready.js.

assets/sass/base/index.scss

@@ -7,3 +7,4 @@
 @import 'sprites';
 @import 'window-ready';
 @import 'scaffolding';
+@import 'colors';

assets/sass/modules/_comments.scss

@@ -7,7 +7,7 @@
 //-----------------------------------------
 .comments-area {
 	border-top: 1px solid $color-silver;
-	margin: rem(100) rem(24) rem(151);
+	margin: rem(100) 0 rem(151);
 
 	@include grid-media($desktop) {
 		margin-left: auto;
@@ -19,7 +19,7 @@
 	} // .comment-reply-title
 
 	.comments-title {
-		font-size: em(24);
+		font-size: rem(24);
 		margin-top: rem(126);
 	} // .comments-title
 
@@ -40,7 +40,7 @@
 
 	label {
 		float: left;
-		font-size: em(16);
+		font-size: rem(16);
 		text-transform: uppercase;
 		width: 100%;
 	} // label
@@ -58,7 +58,7 @@
 	// Any input (except submit button)
 	input:not(.submit) {
 		clear: both;
-		transition: border 0.2s ease-in-out;
+		transition: $transition-border;
 		width: 100%;
 
 		// Focus + active state.
@@ -67,15 +67,15 @@
 			border: 1px solid $color-mineshaft;
 		} // &:focus, &:active
 
-		@include grid-media($phone-landscape) {
+		@include grid-media($phone) {
 			max-width: rem(250);
 		}
 	} // input:not(.submit)
 
 	// Comment text area.
 	textarea {
 		max-width: rem(870);
-		transition: border 0.2s ease-in-out;
+		transition: $transition-border;
 
 		// Focus + active state.
 		&:focus,
@@ -142,7 +142,7 @@
 		} // a
 
 		time {
-			font-size: em(12);
+			font-size: rem(12);
 		} // time
 	} // .comment-metadata
 
@@ -152,7 +152,7 @@
 		float: left;
 		margin: rem(-6) rem(26) 0 0;
 
-		@include grid-media($phone-landscape) {
+		@include grid-media($phone) {
 			margin-top: rem(-12);
 		}
 	} // .avatar
@@ -189,7 +189,7 @@
 		margin: rem(40) 0;
 		padding-left: rem(20);
 
-		@include grid-media($phone-landscape) {
+		@include grid-media($phone) {
 			padding-left: rem(35);
 		}
 
@@ -209,7 +209,7 @@
 			.comment-author {
 				line-height: 1.25;
 
-				@include grid-media($phone-landscape) {
+				@include grid-media($phone) {
 					line-height: 1;
 				}
 			} // .comment-author
@@ -227,7 +227,7 @@
 		background-color: $color-white;
 		padding: rem(24) 0;
 
-		@include grid-media($phone-landscape) {
+		@include grid-media($phone) {
 			padding-left: rem(36);
 			padding-right: rem(36);
 		}

assets/sass/modules/_content.scss

@@ -8,7 +8,7 @@
 
 // Entry Title
 .entry-title {
-	font-size: em(36);
+	font-size: rem(36);
 } // .entry-title
 
 // Sticy and Comments Link

assets/sass/modules/_header.scss

@@ -4,11 +4,11 @@
 
 // Site Title
 .site-title {
-	font-size: em(48);
+	font-size: rem(48);
 } // .site-title
 
 // Site Description
 .site-description {
-	font-size: em(24);
+	font-size: rem(24);
 	margin: 0 0 rem(24) 0;
 } // .site-description