Use consistent naming for container and wrapper

- Rename `side-width-container` to `width-container`, `content` to `main-wrapper`
- Move gutter and site width definitions to settings
- Update app to use new class names

src/components/cookie-banner/_cookie-banner.scss

@@ -18,7 +18,7 @@
   }
 
   .govuk-c-cookie-banner__message {
-    @include govuk-site-width-container;
+    @include govuk-width-container;
   }
 
   @include mq($media-type: print) {

src/globals/scss/_common.scss

@@ -37,9 +37,9 @@
 
 // Objects
 @import "objects/grid";
-@import "objects/site-width-container";
+@import "objects/main-wrapper";
 @import "objects/shapes";
-@import "objects/content-wrapper";
+@import "objects/width-container";
 
 // Overrides
 @import "overrides/spacing";

src/globals/scss/objects/_grid.scss

@@ -1,7 +1,3 @@
-// Gutters
-$govuk-gutter: $govuk-spacing-scale-6;
-$govuk-gutter-half: $govuk-gutter / 2;
-
 @mixin govuk-grid {
   @include govuk-h-clearfix;
   margin-right: - ($govuk-gutter-half);

src/globals/scss/objects/_main-wrapper.scss

@@ -0,0 +1,22 @@
+// Example usage:
+// <div class="govuk-o-width-container">
+//   <!-- Breadcrumbs, phase banners, back links are placed in here. -->
+//   <div class="govuk-o-main-wrapper">
+//       <!-- Wrapper for the main content of your page which applies padding
+//            to the top / bottom -->
+//   </div>
+// </div>
+
+@mixin govuk-main-wrapper {
+  padding: $govuk-spacing-scale-3 0;
+
+  @include mq($from: tablet) {
+    padding: $govuk-spacing-scale-6 0;
+  }
+}
+
+@include exports("main-wrapper") {
+  .govuk-o-main-wrapper {
+    @include govuk-main-wrapper;
+  }
+}

src/globals/scss/objects/_width-container.scss

@@ -0,0 +1,28 @@
+@mixin govuk-width-container {
+  // Limit the width of the container to the page width
+  max-width: $govuk-page-width;
+
+  @include ie-lte(8) {
+    width: $govuk-page-width;
+  }
+
+  // On mobile, add half width gutters
+  margin: 0 $govuk-gutter-half;
+
+  // On tablet, add full width gutters
+  @include mq($from: tablet) {
+    margin: 0 $govuk-gutter;
+  }
+
+  // As soon as the viewport is greater than the width of the page plus the
+  // gutters, just centre the content instead of adding gutters.
+  @include mq($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})") {
+    margin: 0 auto;
+  }
+}
+
+@include exports("width-container") {
+  .govuk-o-width-container {
+    @include govuk-width-container;
+  }
+}

src/globals/scss/settings/_measurements.scss

@@ -1,3 +1,9 @@
+// Site width and grid gutters
+$govuk-page-width: 960px;
+
+$govuk-gutter: $govuk-spacing-scale-6;
+$govuk-gutter-half: $govuk-gutter / 2;
+
 // Border widths
 $govuk-border-width-mobile: 4px;
 $govuk-border-width-tablet: 5px;

src/views/component-list.njk

@@ -1,7 +1,7 @@
 {% extends "layout-debug.njk" %}
 
 {% block content %}
-<div class="govuk-o-content">
+<div class="govuk-o-main-wrapper">
   <h1 class="govuk-heading-l">
     GOV.UK Frontend - Components
   </h1>