diff --git a/src/components/cookie-banner/_cookie-banner.scss b/src/components/cookie-banner/_cookie-banner.scss index 6294b1b7f9..6eb9356c2f 100644 --- a/src/components/cookie-banner/_cookie-banner.scss +++ b/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) { diff --git a/src/globals/scss/_common.scss b/src/globals/scss/_common.scss index 3c2ea6e161..5cf183a311 100644 --- a/src/globals/scss/_common.scss +++ b/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"; diff --git a/src/globals/scss/objects/_content-wrapper.scss b/src/globals/scss/objects/_content-wrapper.scss deleted file mode 100644 index e0cb636482..0000000000 --- a/src/globals/scss/objects/_content-wrapper.scss +++ /dev/null @@ -1,20 +0,0 @@ -@include exports("content-wrapper") { - - // Example usage - - //
- // Breadcrumbs, Phase banners, Back links are placed in here. - - //
- // Wrapper for the main content of your page which applies padding to the top / bottom - //
- - //
- - .govuk-o-content { - padding: $govuk-spacing-scale-3 0; - @include mq($from: tablet) { - padding: $govuk-spacing-scale-6 0; - } - } -} diff --git a/src/globals/scss/objects/_grid.scss b/src/globals/scss/objects/_grid.scss index 3fd76f4f9d..9f08e31d44 100644 --- a/src/globals/scss/objects/_grid.scss +++ b/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); diff --git a/src/globals/scss/objects/_main-wrapper.scss b/src/globals/scss/objects/_main-wrapper.scss new file mode 100644 index 0000000000..81b11c5e58 --- /dev/null +++ b/src/globals/scss/objects/_main-wrapper.scss @@ -0,0 +1,22 @@ +// Example usage: +//
+// +//
+// +//
+//
+ +@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; + } +} diff --git a/src/globals/scss/objects/_site-width-container.scss b/src/globals/scss/objects/_site-width-container.scss deleted file mode 100644 index 67d77bef9f..0000000000 --- a/src/globals/scss/objects/_site-width-container.scss +++ /dev/null @@ -1,28 +0,0 @@ -// Widths -$govuk-site-width: 960px; - -@mixin govuk-site-width-container { - max-width: $govuk-site-width; - - @include ie-lte(8) { - width: $govuk-site-width; - } - - margin: 0 $govuk-gutter-half; - @include mq($from: tablet) { - margin: 0 $govuk-gutter; - } - - @include mq($and: "(min-width: #{($govuk-site-width + $govuk-gutter * 2)})") { - margin: 0 auto; - } -} - -@include exports("site-width-container") { - - .govuk-o-site-width-container, - .govuk-o-wrapper { - @include govuk-site-width-container; - } - -} diff --git a/src/globals/scss/objects/_width-container.scss b/src/globals/scss/objects/_width-container.scss new file mode 100644 index 0000000000..b3940a068a --- /dev/null +++ b/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; + } +} diff --git a/src/globals/scss/settings/_measurements.scss b/src/globals/scss/settings/_measurements.scss index 61808c83c9..6b7ad65ad2 100644 --- a/src/globals/scss/settings/_measurements.scss +++ b/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; diff --git a/src/views/component-list.njk b/src/views/component-list.njk index 7538ee0515..3a5e11463d 100644 --- a/src/views/component-list.njk +++ b/src/views/component-list.njk @@ -1,7 +1,7 @@ {% extends "layout-debug.njk" %} {% block content %} -
+

GOV.UK Frontend - Components

diff --git a/src/views/component.njk b/src/views/component.njk index 420e7e0f88..cab7a83269 100644 --- a/src/views/component.njk +++ b/src/views/component.njk @@ -19,133 +19,131 @@ }) }} {% endif %} -
- -

-{% block componentName %} -{{ componentName | replace("-", " ") | capitalize }} -{% endblock %} -

- -{% if isReadme %} -

Introduction

-{% endif %} -

-{% block componentDescription %} -{% endblock %} -

- -

Guidance

-

- More information about when to use {{ componentName }} can be found on GOV.UK Design System -

- - -{% if isReadme %} -

Quick start examples

-

{% block componentHtmlUsageWriteup %}{% endblock %}

-{% endif %} - -{% from "./macros/showDefaultAndVariants.njk" import showDefaultAndVariants %} -{% block defaultAndVariants %} -{{ showDefaultAndVariants(componentName, componentData) }} -{% endblock %} - -{% if isReadme %} -

Dependencies

- -

To consume the {{ componentName }} component you must be running npm version 5 or above.

- -

{% block componentDependencies %}{% endblock %}

- -

Installation

-
npm install --save @govuk-frontend/{{ componentName }}
- -

Requirements

-

Build tool configuration

-

When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp

-
-
-  .pipe(sass({
-      includePaths: 'node_modules/'
-  }))
-
-
- -

Static asset path configuration

-

