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

inc/woocommerce.php

@@ -118,9 +118,8 @@ if ( ! function_exists( '_s_woocommerce_wrapper_before' ) ) {
 	 */
 	function _s_woocommerce_wrapper_before() {
 		?>
-		<div id="primary" class="content-area">
-			<main id="main" class="site-main">
-			<?php
+			<main id="primary" class="site-main">
+		<?php
 	}
 }
 add_action( 'woocommerce_before_main_content', '_s_woocommerce_wrapper_before' );
@@ -136,7 +135,6 @@ if ( ! function_exists( '_s_woocommerce_wrapper_after' ) ) {
 	function _s_woocommerce_wrapper_after() {
 		?>
 			</main><!-- #main -->
-		</div><!-- #primary -->
 		<?php
 	}
 }