Merge pull request #1371 from alphagov/css-only-before-content

Simplify main wrapper spacing logic
alphagov · May 29, 2019 · b5f5bba · b5f5bba
2 parents cbd3e87 + c40f863
commit b5f5bba
Show file tree

Hide file tree

Showing 17 changed files with 21 additions and 34 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -253,6 +253,15 @@
 
   ([PR #1367](https://github.com/alphagov/govuk-frontend/pull/1367))
 
+- Simplify `.govuk-main-wrapper` logic to avoid the need for large modifier in most cases.
+
+  By using :first-child we can avoid the need for a modifier class, which is often missed.
+
+  We are also deprecating mixins for main wrapper.
+  We're not sure these are useful, so these will be removed in a future release, if you are using this please let us know: https://github.com/alphagov/govuk-frontend/issues/1379
+
+  ([PR #1371](https://github.com/alphagov/govuk-frontend/pull/1371))
+
 - Pull Request Title goes here
 
   Description goes here (optional)

diff --git a/app/views/full-page-examples/confirm-delete/index.njk b/app/views/full-page-examples/confirm-delete/index.njk
@@ -6,7 +6,6 @@
 {% set homepage_url = "/" %}
 {% set pageTitle = "Are you sure you want to delete Josh Lyman’s account?" %}
 {% block page_title %}GOV.UK - {{ pageTitle }}{% endblock %}
-{% set mainClasses = "govuk-main-wrapper--l" %}
 
 {% block content %}
   <div class="govuk-grid-row">

diff --git a/app/views/full-page-examples/feedback/confirm.njk b/app/views/full-page-examples/feedback/confirm.njk
@@ -5,8 +5,6 @@
 {% set pageTitle = "Thank you for your feedback" %}
 {% block pageTitle %}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block header %}
   {% include "../../partials/banner.njk" %}
   {{ govukHeader({
@@ -22,4 +20,4 @@
       }) }}
     </div>
   </div>
-{% endblock %}
+{% endblock %}
diff --git a/app/views/full-page-examples/feedback/index.njk b/app/views/full-page-examples/feedback/index.njk
@@ -31,8 +31,6 @@ notes: Based on https://www.signin.service.gov.uk/feedback
 {% set pageTitle = "Send your feedback to GOV.UK Verify" %}
 {% block pageTitle %}{{ "Error: " if errors }}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block header %}
   {% include "../../partials/banner.njk" %}
   {{ govukHeader({

diff --git a/app/views/full-page-examples/have-you-changed-your-name/confirm.njk b/app/views/full-page-examples/have-you-changed-your-name/confirm.njk
@@ -5,8 +5,6 @@
 {% set pageTitle = "Thank you for confirming if you have changed your name" %}
 {% block pageTitle %}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">

diff --git a/app/views/full-page-examples/how-do-you-want-to-sign-in/confirm.njk b/app/views/full-page-examples/how-do-you-want-to-sign-in/confirm.njk
@@ -5,8 +5,6 @@
 {% set pageTitle = "Thank you for selecting your identity provider" %}
 {% block pageTitle %}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">

diff --git a/app/views/full-page-examples/passport-details/confirm.njk b/app/views/full-page-examples/passport-details/confirm.njk
@@ -5,8 +5,6 @@
 {% set pageTitle = "Passport details submitted" %}
 {% block pageTitle %}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -15,4 +13,4 @@
       }) }}
     </div>
   </div>
-{% endblock %}
+{% endblock %}
diff --git a/app/views/full-page-examples/passport-details/index.njk b/app/views/full-page-examples/passport-details/index.njk
@@ -22,8 +22,6 @@ scenario: >-
 {% set pageTitle = "Passport details" %}
 {% block pageTitle %}{{ "Error: " if errors }}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block beforeContent %}
   {{ govukBackLink({
     text: "Back"

diff --git a/app/views/full-page-examples/update-your-account-details/confirm.njk b/app/views/full-page-examples/update-your-account-details/confirm.njk
@@ -5,8 +5,6 @@
 {% set pageTitle = "Account details updated" %}
 {% block pageTitle %}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -15,4 +13,4 @@
       }) }}
     </div>
   </div>
-{% endblock %}
+{% endblock %}
diff --git a/app/views/full-page-examples/update-your-account-details/index.njk b/app/views/full-page-examples/update-your-account-details/index.njk
@@ -18,8 +18,6 @@ scenario: >-
 {% set pageTitle = "Update your account details" %}
 {% block pageTitle %}{{ "Error: " if errors }}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block beforeContent %}
   {{ govukBackLink({
     text: "Back"

diff --git a/app/views/full-page-examples/upload-your-photo/confirm.njk b/app/views/full-page-examples/upload-your-photo/confirm.njk
@@ -5,8 +5,6 @@
 {% set pageTitle = "Photo submitted" %}
 {% block pageTitle %}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block header %}
   {% include "../../partials/banner.njk" %}
   {{ govukHeader({
@@ -33,4 +31,4 @@
       }) }}
     </div>
   </div>
-{% endblock %}
+{% endblock %}
diff --git a/app/views/full-page-examples/upload-your-photo/index.njk b/app/views/full-page-examples/upload-your-photo/index.njk
@@ -22,8 +22,6 @@ scenario: >-
 {% set pageTitle = "Upload your photo" %}
 {% block pageTitle %}{{ "Error: " if errors }}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block header %}
   {% include "../../partials/banner.njk" %}
   {{ govukHeader({

diff --git a/app/views/full-page-examples/what-is-your-address/confirm.njk b/app/views/full-page-examples/what-is-your-address/confirm.njk
@@ -5,8 +5,6 @@
 {% set pageTitle = "Thank you for confirming your address" %}
 {% block pageTitle %}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">

diff --git a/app/views/full-page-examples/what-is-your-nationality/confirm.njk b/app/views/full-page-examples/what-is-your-nationality/confirm.njk
@@ -5,8 +5,6 @@
 {% set pageTitle = "Thank you for confirming your nationality" %}
 {% block pageTitle %}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">

diff --git a/app/views/full-page-examples/what-is-your-postcode/confirm.njk b/app/views/full-page-examples/what-is-your-postcode/confirm.njk
@@ -5,8 +5,6 @@
 {% set pageTitle = "Thank you for confirming your postcode" %}
 {% block pageTitle %}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">

diff --git a/app/views/full-page-examples/what-was-the-last-country-you-visited/confirm.njk b/app/views/full-page-examples/what-was-the-last-country-you-visited/confirm.njk
@@ -6,8 +6,6 @@
 {% set pageTitle = "Thank you for confirming the last country you visited" %}
 {% block pageTitle %}GOV.UK - {{ pageTitle }}{% endblock %}
 
-{% set mainClasses = "govuk-main-wrapper--l" %}
-
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">

diff --git a/src/objects/_main-wrapper.scss b/src/objects/_main-wrapper.scss
@@ -20,6 +20,7 @@
 // </div>
 
 
+/// @deprecated Replace this mixin with more direct references to the [spacing mixins](https://design-system.service.gov.uk/styles/spacing/#spacing-on-custom-components).
 @mixin govuk-main-wrapper {
   // In IE11 the `main` element can be used, but is not recognized  –
   // meaning it's not defined in IE's default style sheet,
@@ -37,7 +38,9 @@
   }
 }
 
-// Use govuk-main-wrapper--l when you page does not have Breadcrumbs, phase banners or back links
+/// Use govuk-main-wrapper--l when you page does not have Breadcrumbs, phase banners or back links.
+///
+/// @deprecated Replace this mixin with more direct references to the [spacing mixins](https://design-system.service.gov.uk/styles/spacing/#spacing-on-custom-components).
 @mixin govuk-main-wrapper--l {
   @include govuk-responsive-padding(8, "top");
 }
@@ -47,6 +50,10 @@
     @include govuk-main-wrapper;
   }
 
+  // For most instances of main wrapper, :first-child will give the correct spacing without
+  // the need for the `l` modifier, but it is available in instances where there may be
+  // empty elements that would be difficult to remove.
+  .govuk-main-wrapper:first-child,
   .govuk-main-wrapper--l {
     @include govuk-main-wrapper--l;
   }