To show the button image you need to configure your app to show these assets. Below is a sample configuration using Express js:

-
-
-app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons')))
-
-
-{% endif %} - -

Component arguments

-

If you are using Nunjucks,then macros take the following arguments

-
-{% from "table/macro.njk" import govukTable %} -{% block componentArguments %} -{% endblock %} -
- -{% if isReadme %} -

Setting up Nunjucks views and paths

-

Below is an example setup using express configure views:

-
-
-nunjucks.configure('node_modules/@govuk-frontend`, {
-  autoescape: true,
-  cache: false,
-  express: app
-})
-
-
- -

Getting updates

- -

To check whether you have the latest version of the button run:

- -
npm outdated @govuk-frontend/{{ componentName }}
- -

To update the latest version run:

- -
npm update @govuk-frontend/{{ componentName }}
- -

Contribution

-

- Guidelines can be found at on our Github repository. -

- -

Acknowledgements/credits

-{% from "list/macro.njk" import govukList %} - -{{ govukList( - classes='', - [ - { - text: 'GDS developers' - }, - { - text: 'Jani Kraner' - }, - { - text: 'Gemma Leigh' - } - ] -) }} - -

License

-

MIT

-{% endif %} - -{% if not isReadme %} -

Installation and setup

-

- - View the {{ componentName }} README on GitHub - -

+
+

+ {% block componentName %} + {{ componentName | replace("-", " ") | capitalize }} + {% endblock %} +

+ + {% if isReadme %} +

Introduction

+ {% endif %} +

+ {% block componentDescription %} + {% endblock %} +

+ +

Guidance

+

+ More information about when to use {{ componentName }} can be found on GOV.UK Design System +

+ + {% if isReadme %} +

Quick start examples

+

{% block componentHtmlUsageWriteup %}{% endblock %}

+ {% endif %} + + {% from "./macros/showDefaultAndVariants.njk" import showDefaultAndVariants %} + {% block defaultAndVariants %} + {{ showDefaultAndVariants(componentName, componentData) }} + {% endblock %} + + {% if isReadme %} +

Dependencies

+ +

To consume the {{ componentName }} component you must be running npm version 5 or above.

+ +

{% block componentDependencies %}{% endblock %}

+ +

Installation

+ 
npm install --save @govuk-frontend/{{ componentName }}
+ +

Requirements

+

Build tool configuration

+

When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp

+ 
+  
+    .pipe(sass({
+        includePaths: 'node_modules/'
+    }))
+  
+
+ +

Static asset path configuration

+

To show the button image you need to configure your app to show these assets. Below is a sample configuration using Express js:

+ 
+  
+  app.use('/public', express.static(path.join(__dirname, '/node_modules/@govuk-frontend/icons')))
+  
+
+ {% endif %} + +

Component arguments

+

If you are using Nunjucks,then macros take the following arguments

+
+ {% from "table/macro.njk" import govukTable %} + {% block componentArguments %} + {% endblock %} +
+ + {% if isReadme %} +

Setting up Nunjucks views and paths

+

Below is an example setup using express configure views:

+ 
+  
+  nunjucks.configure('node_modules/@govuk-frontend`, {
+    autoescape: true,
+    cache: false,
+    express: app
+  })
+  
+
+ +

Getting updates

+ +

To check whether you have the latest version of the button run:

+ + 
npm outdated @govuk-frontend/{{ componentName }}
+ +

To update the latest version run:

+ + 
npm update @govuk-frontend/{{ componentName }}
+ +

Contribution

+

+ Guidelines can be found at on our Github repository. +

+ +

Acknowledgements/credits

+ {% from "list/macro.njk" import govukList %} + + {{ govukList( + classes='', + [ + { + text: 'GDS developers' + }, + { + text: 'Jani Kraner' + }, + { + text: 'Gemma Leigh' + } + ] + ) }} + +

License

+

MIT

+ {% endif %} + + {% if not isReadme %} +

Installation and setup

+

+ + View the {{ componentName }} README on GitHub + +

diff --git a/src/views/example-list.njk b/src/views/example-list.njk index ddc2b5664d..14bce475e6 100644 --- a/src/views/example-list.njk +++ b/src/views/example-list.njk @@ -1,7 +1,7 @@ {% extends "layout-debug.njk" %} {% block content %} -
+

GOV.UK Frontend - Examples

diff --git a/src/views/examples/grid/index.njk b/src/views/examples/grid/index.njk index b95a72ec64..ced798f594 100644 --- a/src/views/examples/grid/index.njk +++ b/src/views/examples/grid/index.njk @@ -2,7 +2,7 @@ {% block content %} -
+

Example: Grid layout

diff --git a/src/views/layout.njk b/src/views/layout.njk index 9623aa7af9..7cae66eace 100644 --- a/src/views/layout.njk +++ b/src/views/layout.njk @@ -15,7 +15,7 @@ {% endif %} -
+
{% block content %} {% endblock %}