Use full width layout when there’s no sidebar

README.md

@@ -14,6 +14,7 @@ My ultra-minimal CSS might make me look like theme tartare but that means less s
 * Some small tweaks in `inc/template-functions.php` that can improve your theming experience.
 * A script at `js/navigation.js` that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued in `functions.php`.
 * 2 sample CSS layouts in `layouts/` for a sidebar on either side of your content.
+Note: `.no-sidebar` styles are not automatically loaded.
 * Smartly organized starter CSS in `style.css` that will help you to quickly get your design off the ground.
 * Licensed under GPLv2 or later. :) Use it to make something cool.
 

inc/template-functions.php

@@ -17,6 +17,11 @@ function _s_body_classes( $classes ) {
 		$classes[] = 'hfeed';
 	}
 
+	// Adds a class of no-sidebar when there is no sidebar present.
+	if ( ! is_active_sidebar( 'sidebar-1' ) ) {
+		$classes[] = 'no-sidebar';
+	}
+
 	return $classes;
 }
 add_filter( 'body_class', '_s_body_classes' );

layouts/content-sidebar.css

@@ -23,3 +23,12 @@
 	clear: both;
 	width: 100%;
 }
+
+.no-sidebar .content-area {
+	float: none;
+	margin-left: auto;
+	margin-right: auto;
+}
+.no-sidebar .site-main {
+	margin-right: 0;
+}

layouts/sidebar-content.css

@@ -23,3 +23,12 @@
 	clear: both;
 	width: 100%;
 }
+
+.no-sidebar .content-area {
+	float: none;
+	margin-left: auto;
+	margin-right: auto;
+}
+.no-sidebar .site-main {
+	margin-right: 0;
+}

sass/layout/_content-sidebar.scss

@@ -18,3 +18,5 @@
 	clear: both;
 	width: $size__site-main;
 }
+
+@import "no-sidebar";

sass/layout/_no-sidebar.scss

@@ -0,0 +1,11 @@
+.no-sidebar {
+	.content-area {
+		float: none;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.site-main {
+		margin-right: 0;
+	}
+}

sass/layout/_sidebar-content.scss

@@ -18,3 +18,5 @@
 	clear: both;
 	width: $size__site-main;
 }
+
+@import "no-sidebar";

sass/site/_site.scss

@@ -1,5 +1,6 @@
 // @import "../layout/content-sidebar";
 // @import "../layout/sidebar-content";
+
 /*--------------------------------------------------------------
 ## Posts and pages
 --------------------------------------------------------------*/