Refactor the css layout to use grid and flex

Remove #primary

Remove #primary, take 2

Change primary layout module to CSS grid.

Remove ::before / ::after based clearfixes. When using flex and grid, pseudo-elements are considered flex/grid elements and cause unexpected behavior. Clearfix is a tool to resolve clearing when using float-based layouts. Modern flex/grid-based layouts do not need them.

Main menu: Use flex as layout module.

Main menu cleanup.

Comments, Posts, and Post Navigation: Use flex for layout. Automatic RTL.

Remove errant test data.

- Fixed skip to content link to point to main content (#primary).
- Changed ID for <main> to #primary to preserve original separation between main and sidebar (#secondary).
- Removed superfluous ID reference to #secondary in CSS.
- Cleaned up whitespace triggering Travis errors.

Fix wpcs issues

Cleaning the rebase

Compile CSS

Remove primary div from WooCommerce too

grid-template-columns property doesn't support negative values

sass/layout/_content-sidebar.scss

@@ -1,22 +1,27 @@
-.content-area {
-	float: left;
-	margin: 0 (-$size__site-sidebar) 0 0;
-	width: $size__site-main;
+.site {
+	display: grid;
+	grid-template-columns: auto ($size__site-sidebar);
+	grid-template-areas:
+		"header header"
+		"main sidebar"
+		"footer footer";
+}
+
+.site-header {
+	grid-area: header;
 }
 
 .site-main {
-	margin: 0 $size__site-sidebar 0 0;
+	grid-area: main;
+	overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
 }
 
-.site-content .widget-area {
-	float: right;
-	overflow: hidden;
-	width: $size__site-sidebar;
+.widget-area {
+	grid-area: sidebar;
 }
 
 .site-footer {
-	clear: both;
-	width: $size__site-main;
+	grid-area: footer;
 }
 
 @import "no-sidebar";

sass/layout/_sidebar-content.scss

@@ -1,22 +1,27 @@
-.content-area {
-	float: right;
-	margin: 0 0 0 (-$size__site-sidebar);
-	width: $size__site-main;
+.site {
+	display: grid;
+	grid-template-columns: ($size__site-sidebar) auto;
+	grid-template-areas:
+		"header header"
+		"sidebar main"
+		"footer footer";
+}
+
+.site-header {
+	grid-area: header;
 }
 
 .site-main {
-	margin: 0 0 0 $size__site-sidebar;
+	grid-area: main;
+	overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
 }
 
-.site-content .widget-area {
-	float: left;
-	overflow: hidden;
-	width: $size__site-sidebar;
+.widget-area {
+	grid-area: sidebar;
 }
 
 .site-footer {
-	clear: both;
-	width: $size__site-main;
+	grid-area: footer;
 }
 
 @import "no-sidebar";

sass/mixins/_mixins-master.scss

@@ -11,18 +11,6 @@
 	margin-right: auto;
 }
 
-// Clearfix
-@mixin clearfix() {
-	content: "";
-	display: table;
-	table-layout: fixed;
-}
-
-// Clear after (not all clearfix need this also)
-@mixin clearfix-after() {
-	clear: both;
-}
-
 // Column width with margin
 @mixin column-width($numberColumns: 3) {
 	width: map-get($columns, $numberColumns) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / $numberColumns );

sass/modules/_accessibility.scss

@@ -35,6 +35,6 @@
 }
 
 /* Do not show the outline on the skip link target. */
-#content[tabindex="-1"]:focus {
+#primary[tabindex="-1"]:focus {
 	outline: 0;
 }

sass/modules/_clearings.scss

@@ -1,18 +0,0 @@
-.clear,
-.entry-content,
-.comment-content,
-.site-header,
-.site-content,
-.site-footer {
-
-	&::before,
-	&::after {
-
-		@include clearfix;
-	}
-
-	&::after {
-
-		@include clearfix-after;
-	}
-}

sass/navigation/_menus.scss

@@ -1,7 +1,5 @@
 .main-navigation {
-	clear: both;
 	display: block;
-	float: left;
 	width: 100%;
 
 	ul {
@@ -27,7 +25,8 @@
 
 				&:hover > ul,
 				&.focus > ul {
-					left: 100%;
+					display: block;
+					left: auto;
 				}
 			}
 
@@ -51,7 +50,6 @@
 	}
 
 	li {
-		float: left;
 		position: relative;
 
 		&:hover > a,
@@ -84,7 +82,7 @@
 	}
 
 	.main-navigation ul {
-		display: block;
+		display: flex;
 	}
 }
 
@@ -94,17 +92,18 @@
 
 	.site-main & {
 		margin: 0 0 1.5em;
-		overflow: hidden;
+	}
+
+	.nav-links {
+		display: flex;
 	}
 
 	.nav-previous {
-		float: left;
-		width: 50%;
+		flex: 1 0 50%;
 	}
 
 	.nav-next {
-		float: right;
-		text-align: right;
-		width: 50%;
+		text-align: end;
+		flex: 1 0 50%;
 	}
 }

sass/shop/_components.scss

@@ -6,8 +6,6 @@
 	margin: 0;
 	padding: 0;
 
-	@include clearfix;
-
 	.cart-contents {
 		text-decoration: none;
 	}
@@ -226,8 +224,6 @@ p.stars {
 .woocommerce-error,
 .woocommerce-noreviews,
 p.no-comments {
-
-	@include clearfix;
 	background-color: $woocommerce__color-success;
 	clear: both;
 }

sass/shop/_products.scss

@@ -1,6 +1,4 @@
 ul.products {
-
-	@include clearfix;
 	margin: 0;
 	padding: 0;
 

sass/shop/_single-product.scss

@@ -1,8 +1,6 @@
 .single-product {
 
 	div.product {
-
-		@include clearfix;
 		position: relative;
 
 		.woocommerce-product-gallery {
@@ -22,8 +20,6 @@
 			}
 
 			.flex-control-thumbs {
-
-				@include clearfix;
 				margin: 0;
 				padding: 0;
 

sass/style.scss

@@ -32,7 +32,6 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 	## Menus
 # Accessibility
 # Alignments
-# Clearings
 # Widgets
 # Content
 	## Posts and pages
@@ -80,11 +79,6 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 --------------------------------------------------------------*/
 @import "modules/alignments";
 
-/*--------------------------------------------------------------
-# Clearings
---------------------------------------------------------------*/
-@import "modules/clearings";
-
 /*--------------------------------------------------------------
 # Widgets
 --------------------------------------------------------------*/