diff --git a/resources/skins.vector.styles/layout-default.less b/resources/skins.vector.styles/layout-default.less
new file mode 100644
index 000000000..ee8d5494b
--- /dev/null
+++ b/resources/skins.vector.styles/layout-default.less
@@ -0,0 +1,153 @@
+//
+// Default layout for Modern Vector.
+//
+
+body {
+	// General background/foreground color definition as one exception to the rule.
+	background-color: @background-color-base;
+	color: @color-base;
+	// Vertical scrollbar always visible.
+	overflow-y: scroll;
+}
+
+.mw-body,
+.parsoid-body {
+	direction: ltr;
+	padding: @padding-content;
+}
+
+.mw-body {
+	// Will be removed when we limit content width (T246420).
+	/* Border on top, left, and bottom side */
+	border: @border-width-base @border-style-base @border-color-content;
+	border-right-width: 0;
+	/* Merge the border with tabs' one (in their background image) */
+	margin-top: -@border-width-base;
+
+	.firstHeading {
+		/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
+		overflow: visible;
+	}
+}
+
+/* Space for header above content */
+.mw-header-placeholder {
+	// Reserve space for the absolute positioned header and tabs.
+	height: @height-header + @height-tabs;
+}
+
+/* Header layout */
+.mw-header {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	// A height is set to account for projects where no icon is set.
+	height: @height-logo-icon;
+	margin: @margin-top-header 0 @margin-bottom-header;
+	padding: @padding-vertical-header @padding-horizontal-header;
+	// Vertical centering of header elements (IE>=11), requires flex.
+	// Non-flex fallback for IE<=9: float rule on the child elements.
+	.flex-display();
+	// https://caniuse.com/#search=align-items
+	align-items: center;
+	z-index: @z-index-header;
+}
+
+/* Searchbox */
+#p-search {
+	float: left;
+	margin: 0.5em 0.5em 0 0.5em;
+	min-width: 5em;
+	// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
+	width: 13.2em;
+	// Support: Modern browsers, responsive width.
+	width: 20vw;
+	max-width: 20em;
+}
+
+/* Main column */
+.mw-body,
+#mw-data-after-content,
+#left-navigation,
+.mw-footer {
+	margin-left: @width-grid-column-one;
+}
+
+/* Content */
+.mw-indicators {
+	float: right;
+	z-index: @z-index-indicators;
+}
+
+.mw-body-content {
+	position: relative;
+	z-index: @z-index-base;
+}
+
+/* Hide, but keep accessible for screen-readers */
+#mw-navigation h2 {
+	position: absolute;
+	top: -9999px;
+}
+
+/* Tabs */
+#mw-head {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 100%;
+}
+
+/* Navigation Containers */
+#left-navigation {
+	float: left;
+	margin-top: @height-header;
+	/* When right nav would overlap left nav, it's placed below it
+	(normal CSS floats behavior). This rule ensures that no empty space
+	is shown between them due to right nav's margin-top. Page layout
+	is still broken, but at least the nav overlaps only the page title
+	instead of half the content. */
+	margin-bottom: -@height-header;
+}
+
+#right-navigation {
+	float: right;
+	margin-top: @height-header;
+}
+
+#p-personal {
+	position: absolute;
+	top: @top-personal-tools;
+	right: 0.75em;
+	z-index: @z-index-personal;
+
+	ul {
+		// Keep from spilling out into the first column
+		// For completeness this should also include the width of the logo.
+		// As a result it is possible for the personal tools to overlap the logo.
+		padding-left: @width-grid-column-one;
+	}
+
+	li {
+		display: inline-block;
+	}
+}
+
+#mw-panel {
+	position: absolute;
+	// The sidebar is absolutely positioned inside the header which applies a top
+	// margin so we need to subtract this top margin in order to get the correct
+	// sidebar position.
+	top: @height-header - @margin-top-header;
+	left: 0;
+	width: @width-grid-column-one;
+	.box-sizing( border-box );
+	margin-top: @margin-top-sidebar;
+	padding-left: @padding-left-sidebar;
+	z-index: @z-index-sidebar;
+}
+
+.mw-footer {
+	margin-top: 0;
+}
diff --git a/resources/skins.vector.styles/layout.less b/resources/skins.vector.styles/layout.less
index 689ad2d74..a3f2e77d8 100644
--- a/resources/skins.vector.styles/layout.less
+++ b/resources/skins.vector.styles/layout.less
@@ -1,6 +1,5 @@
 // Layout rules divide the page into sections and how VectorComponents should be arranged in the skin.
 // The rules here should only define the layout, not color or typography.
