From 43b173544f27f3f3e31c7d40d1c4afef01912fd6 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 19 Jun 2018 17:42:26 +0100 Subject: [PATCH 01/41] Remove dependencies on GOV.UK Elements, Template, Toolkit --- package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/package.json b/package.json index afb105ca4b..8f5e18accb 100644 --- a/package.json +++ b/package.json @@ -21,9 +21,6 @@ "express": "4.15.2", "express-session": "^1.13.0", "express-writer": "0.0.4", - "govuk-elements-sass": "3.1.1", - "govuk_frontend_toolkit": "7.1.0", - "govuk_template_jinja": "0.22.3", "gulp": "^3.9.1", "gulp-clean": "^0.3.2", "gulp-mocha": "^4.3.1", From 1d8578ccdd979f8bc371978fcce176c9f68fec1d Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 19 Jun 2018 17:44:12 +0100 Subject: [PATCH 02/41] Update Nunjucks dependency GOV.UK Frontend requires 3 and above --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8f5e18accb..dd8f235479 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "marked": "^0.3.6", "minimist": "1.2.0", "notifications-node-client": "^3.0.0", - "nunjucks": "^2.5.2", + "nunjucks": "^3.1.3", "portscanner": "^2.1.1", "prompt": "^1.0.0", "readdir": "0.0.13", From 57b5e72ed50eab3492fbc1efd1deb56de5b7fda1 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 19 Jun 2018 17:44:50 +0100 Subject: [PATCH 03/41] Add GOV.UK Frontend as a dependency --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index dd8f235479..f16684f31b 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "express": "4.15.2", "express-session": "^1.13.0", "express-writer": "0.0.4", + "govuk-frontend": "^1.0.0", "gulp": "^3.9.1", "gulp-clean": "^0.3.2", "gulp-mocha": "^4.3.1", From 5cf186d81d6aa8569b15d04799f46317d3ba41ee Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 19 Jun 2018 17:48:24 +0100 Subject: [PATCH 04/41] Remove copy-govuk-modules tasks Since we require directly from 'node_modules' we don't need to copy to a 'govuk_module' folder. --- .gitignore | 1 - gulp/clean.js | 2 -- gulp/config.json | 1 - gulp/copy-modules.js | 29 ----------------------------- gulp/sass.js | 12 +++--------- gulp/tasks.js | 8 -------- package.json | 1 - server.js | 8 +------- 8 files changed, 4 insertions(+), 58 deletions(-) delete mode 100644 gulp/copy-modules.js diff --git a/.gitignore b/.gitignore index c2c675cbd6..41a4b39908 100644 --- a/.gitignore +++ b/.gitignore @@ -5,7 +5,6 @@ .port.tmp public lib/govuk_template.html -govuk_modules node_modules/* .tmuxp.* package-lock.json diff --git a/gulp/clean.js b/gulp/clean.js index d017526905..7d5cf1d983 100644 --- a/gulp/clean.js +++ b/gulp/clean.js @@ -3,7 +3,6 @@ =========== removes folders: - public - - govuk_modules */ const gulp = require('gulp') @@ -13,7 +12,6 @@ const config = require('./config.json') gulp.task('clean', function () { return gulp.src([config.paths.public + '/*', - config.paths.govukModules + '/*', '.port.tmp'], {read: false}) .pipe(clean()) }) diff --git a/gulp/config.json b/gulp/config.json index b78d742535..6dcfe82b98 100644 --- a/gulp/config.json +++ b/gulp/config.json @@ -3,7 +3,6 @@ "public": "public/", "assets" : "app/assets/", "docsAssets" : "docs/assets/", - "govukModules": "govuk_modules/", "nodeModules": "node_modules/", "lib": "lib/" } diff --git a/gulp/copy-modules.js b/gulp/copy-modules.js deleted file mode 100644 index 20f6fcf17c..0000000000 --- a/gulp/copy-modules.js +++ /dev/null @@ -1,29 +0,0 @@ -/* - copy-gov-modules.js - =========== - copies files for node_modules into govuk_modules -*/ - -const gulp = require('gulp') -const config = require('./config.json') - -gulp.task('copy-toolkit', function () { - return gulp.src(['node_modules/govuk_frontend_toolkit/**']) - .pipe(gulp.dest(config.paths.govukModules + '/govuk_frontend_toolkit/')) -}) - -gulp.task('copy-template', function () { - return gulp.src(['node_modules/govuk_template_jinja/views/layouts/**']) - .pipe(gulp.dest(config.paths.govukModules + '/govuk_template/layouts/')) - .pipe(gulp.dest(config.paths.lib)) -}) - -gulp.task('copy-template-assets', function () { - return gulp.src(['node_modules/govuk_template_jinja/assets/**']) - .pipe(gulp.dest(config.paths.govukModules + '/govuk_template/assets/')) -}) - -gulp.task('copy-elements-sass', function () { - return gulp.src(['node_modules/govuk-elements-sass/public/sass/**']) - .pipe(gulp.dest(config.paths.govukModules + '/govuk-elements-sass/')) -}) diff --git a/gulp/sass.js b/gulp/sass.js index 39be1f2f4b..33c2972e7e 100644 --- a/gulp/sass.js +++ b/gulp/sass.js @@ -1,7 +1,7 @@ /* sass.js =========== - compiles sass from assets folder with the govuk_modules + compiles sass from assets folder also includes sourcemaps */ @@ -14,10 +14,7 @@ const config = require('./config.json') gulp.task('sass', function () { return gulp.src(config.paths.assets + '/sass/*.scss') .pipe(sourcemaps.init()) - .pipe(sass({outputStyle: 'expanded', - includePaths: ['govuk_modules/govuk_frontend_toolkit/stylesheets', - 'govuk_modules/govuk_template/assets/stylesheets', - 'govuk_modules/govuk-elements-sass/']}).on('error', sass.logError)) + .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) .pipe(sourcemaps.write()) .pipe(gulp.dest(config.paths.public + '/stylesheets/')) }) @@ -25,10 +22,7 @@ gulp.task('sass', function () { gulp.task('sass-documentation', function () { return gulp.src(config.paths.docsAssets + '/sass/*.scss') .pipe(sourcemaps.init()) - .pipe(sass({outputStyle: 'expanded', - includePaths: ['govuk_modules/govuk_frontend_toolkit/stylesheets', - 'govuk_modules/govuk_template/assets/stylesheets', - 'govuk_modules/govuk-elements-sass/']}).on('error', sass.logError)) + .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) .pipe(sourcemaps.write()) .pipe(gulp.dest(config.paths.public + '/stylesheets/')) }) diff --git a/gulp/tasks.js b/gulp/tasks.js index 00b9491ab3..49905cde6e 100644 --- a/gulp/tasks.js +++ b/gulp/tasks.js @@ -16,20 +16,12 @@ gulp.task('default', function (done) { gulp.task('generate-assets', function (done) { runSequence('clean', - 'copy-govuk-modules', 'sass', 'sass-documentation', 'copy-assets', 'copy-documentation-assets', done) }) -gulp.task('copy-govuk-modules', [ - 'copy-toolkit', - 'copy-template-assets', - 'copy-elements-sass', - 'copy-template' -]) - gulp.task('watch', function (done) { runSequence('watch-sass', 'watch-assets', done) diff --git a/package.json b/package.json index f16684f31b..5151d29f04 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ "readdir": "0.0.13", "require-dir": "^0.3.0", "run-sequence": "^1.2.2", - "serve-favicon": "2.4.2", "standard": "^10.0.2", "supertest": "^3.0.0", "sync-request": "^4.0.3" diff --git a/server.js b/server.js index e057a3ce1d..34c20578c5 100644 --- a/server.js +++ b/server.js @@ -7,7 +7,6 @@ const bodyParser = require('body-parser') const browserSync = require('browser-sync') const dotenv = require('dotenv') const express = require('express') -const favicon = require('serve-favicon') const nunjucks = require('nunjucks') const session = require('express-session') @@ -78,12 +77,7 @@ app.set('view engine', 'html') // Middleware to serve static assets app.use('/public', express.static(path.join(__dirname, '/public'))) -app.use('/public', express.static(path.join(__dirname, '/govuk_modules/govuk_template/assets'))) -app.use('/public', express.static(path.join(__dirname, '/govuk_modules/govuk_frontend_toolkit'))) -app.use('/public/images/icons', express.static(path.join(__dirname, '/govuk_modules/govuk_frontend_toolkit/images'))) - -// Elements refers to icon folder instead of images folder -app.use(favicon(path.join(__dirname, 'govuk_modules', 'govuk_template', 'assets', 'images', 'favicon.ico'))) +app.use('/assets', express.static(path.join(__dirname, 'node_modules', 'govuk-frontend', 'assets'))) // Set up documentation app if (useDocumentation) { From dc874bdbc8a5996681b1cb8f63f47350190cabae Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 19 Jun 2018 17:49:57 +0100 Subject: [PATCH 05/41] Import GOV.UK Frontend instead of GOV.UK Elements --- app/assets/sass/application.scss | 4 +--- app/assets/sass/unbranded.scss | 4 +--- docs/assets/sass/docs.scss | 2 +- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss index 30e024e79e..ad8baed2f7 100644 --- a/app/assets/sass/application.scss +++ b/app/assets/sass/application.scss @@ -2,9 +2,7 @@ // in the govuk frontend toolkit's url-helpers partial $path: "/public/images/"; -// Import GOV.UK elements from /govuk-modules/, this will import the frontend toolkit and some base styles. -// Take a look in /govuk-modules/_govuk-elements.scss to see which files are imported. -@import 'govuk-elements'; +@import 'node_modules/govuk-frontend/all'; // Take a look at in app/assets/sass/patterns/ to see which files are imported. @import 'patterns/check-your-answers'; diff --git a/app/assets/sass/unbranded.scss b/app/assets/sass/unbranded.scss index 0205d48624..8f5be8ac4c 100644 --- a/app/assets/sass/unbranded.scss +++ b/app/assets/sass/unbranded.scss @@ -2,9 +2,7 @@ // in the govuk frontend toolkit's url-helpers partial $path: "/public/images/"; -// Import GOV.UK elements from /govuk-modules/, this will import the frontend toolkit and some base styles. -// Take a look in /govuk-modules/_govuk-elements.scss to see which files are imported. -@import 'govuk-elements'; +@import 'node_modules/govuk-frontend/all'; // If you need to create a page as part of your journey, but without GOV.UK branding // See localhost:3000/examples/unbranded/ diff --git a/docs/assets/sass/docs.scss b/docs/assets/sass/docs.scss index 1c65d4c670..86f448f522 100644 --- a/docs/assets/sass/docs.scss +++ b/docs/assets/sass/docs.scss @@ -1,4 +1,4 @@ -@import "govuk-elements"; +@import "node_modules/govuk-frontend/all"; .markdown { h1 { From 8ecc90e8e8cb47a68f5cb816c6b38486abf5f5be Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 19 Jun 2018 18:46:10 +0100 Subject: [PATCH 06/41] Update SCSS to use GOV.UK Frontend --- app/assets/sass/application-ie8.scss | 3 +- app/assets/sass/application.scss | 33 ++----- app/assets/sass/unbranded.scss | 32 ++----- docs/assets/sass/docs-ie8.scss | 3 +- docs/assets/sass/docs.scss | 134 +++++++++++++++++---------- 5 files changed, 104 insertions(+), 101 deletions(-) diff --git a/app/assets/sass/application-ie8.scss b/app/assets/sass/application-ie8.scss index ce895a2855..09a29d14ac 100644 --- a/app/assets/sass/application-ie8.scss +++ b/app/assets/sass/application-ie8.scss @@ -1,4 +1,3 @@ -$is-ie: true; -$ie-version: 8; +$govuk-is-ie8: true; @import "application"; diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss index ad8baed2f7..676d711343 100644 --- a/app/assets/sass/application.scss +++ b/app/assets/sass/application.scss @@ -1,29 +1,12 @@ -// Path to assets for use with the file-url function -// in the govuk frontend toolkit's url-helpers partial -$path: "/public/images/"; +// global styles for and

tags +$govuk-global-styles: true; -@import 'node_modules/govuk-frontend/all'; +// Import GOV.UK Frontend +@import "node_modules/govuk-frontend/all"; -// Take a look at in app/assets/sass/patterns/ to see which files are imported. -@import 'patterns/check-your-answers'; -@import 'patterns/task-list'; - -// Related items -// (These styles will be moved to GOV.UK elements, duplicating here for now.) -.govuk-related-items { - margin-top: $gutter; - border-top: 10px solid $govuk-blue; - padding-top: 5px; - - .heading-medium { - margin-top: 0.3em; - margin-bottom: 0.5em; - } - - li { - margin-bottom: 10px; - list-style-type: none; - } -} +// Patterns that aren't in Frontend +// @import "patterns/check-your-answers"; +// @import "patterns/task-list"; +// @import "patterns/related-items"; // Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you diff --git a/app/assets/sass/unbranded.scss b/app/assets/sass/unbranded.scss index 8f5be8ac4c..2f46b65d9f 100644 --- a/app/assets/sass/unbranded.scss +++ b/app/assets/sass/unbranded.scss @@ -1,28 +1,12 @@ -// Path to assets for use with the file-url function -// in the govuk frontend toolkit's url-helpers partial -$path: "/public/images/"; +@import "node_modules/govuk-frontend/settings/all"; -@import 'node_modules/govuk-frontend/all'; +// Override the govuk-frontend font stack +$govuk-font-family: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif; -// If you need to create a page as part of your journey, but without GOV.UK branding -// See localhost:3000/examples/unbranded/ - -// Override the govuk_frontend_toolkit's font stack -// https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_font_stack.scss#L13 -$toolkit-font-stack: $helvetica-regular; - -.unbranded { - background: $white; +// Remove canvas background colour, as is used with the GOV.UK Footer. +$govuk-canvas-background-colour: $govuk-body-background-colour; - // Use the universal selector and !important to *ALWAYS OVERRIDE* GDS Transport - * { +@import "node_modules/govuk-frontend/all"; - font-family: $toolkit-font-stack !important; - } - - // Remove GOV.UK footer styles - #footer { - border: 0; - background: $white; - } -} +// If you need to create a page as part of your journey, but without GOV.UK branding +// See localhost:3000/docs/examples/blank-unbranded diff --git a/docs/assets/sass/docs-ie8.scss b/docs/assets/sass/docs-ie8.scss index 9f717b8856..13e80cc9e1 100644 --- a/docs/assets/sass/docs-ie8.scss +++ b/docs/assets/sass/docs-ie8.scss @@ -1,4 +1,3 @@ -$is-ie: true; -$ie-version: 8; +$govuk-is-ie8: true; @import "docs"; diff --git a/docs/assets/sass/docs.scss b/docs/assets/sass/docs.scss index 86f448f522..5e9f571634 100644 --- a/docs/assets/sass/docs.scss +++ b/docs/assets/sass/docs.scss @@ -1,53 +1,11 @@ @import "node_modules/govuk-frontend/all"; -.markdown { - h1 { - @extend .heading-xlarge; - } - - h2 { - @extend .heading-large; - } - - h3 { - @extend .heading-medium; - } - - h4 { - @extend .heading-small; - } - - code { - background: $grey-4; - padding: 3px; - font-size: 1em; - } - - pre > code { - @extend .code; - display: block; - @extend .panel; - @extend .panel-border-wide; - margin-bottom: 15px; - } - - img { - max-width: 100%; - } - - ul { - @extend .list; - @extend .list-bullet; - } - - blockquote { - @extend .panel; - @extend .panel-border-wide; - } - - strong { - font-weight: 700; - } +// Add Sass specific to /docs here + +// adjust code block font-size to 19px +.hljs { + font-size: 19px; + line-height: 25px; } .app-table--fixed { @@ -57,3 +15,83 @@ .app-\!-db { display: block !important; } + +.app-table--fixed { + table-layout: fixed; +} + +.app-\!-db { + display: block !important; +} + +.app-prose-scope { + + h1 { + @extend %govuk-heading-xl; + } + + h2 { + @extend %govuk-heading-l; + } + + h3 { + @extend %govuk-heading-m; + } + + h4 { + @extend %govuk-heading-s; + } + + p { + @extend %govuk-body-m; + } + + strong, + b { + @include govuk-typography-weight-bold; + } + + ul, + ol { + @extend %govuk-list; + } + + ol { + @extend %govuk-list--number; + } + + ul { + @extend %govuk-list--bullet; + } + + a { + @extend %govuk-link; + } + + hr { + @extend %govuk-section-break; + @extend %govuk-section-break--visible; + @extend %govuk-section-break--xl; + } + + pre { + font-size: 16px; + position: relative; + margin: 0; + padding: govuk-spacing(3); + overflow: auto; + border: 1px solid $govuk-border-colour; + background-color: govuk-colour("grey-4"); + max-width: 38em; + @include govuk-responsive-margin(5, "bottom"); + } +} + +.app-prose-scope ul + h2, +.app-prose-scope ul + h3, +.app-prose-scope ul + h4, +.app-prose-scope pre + h2, +.app-prose-scope pre + h3, +.app-prose-scope pre + h4 { + @include govuk-responsive-margin(4, "top"); +} From 8b40dfaeb9649bd6331a9efa3d6f3cbf4ea21f0c Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 19 Jun 2018 18:46:49 +0100 Subject: [PATCH 07/41] Import new template from GOV.UK Frontend --- app/views/layout.html | 65 +++++++---------- .../examples/template-partial-areas.html | 2 +- docs/views/layout.html | 73 ++++++------------- docs/views/layout_unbranded.html | 5 +- server.js | 12 ++- 5 files changed, 63 insertions(+), 94 deletions(-) diff --git a/app/views/layout.html b/app/views/layout.html index e7f332ba54..37d998ff6a 100644 --- a/app/views/layout.html +++ b/app/views/layout.html @@ -1,52 +1,39 @@ -{% extends "govuk_template.html" %} +{% extends "template.njk" %} {% block head %} {% include "includes/head.html" %} {% endblock %} -{% block cookie_message %} -

{{cookieText | safe }}

+{% block pageTitle %} + GOV.UK prototype kit {% endblock %} -{% block proposition_header %} - -
-
- Menu - -
-
- -{% endblock %} - -{% block header_class %} - with-proposition +{% block header %} + {# Set serviceName in config.js. #} + {{ govukHeader({ + homepageUrl: "/", + serviceName: serviceName, + serviceUrl: "/", + containerClasses: "govuk-width-container" + }) }} {% endblock %} -{% block footer_support_links %} - {% if useAutoStoreData %} - - {% endif %} -{% endblock %} +{% if useAutoStoreData %} + {% block footer %} + {{ govukFooter({ + meta: { + items: [ + { + href: "/prototype-admin/clear-data", + text: "Clear data" + } + ] + } + }) }} + {% endblock %} +{% endif %} -{% block body_end %} +{% block bodyEnd %} {% block scripts %} {% include "includes/scripts.html" %} {% block page_scripts %}{% endblock %} diff --git a/docs/views/examples/template-partial-areas.html b/docs/views/examples/template-partial-areas.html index d831b82d4f..86ee9d3156 100644 --- a/docs/views/examples/template-partial-areas.html +++ b/docs/views/examples/template-partial-areas.html @@ -1,4 +1,4 @@ -{% extends "govuk_template.html" %} +{% extends "template.njk" %} {% block head %} {% include "includes/examples_head.html" %} diff --git a/docs/views/layout.html b/docs/views/layout.html index 00397cdacf..3b2570f817 100644 --- a/docs/views/layout.html +++ b/docs/views/layout.html @@ -1,4 +1,4 @@ -{% extends "govuk_template.html" %} +{% extends "template.njk" %} {% block head %} {% include "includes/head.html" %} @@ -8,63 +8,34 @@ {% endblock %} -{% block body_start %} +{% block bodyStart %} {% if promoMode == 'true' and gtmId %} {% include "includes/tracking_body.html" %} {% endif %} {% endblock %} - -{% block cookie_message %} -

{{cookieText | safe }}

-{% endblock %} - -{% block proposition_header %} - -
-
- Menu - -
-
- -{% endblock %} - -{% block header_class %} - with-proposition -{% endblock %} - -{% block footer_support_links %} - - +{% block footer %} + {{ govukFooter({ + meta: { + items: [ + { + href: "/prototype-admin/clear-data", + text: "Clear data" + }, + { + href: "/docs/cookies", + text: "Cookies" + }, + { + href: "/docs/privacy-policy", + text: "Privacy policy" + } + ] + } + }) }} {% endblock %} -{% block body_end %} +{% block bodyEnd %} {% include "includes/scripts.html" %} {% endblock %} diff --git a/docs/views/layout_unbranded.html b/docs/views/layout_unbranded.html index b3286f2b88..e05f89d9b9 100644 --- a/docs/views/layout_unbranded.html +++ b/docs/views/layout_unbranded.html @@ -1,9 +1,12 @@ -{% extends "govuk_template_unbranded.html" %} +{% extends "template.njk" %} {% block head %} {% endblock %} +{% block header %}{% endblock %} +{% block footer %}{% endblock %} + {% block body_end %} {% include "includes/scripts.html" %} {% endblock %} diff --git a/server.js b/server.js index 34c20578c5..de1e854fd7 100644 --- a/server.js +++ b/server.js @@ -60,7 +60,11 @@ if (env === 'production' && useAuth === 'true') { } // Set up App -var appViews = [path.join(__dirname, '/app/views/'), path.join(__dirname, '/lib/')] +var appViews = [ + path.join(__dirname, '/node_modules/govuk-frontend/'), + path.join(__dirname, '/app/views/'), + path.join(__dirname, '/lib/') +] var nunjucksAppEnv = nunjucks.configure(appViews, { autoescape: true, @@ -81,7 +85,11 @@ app.use('/assets', express.static(path.join(__dirname, 'node_modules', 'govuk-fr // Set up documentation app if (useDocumentation) { - var documentationViews = [path.join(__dirname, '/docs/views/'), path.join(__dirname, '/lib/')] + var documentationViews = [ + path.join(__dirname, '/node_modules/govuk-frontend/'), + path.join(__dirname, '/docs/views/'), + path.join(__dirname, '/lib/') + ] var nunjucksDocumentationEnv = nunjucks.configure(documentationViews, { autoescape: true, From e5403ae44a4767798bf6a100d7890465e1ed4312 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 19 Jun 2018 18:52:46 +0100 Subject: [PATCH 08/41] Add related items partial --- app/assets/sass/application.scss | 2 +- app/assets/sass/patterns/_related-items.scss | 11 +++++++++++ docs/views/examples/start-page.html | 12 ++++++++---- 3 files changed, 20 insertions(+), 5 deletions(-) create mode 100644 app/assets/sass/patterns/_related-items.scss diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss index 676d711343..92811db5d6 100644 --- a/app/assets/sass/application.scss +++ b/app/assets/sass/application.scss @@ -7,6 +7,6 @@ $govuk-global-styles: true; // Patterns that aren't in Frontend // @import "patterns/check-your-answers"; // @import "patterns/task-list"; -// @import "patterns/related-items"; +@import "patterns/related-items"; // Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you diff --git a/app/assets/sass/patterns/_related-items.scss b/app/assets/sass/patterns/_related-items.scss new file mode 100644 index 0000000000..6425bce3e2 --- /dev/null +++ b/app/assets/sass/patterns/_related-items.scss @@ -0,0 +1,11 @@ +// This is a GOV.UK Publishing specific component that +// can be seen at http://govuk-static.herokuapp.com/component-guide/related_items + +.app-related-items { + border-top: 10px solid govuk-colour("blue"); + padding-top: govuk-spacing(2); +} + +.app-related-items .govuk-list > li { + margin-bottom: govuk-spacing(2); +} diff --git a/docs/views/examples/start-page.html b/docs/views/examples/start-page.html index 28a65446d4..4ebe45a249 100644 --- a/docs/views/examples/start-page.html +++ b/docs/views/examples/start-page.html @@ -56,13 +56,17 @@

Before you start

-