-
 @import '../../variables.less';
 @import 'mediawiki.mixins.less';
 
@@ -22,152 +21,10 @@
 	2 * @padding-vertical-header;
 @width-grid-column-one: 11em;
 
-body {
-	// General background/foreground color definition as one exception to the rule.
-	background-color: @background-color-base;
-	color: @color-base;
-	// Vertical scrollbar always visible.
-	overflow-y: scroll;
-}
+// Default layout.
+@import 'layout-default.less';
 
-.mw-body,
-.parsoid-body {
-	direction: ltr;
-	padding: @padding-content;
-}
-
-.mw-body {
-	// Will be removed when we limit content width (T246420).
-	/* Border on top, left, and bottom side */
-	border: @border-width-base @border-style-base @border-color-content;
-	border-right-width: 0;
-	/* Merge the border with tabs' one (in their background image) */
-	margin-top: -@border-width-base;
-
-	.firstHeading {
-		/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
-		overflow: visible;
-	}
-}
-
-/* Space for header above content */
-.mw-header-placeholder {
-	// Reserve space for the absolute positioned header and tabs.
-	height: @height-header + @height-tabs;
-}
-
-/* Header layout */
-.mw-header {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	// A height is set to account for projects where no icon is set.
-	height: @height-logo-icon;
-	margin: @margin-top-header 0 @margin-bottom-header;
-	padding: @padding-vertical-header @padding-horizontal-header;
-	// Vertical centering of header elements (IE>=11), requires flex.
-	// Non-flex fallback for IE<=9: float rule on the child elements.
-	.flex-display();
-	// https://caniuse.com/#search=align-items
-	align-items: center;
-	z-index: @z-index-header;
-}
-
-/* Searchbox */
-#p-search {
-	float: left;
-	margin: 0.5em 0.5em 0 0.5em;
-	min-width: 5em;
-	// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
-	width: 13.2em;
-	// Support: Modern browsers, responsive width.
-	width: 20vw;
-	max-width: 20em;
-}
-
-/* Main column */
-.mw-body,
-#mw-data-after-content,
-#left-navigation,
-.mw-footer {
-	margin-left: @width-grid-column-one;
-}
-
-/* Content */
-.mw-indicators {
-	float: right;
-	z-index: @z-index-indicators;
-}
-
-.mw-body-content {
-	position: relative;
-	z-index: @z-index-base;
-}
-
-/* Hide, but keep accessible for screen-readers */
-#mw-navigation h2 {
-	position: absolute;
-	top: -9999px;
-}
-
-/* Tabs */
-#mw-head {
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 100%;
-}
-
-/* Navigation Containers */
-#left-navigation {
-	float: left;
-	margin-top: @height-header;
-	/* When right nav would overlap left nav, it's placed below it
-	(normal CSS floats behavior). This rule ensures that no empty space
-	is shown between them due to right nav's margin-top. Page layout
-	is still broken, but at least the nav overlaps only the page title
-	instead of half the content. */
-	margin-bottom: -@height-header;
-}
-
-#right-navigation {
-	float: right;
-	margin-top: @height-header;
-}
-
-#p-personal {
-	position: absolute;
-	top: @top-personal-tools;
-	right: 0.75em;
-	z-index: @z-index-personal;
-
-	ul {
-		// Keep from spilling out into the first column
-		// For completeness this should also include the width of the logo.
-		// As a result it is possible for the personal tools to overlap the logo.
-		padding-left: @width-grid-column-one;
-	}
-
-	li {
-		display: inline-block;
-	}
-}
-
-#mw-panel {
-	position: absolute;
-	// The sidebar is absolutely positioned inside the header which applies a top
-	// margin so we need to subtract this top margin in order to get the correct
-	// sidebar position.
-	top: @height-header - @margin-top-header;
-	left: 0;
-	width: @width-grid-column-one;
-	.box-sizing( border-box );
-	margin-top: @margin-top-sidebar;
-	padding-left: @padding-left-sidebar;
-	z-index: @z-index-sidebar;
-}
-
-.mw-footer {
-	margin-top: 0;
-}
+//
+// Feature flag modifications to layout (additive)
+//
+@import 'layout-max-width.less';
diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less
index 9f865dc15..2eec30322 100644
--- a/resources/skins.vector.styles/skin.less
+++ b/resources/skins.vector.styles/skin.less
@@ -6,7 +6,6 @@
 @media screen {
 	@import 'common/normalize.less';
 	@import 'layout.less';
-	@import 'layout-max-width.less';
 	@import 'common/typography.less';
 
 	// Components