diff --git a/public/sass/README.md b/public/sass/README.md deleted file mode 100644 index 0fc95248fb..0000000000 --- a/public/sass/README.md +++ /dev/null @@ -1,73 +0,0 @@ -### Sass project structure - -This file explains the Sass project structure used. - -In an attempt to apply the [single responsibility principle to Sass](http://csswizardry.com/2012/04/the-single-responsibility-principle-applied-to-css/) each file is responsible for styling a single element, or module. - -#### base - -This folder contains any reset styles you may need, for example - [Normalize.css](http://necolas.github.io/normalize.css/) and base styles for typography and grid layout. - -There's a `.govuk` class, in `_typography-base.scss` which increases the default font size to 19px. -Apply this to your `main` content area. - -#### helpers - -This folder contains any helpers you may need, put functions and mixins in here. -Use a variables file to define any global project variables. - -There's a `_vars.scss` file, with gutter variables. - -There's a `_colours.scss` file, with a colour palette. - -There's a `_mixins.scss` file, with a clearfix mixin. - -#### modules - -This folder contains styles for discrete components, or modules. - -`_buttons.scss` shows how to use the govuk_frontend_toolkit buttons mixin. - -`_forms.scss` has common form styles. - -`_form-validation.scss` has form error message styles. - -`_lists.scss` has numbered and bulleted list styles. - -`_text-indent.scss` has text box styles. - -#### service-design-manual - -This folder contains the styles to make the page look like the [GOV.UK Service Design Manual](https://www.gov.uk/service-manual). - -#### template - -This folder contains template styles for main page sections. -The global header and footer are already provided as part of the govuk_template. -Styles for other 'template' or global page sections should appear here - the breadcrumb, alpha-beta banner and cookie message. - - -### Find out more about Sass - -[Sass](http://sass-lang.com/) -[Sass guides and tutorials] (http://thesassway.com/guides) - -#### Sass best practices - -* [Keep your CSS selectors short] (http://csswizardry.com/2012/05/keep-your-css-selectors-short/), don't create styles which are overly specific. -* Be careful of nesting! Aim to nest no more than three levels deep. - -* Put variables in a vars.scss file, then if values change - you'll only need to update them in once place. - - -#### Find out more about structuring your Sass project - -The best way to structure your Sass project is the way that works for you and your team. - -For more on structuring Sass: - -[Architecture for a Sass project](http://www.sitepoint.com/architecture-sass-project/) - -[Sass Style Guide](http://www.sitepoint.com/css-sass-styleguide/) - - diff --git a/public/sass/base/_grid-1-2.scss b/public/sass/base/_grid-1-2.scss deleted file mode 100644 index e46ee053fc..0000000000 --- a/public/sass/base/_grid-1-2.scss +++ /dev/null @@ -1,6 +0,0 @@ -.grid-1-2 { - width: 100%; - @include media(tablet) { - width: 50%; - } -} diff --git a/public/sass/base/_grid-1-3.scss b/public/sass/base/_grid-1-3.scss deleted file mode 100644 index 196b0aefa2..0000000000 --- a/public/sass/base/_grid-1-3.scss +++ /dev/null @@ -1,6 +0,0 @@ -.grid-1-3 { - width: 100%; - @include media(tablet) { - width: 33.333333333%; - } -} diff --git a/public/sass/base/_grid-1-4.scss b/public/sass/base/_grid-1-4.scss deleted file mode 100644 index 4b859c3230..0000000000 --- a/public/sass/base/_grid-1-4.scss +++ /dev/null @@ -1,6 +0,0 @@ -.grid-1-4 { - width: 100%; - @include media(tablet) { - width: 25%; - } -} diff --git a/public/sass/base/_grid-2-3.scss b/public/sass/base/_grid-2-3.scss deleted file mode 100644 index f48c5bca3b..0000000000 --- a/public/sass/base/_grid-2-3.scss +++ /dev/null @@ -1,6 +0,0 @@ -.grid-2-3 { - width: 100%; - @include media(tablet) { - width: 66.666666667%; - } -} diff --git a/public/sass/base/_grid-3-4.scss b/public/sass/base/_grid-3-4.scss deleted file mode 100644 index 58ca7d2df7..0000000000 --- a/public/sass/base/_grid-3-4.scss +++ /dev/null @@ -1,6 +0,0 @@ -.grid-3-4 { - width: 100%; - @include media(tablet) { - width: 75%; - } -} diff --git a/public/sass/base/_grid-unit.scss b/public/sass/base/_grid-unit.scss deleted file mode 100644 index c4357aa02c..0000000000 --- a/public/sass/base/_grid-unit.scss +++ /dev/null @@ -1,11 +0,0 @@ -// Grid units take 100% width, unless a .grid-width class is applied -.grid { - float: left; - width: 100%; -} - -.grid .inner-block { - @include media(tablet) { - padding: 0 $gutter-half; - } -} diff --git a/public/sass/base/_grid-wrapper.scss b/public/sass/base/_grid-wrapper.scss deleted file mode 100644 index 876e06be8d..0000000000 --- a/public/sass/base/_grid-wrapper.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Wrap grid layout -.grid-wrapper { - @include contain-floats; - padding: 0 $gutter-half; - @include media(tablet) { - padding: 0 $gutter-half; - } -} diff --git a/public/sass/base/_typography-base.scss b/public/sass/base/_typography-base.scss deleted file mode 100644 index c79105e3d7..0000000000 --- a/public/sass/base/_typography-base.scss +++ /dev/null @@ -1,6 +0,0 @@ -// Increase default font size to 19px -// Scope to .govuk to only affect main content area -.govuk { - @include core-19; - -webkit-font-smoothing: antialiased; -} diff --git a/public/sass/base/_typography-data.scss b/public/sass/base/_typography-data.scss deleted file mode 100644 index 91153be71f..0000000000 --- a/public/sass/base/_typography-data.scss +++ /dev/null @@ -1,13 +0,0 @@ -// Data -.data-80 { - @include bold-80; -} - -.data-48 { - @include bold-48; - line-height: 0.9; -} - -.data p { - @include bold-16; -} diff --git a/public/sass/base/_typography-general.scss b/public/sass/base/_typography-general.scss deleted file mode 100644 index ad6ee56f1b..0000000000 --- a/public/sass/base/_typography-general.scss +++ /dev/null @@ -1,22 +0,0 @@ -p, -pre { - margin-top: 5px; - margin-bottom: 20px; -} - -.lede, -.lead { - @include core-24; -} - -.copy-16 { - @include core-16; -} - -// Set a max-width for text blocks -// Less than 75 characters per line of text - -.text { - max-width: 30em; -} - diff --git a/public/sass/elements-page.scss b/public/sass/elements-page.scss index b41aab60c9..36f743fbba 100644 --- a/public/sass/elements-page.scss +++ b/public/sass/elements-page.scss @@ -1,31 +1,4 @@ -// Import GOV.UK frontend toolkit - -@import "_colours"; -@import "_css3"; -@import "_shims"; -@import "_typography"; -@import "_measurements"; - -@import "design-patterns/_alpha-beta"; -@import "design-patterns/_buttons"; - -// Helpers -// ========================================================================== - -// Variables -// @import "helpers/_variables"; -// Variables for colour palette -@import "helpers/_colours"; - -// Functions -// @import "helpers/_functions"; - -// Mixins -// @import "helpers/_mixins"; - -// Helper classes -@import "helpers/_helpers"; - +@import "main"; // Service Design Manual styles // ========================================================================== @@ -35,48 +8,46 @@ @import "service-design-manual/helpers/breadcrumbs"; // Adjust Service Design header to align with content +#global-breadcrumb, .page-header { - margin-left: 30px; - margin-right: 30px; + margin-left: $gutter-half; + margin-right: $gutter-half; + + @include media(tablet) { + margin-left: $gutter; + margin-right: $gutter; + } } // Elements page styles // ========================================================================== // These are example styles, used only for the Elements page example boxes -// We're not splitting these styles into smaller files, to avoid confusing these with the base GOV.UK elements styles - -// No need to include these styles in your project // Code styles code { @include core-16; } -// Heading styles +// Headings + .heading-with-border { border-top: 1px solid $border-colour; padding-top: ($gutter*1.5); } -.example .heading-36 { - border-top: none; - padding-top: 0; +// Text + +.tight { + margin-bottom: 0; } -// List styles +// Lists .list-bullet { margin-bottom: ($gutter*1.5); } -// Text styles - -.tight { - margin-bottom: 0; -} - - // Example box .example { @@ -155,7 +126,7 @@ code { } -// Colour swatche wrapper +// Colour swatch wrapper .swatch-wrapper { @include media(tablet) { float: left; @@ -177,11 +148,9 @@ code { padding-top: 10px; } } - .swatch-wrapper li { @include core-16; } - .swatch-wrapper b { font-weight: bold; text-transform: uppercase; @@ -204,23 +173,36 @@ code { } // Generate swatch classes for each colour in palette list -@each $color in $palette { - - $color-name: nth($color, 1); - $color-var: nth($color, 2); - $color-var-50: nth($color, 3); - $color-var-25: nth($color, 4); - - .swatch-#{$color-name} { - background-color: $color-var; - } - .swatch-#{$color-name}-50 { - background-color: $color-var-50; - } - .swatch-#{$color-name}-25 { - background-color: $color-var-25; +@mixin color-swatches { + @each $color in $palette { + $color-name: nth($color, 1); + $color-var: nth($color, 2); + .swatch-#{$color-name} { + background-color: $color-var; + } } +} +// Usage: +@include color-swatches; + +// Common colours +.swatch-alpha { + background-color: $alpha-colour; +} +.swatch-beta { + background-color: $beta-colour; +} + +.swatch-error { + background-color: $error; +} +.swatch-error-background { + background-color: $error-background; +} + +.swatch-focus { + background-color: $yellow; } // Create swatch classes for other colours in palette @@ -274,10 +256,4 @@ code { } .swatch-highlight-colour { background-color: $highlight-colour; -} - -// Example pages -.example-back-link { - display: inline-block; - margin: 40px 0; -} +} \ No newline at end of file diff --git a/public/sass/modules/_buttons.scss b/public/sass/elements/_buttons.scss similarity index 51% rename from public/sass/modules/_buttons.scss rename to public/sass/elements/_buttons.scss index e9db215986..ab27849ca2 100644 --- a/public/sass/modules/_buttons.scss +++ b/public/sass/elements/_buttons.scss @@ -12,37 +12,39 @@ } // Start now buttons -.get-started .button { - @include bold-24; - line-height: 0.66667; - color: #FFF; - background-color: #00823b; // Not in palette!! - padding: 0.60em 1.7em 0.45em 0.67em; - background-image: url(https://assets.digital.cabinet-office.gov.uk/static/icon-pointer-063838cde108768e30b077e5303783fc.png); - background-position: 100% 50%; - background-repeat: no-repeat; - margin-bottom: 0; -} -.get-started .button:hover { - background-color: $green; -} +.get-started { + + .button { + @include bold-24; + line-height: 0.66667; + color: #FFF; + background-color: #00823b; // Add to palette + padding: 0.60em 1.7em 0.45em 0.67em; + background-image: url(https://assets.digital.cabinet-office.gov.uk/static/icon-pointer-063838cde108768e30b077e5303783fc.png); + background-position: 100% 50%; + background-repeat: no-repeat; + margin-bottom: 0; + } + .button:hover { + background-color: $green; + } + + .destination { + @include core-14; + color: #2e3133; + display: block; + margin-top: 7px; + max-width: 182px; + } -.get-started .destination { - @include core-14; - color: #2e3133; - display: block; - margin-top: 7px; - max-width: 182px; } // Link style buttons .button-link { - // Remove browser default button styles + @include core-19; background: none; border: none; - // Override webkit default button styles -webkit-font-smoothing: antialiased; - // Match .button styles display: inline-block; color: $link-colour; line-height: 1.25; diff --git a/public/sass/elements/_colours.scss b/public/sass/elements/_colours.scss new file mode 100644 index 0000000000..709b0efc0e --- /dev/null +++ b/public/sass/elements/_colours.scss @@ -0,0 +1,44 @@ +// Colours +// ========================================================================== + +// Errors +$error: $mellow-red; +$error-background: #fef7f7; + + +// Sass list for colour palette + +$palette: ( + ("purple", $purple), + ("mauve", $mauve), + ("fuschia", $fuschia), + ("pink", $pink), + ("baby-pink", $baby-pink), + ("red", $red), + ("mellow-red", $mellow-red), + ("orange", $orange), + ("brown", $brown), + ("yellow", $yellow), + ("green", $green), + ("grass-green", $grass-green), + ("turquoise", $turquoise), + ("light-blue", $light-blue) + ); + +@mixin color-palette { + @each $color in $palette { + $color-name: nth($color, 1); + $color-var: nth($color, 2); + .color-#{$color-name} { + background-color: $color-var; + } + } +} + +// Usage: +// @include color-palette; + +.text-secondary { + color: $secondary-text-colour; +} + diff --git a/public/sass/elements/_forms.scss b/public/sass/elements/_forms.scss new file mode 100644 index 0000000000..fe5f483fbf --- /dev/null +++ b/public/sass/elements/_forms.scss @@ -0,0 +1,123 @@ +// Forms +// ========================================================================== + +// Form layout +fieldset, +legend { + width: 100%; + float: left; + clear: both; +} + +// Form group is used to wrap label and input pairs +.form-group { + float: left; + width: 100%; + clear: both; + @include contain-floats; + @include media(tablet) { + margin-bottom: ($gutter*1.5); + } +} + +.form-group-compound { + margin-bottom: 10px; +} + + +// Labels + +// Form labels, or for legends styled to look like labels +.form-label, +.form-group label { + @include core-19; + display: block; + margin-bottom: 5px; +} + + +// Form controls + +// By default, form controls are 50% width for desktop, +// and 100% width for mobile +.form-control { + width: 100%; + box-sizing: border-box; + + font-size: 1em; + + padding: 4px; + background-color: $white; + border: 1px solid $border-colour; + + // Disable webkit appearance and remove rounded corners + -webkit-appearance: none; + border-radius: 0; + + @include media(tablet) { + width: 50%; + } +} + +// Form control widths +.form-control-3-4 { + width: 100%; + @include media(tablet) { + width: 75%; + } +} + +.form-control-1-2 { + width: 100%; + @include media(tablet) { + width: 50%; + } +} + +.form-control-1-4 { + width: 100%; + @include media(tablet) { + width: 25%; + } +} + +.form-control-1-8 { + width: 100%; + @include media(tablet) { + width: 12.5%; + } +} + +// Hints + +// Form hints & examples are light grey and sit above a form control +.form-hint { + display: block; + color: $secondary-text-colour; + margin-top: 8px; + margin-bottom: 5px; +} + + +// Radio buttons +.form-radio input { + vertical-align: middle; + margin: -4px 5px 0 0; +} + + +// Checkboxes +.form-checkbox input { + vertical-align: middle; + margin: -2px 5px 0 0; +} + + +// Form validation +@import "forms/form-validation"; + + +// Form patterns +@import "forms/form-date-of-birth"; + +@import "forms/form-chunky-labels"; diff --git a/public/sass/elements/_helpers.scss b/public/sass/elements/_helpers.scss new file mode 100644 index 0000000000..670fad4b73 --- /dev/null +++ b/public/sass/elements/_helpers.scss @@ -0,0 +1,36 @@ +// Helpers +// ========================================================================== + +// Use the contain floats mixin for this project, +// as placeholders are not supported by libsass +@mixin contain-floats { + &:after { + content: ""; + display: block; + clear: both; + } + @include ie-lte(7) { + zoom: 1; + } +} + +// Want to see how the grid works? +// add this class to the body to see how grid padding is set +.example-highlight-grid { + .grid-wrapper { + background: $grey-2; + } + .grid { + background: $grey-4; + } + .is-inner-block-highlight { + background: $grey-3; + width: 100%; + } +} + +// Used to space the "back" link on example pages +.example-back-link { + @include inline-block; + margin-top: $gutter; +} \ No newline at end of file diff --git a/public/sass/elements/_layout.scss b/public/sass/elements/_layout.scss new file mode 100644 index 0000000000..41c76c7141 --- /dev/null +++ b/public/sass/elements/_layout.scss @@ -0,0 +1,91 @@ +// Layout +// ========================================================================== + +#wrapper { + text-align: center; + padding-bottom: $gutter; + + @include media(desktop) { + padding-bottom: $gutter*2; + } +} + +#content { + text-align: left; + margin: 0 auto; + width: auto; + max-width: 960 + $gutter*2; // 1020px + @include contain-floats; + + @include ie-lte(8){ + width: 960px; + } + +} + +.inner-block { + padding: 0 $gutter-half; + + @include media(tablet){ + padding: 0 $gutter; + } +} + + +// Grid layout +.grid-wrapper { + @include contain-floats; + @include media(tablet) { + padding: 0 $gutter-half; + } +} + +// Grid units take 100% width, unless a .grid-width class is applied +.grid { + float: left; + width: 100%; +} + +// Grid 'inner-block' aligns grid content with header and footer +.grid .inner-block { + @include media(tablet) { + padding: 0 $gutter-half; + } +} + +.grid-1-2 { + width: 100%; + @include media(tablet) { + width: 50%; + } +} +.grid-1-3 { + width: 100%; + @include media(tablet) { + width: 33.333333333%; + } +} +.grid-1-4 { + width: 100%; + @include media(tablet) { + width: 25%; + } +} +.grid-1-5 { + width: 100%; + @include media(tablet) { + width: 20%; + } +} +.grid-2-3 { + width: 100%; + @include media(tablet) { + width: 66.666666667%; + } +} +.grid-3-4 { + width: 100%; + @include media(tablet) { + width: 75%; + } +} diff --git a/public/sass/modules/_lists.scss b/public/sass/elements/_lists.scss similarity index 86% rename from public/sass/modules/_lists.scss rename to public/sass/elements/_lists.scss index d44daf2160..206d3758db 100644 --- a/public/sass/modules/_lists.scss +++ b/public/sass/elements/_lists.scss @@ -1,17 +1,6 @@ // Lists // ========================================================================== -dl, -menu, -ol, -ul { - margin: 0; -} - -dd { - margin-left: 0; -} - menu, ol, ul { diff --git a/public/sass/modules/_text-indent.scss b/public/sass/elements/_panels.scss similarity index 58% rename from public/sass/modules/_text-indent.scss rename to public/sass/elements/_panels.scss index b6af8a3e2b..d0134c13f7 100644 --- a/public/sass/modules/_text-indent.scss +++ b/public/sass/elements/_panels.scss @@ -1,7 +1,9 @@ -// Indented panels with a grey left hand border +// Panels +// ========================================================================== +// Indented panels with a grey left hand border .text-indent { - @include box-sizing(border-box); + // @include box-sizing(border-box); border-left: 5px solid $grey-3; padding-left: $gutter-half; margin: ($gutter $gutter-two-thirds $gutter 0); diff --git a/public/sass/elements/_reset.scss b/public/sass/elements/_reset.scss new file mode 100644 index 0000000000..d157dbeedc --- /dev/null +++ b/public/sass/elements/_reset.scss @@ -0,0 +1,33 @@ +// Reset +// ========================================================================== +// flatten all browser defaults and styles inherited from gov.uk template + +/* Borrowed from http://meyerweb.com/eric/tools/css/reset/ */ +div, span, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark { + border: none; + margin: 0; + padding: 0; +} + +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +input, textarea, +table, caption, tbody, tfoot, thead, tr, th, td { + font-size: inherit; + font-family: inherit; + line-height: inherit; + font-weight: normal; +} diff --git a/public/sass/modules/_tables.scss b/public/sass/elements/_tables.scss similarity index 100% rename from public/sass/modules/_tables.scss rename to public/sass/elements/_tables.scss diff --git a/public/sass/base/_typography-headings.scss b/public/sass/elements/_typography.scss similarity index 55% rename from public/sass/base/_typography-headings.scss rename to public/sass/elements/_typography.scss index 2128e1bc7b..ab2da9adb3 100644 --- a/public/sass/base/_typography-headings.scss +++ b/public/sass/elements/_typography.scss @@ -1,3 +1,13 @@ +// Typography +// ========================================================================== + +// Increase default font size to 19px +#content { + @include core-19; + -webkit-font-smoothing: antialiased; +} + +// Headings .heading-48 { @include bold-48(); margin-top: $gutter-half; @@ -42,3 +52,40 @@ } } +// Text +p, +pre { + margin-top: 5px; + margin-bottom: 20px; +} + +.lede, +.lead { + @include core-24; +} + +.copy-16 { + @include core-16; +} + +// Set a max-width for text blocks +// Less than 75 characters per line of text + +.text { + max-width: 30em; +} + +// Data +.data-80 { + @include bold-80; +} + +.data-48 { + @include bold-48; + line-height: 0.9; +} + +.data p { + @include bold-16; +} + diff --git a/public/sass/elements/forms/_form-chunky-labels.scss b/public/sass/elements/forms/_form-chunky-labels.scss new file mode 100644 index 0000000000..d42ec1de5d --- /dev/null +++ b/public/sass/elements/forms/_form-chunky-labels.scss @@ -0,0 +1,23 @@ +// Large hit area +// Radio buttons & checkboxes + +.form-group .block-label { + width: auto; + display: inline-block; + padding: (18px $gutter $gutter-half $gutter-half); + background: $grey-3; +} + +// Only if JavaScript is enabled +// Remove focus styles from block radio and checkboxes + +.block-label input:focus { + outline: none; +} + +// Instead, add focus styles to labels + +.add-focus { + outline: 3px solid $yellow; +} + diff --git a/public/sass/elements/forms/_form-date-of-birth.scss b/public/sass/elements/forms/_form-date-of-birth.scss new file mode 100644 index 0000000000..3424b6977d --- /dev/null +++ b/public/sass/elements/forms/_form-date-of-birth.scss @@ -0,0 +1,29 @@ +// Date of birth +.date-of-birth legend { + @extend .form-label; +} + +.date-of-birth label { + display: block; + color: $grey-1; + margin-bottom: 5px; +} + +.date-of-birth .form-group { + @include media(tablet){ + width: 50px; + float: left; + margin-right: 20px; + clear: none; + } +} + +.date-of-birth .form-group-year { + @include media(tablet){ + width: 70px; + } +} + +.date-of-birth .form-group input { + width: 100%; +} \ No newline at end of file diff --git a/public/sass/modules/_form-validation.scss b/public/sass/elements/forms/_form-validation.scss similarity index 67% rename from public/sass/modules/_form-validation.scss rename to public/sass/elements/forms/_form-validation.scss index ce0c5a48a4..96af32ae70 100644 --- a/public/sass/modules/_form-validation.scss +++ b/public/sass/elements/forms/_form-validation.scss @@ -1,10 +1,10 @@ -// Helper classes -@import "../helpers/_helpers.scss"; +@import "../colours"; // Validation summary box .validation-summary { - border: 3px solid $mellow-red; - background: #fef7f7; // NOT IN THE PALETTE !! + border: 3px solid $error; + background: $error-background; + padding: $gutter-half $gutter; margin-bottom: $gutter; } @@ -13,8 +13,8 @@ margin-top: 10px; } -.validation-summary p, -.validation-summary li { +.validation-summary li, +.validation-summary p { @include core-16; } @@ -24,21 +24,23 @@ } .validation-summary a { - color: $mellow-red; + color: $error; } .validation-summary .heading-19 { margin-top: $gutter-half; } + // Validation message box .validation { @include contain-floats; - border-left: 3px solid $mellow-red; - background: #fef7f7; // NOT IN THE PALETTE !! + border-left: 3px solid $error; + background: $error-background; padding-top: $gutter-half; padding-bottom: $gutter; padding-left: $gutter; + padding-right: $gutter; margin-bottom: $gutter-half; } @@ -46,8 +48,9 @@ margin-bottom: 10px; } + // Validation message .validation-message { @include core-16; - color: $mellow-red; + color: $error; } diff --git a/public/sass/helpers/_colours.scss b/public/sass/helpers/_colours.scss deleted file mode 100644 index 2fc3682a93..0000000000 --- a/public/sass/helpers/_colours.scss +++ /dev/null @@ -1,44 +0,0 @@ -// Sass list for colour palette - -$palette: ( - ("purple", $purple, $purple-50, $purple-25), - ("mauve", $mauve, $mauve-50, $mauve-25), - ("fuschia", $fuschia, $fuschia-50, $fuschia-25), - ("pink", $pink, $pink-50, $pink-25), - ("baby-pink", $baby-pink, $baby-pink-50, $baby-pink-25), - ("red", $red, $red-50, $red-25), - ("mellow-red", $mellow-red, $mellow-red-50, $mellow-red-25), - ("orange", $orange, $orange-50, $orange-25), - ("brown", $brown, $brown-50, $brown-25), - ("yellow", $yellow, $yellow-50, $yellow-25), - ("green", $green, $green-50, $green-25), - ("grass-green", $grass-green, $grass-green-50, $grass-green-25), - ("turquoise", $turquoise, $turquoise-50, $turquoise-25), - ("light-blue", $light-blue, $light-blue-50, $light-blue-25) - ); - - -@mixin color-palette { - @each $color in $palette { - $color-name: nth($color, 1); - $color-var: nth($color, 2); - $color-var-50: nth($color, 3); - $color-var-25: nth($color, 4); - .color-#{$color-name} { - background-color: $color-var; - } - .color-#{$color-name}-50 { - background-color: $color-var-50; - } - .color-#{$color-name}-25 { - background-color: $color-var-25; - } - } -} - -// @include color-palette; - -.text-secondary { - color: $secondary-text-colour; -} - diff --git a/public/sass/helpers/_helpers.scss b/public/sass/helpers/_helpers.scss deleted file mode 100644 index 5197e0cdf7..0000000000 --- a/public/sass/helpers/_helpers.scss +++ /dev/null @@ -1,16 +0,0 @@ -// Add missing mixins and variables here - -// Import GOV.UK frontend toolkit shims -@import "_shims"; - -// Use contain floats mixin as placeholders are not supported -@mixin contain-floats { - &:after { - content: ""; - display: block; - clear: both; - } - @include ie-lte(7) { - zoom: 1; - } -} diff --git a/public/sass/main.scss b/public/sass/main.scss index c69a7515b3..52e605d9c3 100644 --- a/public/sass/main.scss +++ b/public/sass/main.scss @@ -2,94 +2,45 @@ // Import GOV.UK frontend toolkit -@import "_colours"; -@import "_css3"; -@import "_shims"; -@import "_typography"; -@import "_measurements"; +@import "colours"; +@import "measurements"; +@import "conditionals"; +@import "shims"; +@import "typography"; +@import "css3"; +@import "design-patterns/buttons"; -@import "design-patterns/_alpha-beta"; -@import "design-patterns/_buttons"; +// Reset +@import "elements/helpers"; -// Helpers -// ========================================================================== - -// Variables -// @import "helpers/_variables"; -// Variables for colour palette -// @import "helpers/_colours"; - -// Functions -// @import "helpers/_functions"; - -// Mixins -// @import "helpers/_mixins"; - -// Helper classes -@import "helpers/_helpers"; - -// Base -// ========================================================================== - -// Normalize -// @import "base/_normalize"; - -// Global styles -// @import "base/_global"; +// Reset +@import "elements/reset"; // Typography -@import "base/_typography-base"; -@import "base/_typography-general"; -@import "base/_typography-headings"; -@import "base/_typography-data"; +@import "elements/typography"; -// Grid layout -@import "base/_grid-wrapper"; -@import "base/_grid-unit"; -@import "base/_grid-1-2"; -@import "base/_grid-1-3"; -@import "base/_grid-1-4"; -@import "base/_grid-2-3"; -@import "base/_grid-3-4"; +// Layout +@import "elements/layout"; -// Template +// Modules // ========================================================================== -// Header -// @import "template/_header"; - -// Footer -// @import "template/_footer"; - -// Breadcrumb -// @import "template/_breadcrumb"; - -// Main content -@import "template/_main-wrapper"; - - -// // Modules -// // ========================================================================== - // Forms -@import "modules/_forms"; - -// Form validation -@import "modules/_form-validation"; +@import "elements/forms"; // Tables -@import "modules/_tables"; +@import "elements/tables"; // Buttons -@import "modules/_buttons"; +@import "elements/buttons"; // Lists -@import "modules/_lists"; - -// Boxes and borders -@import "modules/_text-indent"; - +@import "elements/lists"; +// Panels +@import "elements/panels"; +// Colours +@import "elements/colours"; diff --git a/public/sass/modules/_forms.scss b/public/sass/modules/_forms.scss deleted file mode 100644 index 96eb858675..0000000000 --- a/public/sass/modules/_forms.scss +++ /dev/null @@ -1,244 +0,0 @@ -// Normalize form elements - -form { - margin: 0; -} - -fieldset { - width: 100%; - float: left; - clear: both; - margin-left: 0; -} - -legend { - padding-left: 0; - width: 100%; - float: left; - clear: both; -} - -// Swap legend margins for padding -legend.heading-36 { - margin: 0; - padding-top: 45px; - padding-bottom: ($gutter*1.5); -} - -legend.heading-24 { - margin: 0; - padding-top: 45px; - padding-bottom: 20px -} - - -button, -input, -select, -textarea { - font-size: 100%; - margin: 0; - vertical-align: baseline; - *vertical-align: middle; -} -button, -input { - line-height: normal; -} - -input[type="text"], -input[type="email"], -input[type="date"], -input[type="datetime"], -input[type="datetime-local"], -input[type="email"], -input[type="month"], -input[type="number"], -input[type="search"], -input[type="tel"], -input[type="time"], -input[type="url"], -input[type="week"], -select[size], -textarea { - font-size: 1em; - - padding: 4px; - background-color: $white; - border: 1px solid $border-colour; - - // Disable webkit appearance and remove rounded corners - -webkit-appearance: none; - border-radius: 0; -} - -textarea { - overflow: auto; - vertical-align: top; - min-height: 190px; - height: auto; -} - -// Form group is used to wrap label and input pairs - -.form-group { - float: left; - width: 100%; - clear: both; - @extend .cf; - @include media(tablet) { - margin-bottom: ($gutter*1.5); - } -} - -.form-group-compound { - margin-bottom: 10px; -} - - -// Form labels, or for legends styled to look like labels -.form-label, -.form-group label { - @include core-19; - display: block; - margin-bottom: 5px; -} - - -// By default, form controls are 50% width for desktop and 100% width for mobile - -.form-control { - width: 100%; - box-sizing: border-box; - @include media(tablet) { - width: 50%; - } -} - -// Form control widths - -.form-control-3-4 { - width: 100%; - @include media(tablet) { - width: 75%; - } -} - -.form-control-1-2 { - width: 100%; - @include media(tablet) { - width: 50%; - } -} - -.form-control-1-4 { - width: 100%; - @include media(tablet) { - width: 25%; - } -} - -.form-control-1-8 { - width: 100%; - @include media(tablet) { - width: 12.5%; - } -} - -// Form hints & examples are light grey and sit above a form control - -.form-hint { - display: block; - color: $secondary-text-colour; - margin-top: 8px; - margin-bottom: 5px; -} - - -// Date of birth - -.date-of-birth legend { - @extend .form-label; -} -.date-of-birth label { - display: block; - color: $grey-1; - margin-bottom: 5px; -} -.date-of-birth .form-group { - @include media(tablet){ - width: 50px; - float: left; - margin-right: 20px; - clear: none; - } -} -.date-of-birth .form-group-year { - @include media(tablet){ - width: 70px; - } -} -.date-of-birth .form-group input { - width: 100%; -} - -// Vertical alignment of checkboxes - -.form-checkbox input { - vertical-align: middle; - margin: -2px 5px 0 0; -} - -// Vertical alignment of radio buttons - -.form-radio input { - vertical-align: middle; - margin: -4px 5px 0 0; -} - -// Inline form layout (tablet and up) -.form-group-inline { - padding-top: $gutter-half; -} -.form-group-inline .form-checkbox, -.form-group-inline .form-radio { - float: left; - margin-right: $gutter-half; - margin-bottom: $gutter-half; -} - -// Block form layout (tablet and up) - -.form-group-block { - @include contain-floats; -} -.form-group-block .form-checkbox, -.form-group-block .form-radio { - margin-bottom: $gutter-half; -} - -// Large hit areas for labels wrapping radio buttons and checkboxes -.form-group label.block-label { - display: inline-block; -} - -.block-label { - display: inline-block; - padding: (18px $gutter $gutter-half $gutter-half); - background: $grey-3; -} - - -// Only if JavaScript is enabled -// Remove focus styles from radio and checkboxes - -.block-label input:focus { - outline: none; -} - -// Instead, add focus styles to labels - -.add-focus { - outline: 3px solid $yellow; -} - diff --git a/public/sass/template/_main-wrapper.scss b/public/sass/template/_main-wrapper.scss deleted file mode 100644 index 750a314a53..0000000000 --- a/public/sass/template/_main-wrapper.scss +++ /dev/null @@ -1,14 +0,0 @@ -.main { - max-width: 1020px; - width: auto; - margin: 0 auto 90px; - @include contain-floats; - - @include ie-lte(6) { - width: 990px; - } -} - -.main-full-width { - max-width: 100%; -} diff --git a/views/examples/forms-wip.html b/views/examples/forms-wip.html new file mode 100644 index 0000000000..578a788c9a --- /dev/null +++ b/views/examples/forms-wip.html @@ -0,0 +1,279 @@ +{{head}} +{{/head}} + +{{$propositionHeader}} + {{>propositional_navigation}} +{{/propositionHeader}} + +{{$headerClass}}with-proposition{{/headerClass}} + +{{$content}} +
+
+
+ + Back to GOV.UK elements + +

+ Forms +

+ +
+ + + +
+ + + Your personal details + + +
+ +

As shown on your birth certificate or passport

+ +
+ +
+ + +

E.g. your maiden name

+
+ +
+ + + +
+ + + Date of birth + +
+ + +
+
+ + +
+
+ + +
+ +
+ + + +
+ + + Your address + + +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + + +
+ +
+ + +
+ +
+ + + +
+ + + Block layout + + + + +
+ +
+ +
+
+ +
+ +
+ + + +
+ +
+ +
+
+ +
+ +
+ +
+ + + +
+ + + Inline layout + + + + +
+ +
+ +
+
+ +
+ +
+ + + +
+ +
+ +
+
+ +
+ +
+ +
+ + + +
+ + + Radio buttons and checkboxes + + + + +
+ +
+ +
+
+ +
+ +
+ + + +
+ +
+ +
+
+ +
+ +
+ +
+ + + + + +
+ +
+
+
+{{/content}} + +{{/govuk_template}} diff --git a/views/examples/forms.html b/views/examples/forms.html index b61fe8dc53..6c53adf435 100644 --- a/views/examples/forms.html +++ b/views/examples/forms.html @@ -11,13 +11,11 @@ {{$headerClass}}with-proposition{{/headerClass}} {{$content}} -
- -
-
-
- - Back to GOV.UK elements +
+
+
+ + Back to GOV.UK elements

Forms @@ -110,172 +108,10 @@

- - -
- - - Block layout - - - - -
- -
- -
-
- -
- -
- - - -
- -
- -
-
- -
- -
- -
- - - -
- - - Inline layout - - - - -
- -
- -
-
- -
- -
- - - -
- -
- -
-
- -
- -
- -
- - - -
- - - Radio buttons and checkboxes - - - - -
- -
- -
-
- -
- -
- - - -
- -
- -
-
- -
- -
- -
- - - - -

-
-
- +
+
{{/content}} diff --git a/views/examples/grid_layout.html b/views/examples/grid_layout.html index e43eced797..27c5882044 100644 --- a/views/examples/grid_layout.html +++ b/views/examples/grid_layout.html @@ -11,128 +11,139 @@ {{$headerClass}}with-proposition{{/headerClass}} {{$content}} -
-
-
-
- - Back to GOV.UK elements - -

- Grid layout -

- -

Full width

-

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

- +
+
+ +
+
+
+ + Back to GOV.UK elements + +

+ Grid layout +

+ +

Full width

+ + Toggle background colours to see the padding on grid cells. + +

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+ +
-
-
-
-
- -

Two thirds

-

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+
+ +

Two thirds

+

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+ +
-
-
-
-

One third

-

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

One third

+

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+
-
-
-
-
-

One half

-

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+
+

One half

+

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+
-
-
-
-

One half

-

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

One half

+

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+
-
- -
-
-
-

One third

-

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+ +
+
+
+

One third

+

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+
-
-
-
-

One third

-

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

One third

+

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+
-
-
-
-

One third

-

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

One third

+

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+
-
-
-
-
-

One quarter

-

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+
+

One quarter

+

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+
-
-
-
-

One quarter

-

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

One quarter

+

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+
-
-
-
-

One quarter

-

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

One quarter

+

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+
-
-
-
-

One quarter

-

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

One quarter

+

Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

+
+
{{/content}} +{{$bodyEnd}} + {{>scripts}} +{{/bodyEnd}} + {{/govuk_template}} diff --git a/views/examples/typography.html b/views/examples/typography.html index 74dabe0ccd..0103195638 100644 --- a/views/examples/typography.html +++ b/views/examples/typography.html @@ -11,11 +11,9 @@ {{$headerClass}}with-proposition{{/headerClass}} {{$content}} -
- -
-
-
+
+
+
Back to GOV.UK elements @@ -66,11 +64,9 @@

A 19px heading

-
-
-
- -
+
+
+
{{/content}} {{/govuk_template}} diff --git a/views/includes/elements_head.html b/views/includes/elements_head.html index b4863ff1c1..942993ee35 100644 --- a/views/includes/elements_head.html +++ b/views/includes/elements_head.html @@ -1,8 +1,3 @@ - - - - - diff --git a/views/includes/scripts.html b/views/includes/scripts.html new file mode 100644 index 0000000000..fa23f3723d --- /dev/null +++ b/views/includes/scripts.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/views/index.html b/views/index.html index e36084dc0c..f89a3f01c6 100755 --- a/views/index.html +++ b/views/index.html @@ -4,1191 +4,1063 @@ {{$content}} -
+
+
+ + {{>service_manual_breadcrumb}} + {{>service_manual_header}} + +
+ +
+ +

+ This guide explains how to make your service look consistent with the rest of GOV.UK. +

+ +
    +
  1. Layout
    2. +
  2. Typography
    3. +
  3. Colour
    4. +
  4. Images and icons
    5. +
  5. Data
    6. +
  6. Forms
    7. +
  7. Buttons
    8. +
  8. Errors and validation
    9. +
  9. Tables
    10. +
- {{>service_manual_breadcrumb}} - {{>service_manual_header}} - -
- -
-
-
- -
- -

- This guide explains how to make your service look consistent with the rest of GOV.UK. -

- -
    -
  1. Layout
    2. -
  2. Typography
    3. -
  3. Colour
    4. -
  4. Images and icons
    5. -
  5. Data
    6. -
  6. Forms
    7. -
  7. Buttons
    8. -
  8. Errors and validation
    9. -
  9. Tables
    10. -
- -
- -
- -

1. Layout

- -
    -
  • Use white space to create a visual hierarchy on the page
    • -
  • Design for small screens first, using a single column layout
    • -
  • Introduce columns as the content requires it
    • -
  • Base column ratios on halves, thirds or quarters of the page width
    • -
  • Spacing between elements is usually 5px, 10px, 15px or multiples of 15px
    • -
  • Gutters are 15px for smaller screens and 30px for larger screens
    • -
  • Lines of text should be no longer than 75 characters
    • -
  • Set breakpoints for small, medium and large screens using media queries
    • -
  • Optimise your layout for different screen sizes, but don’t make assumptions about what devices people are using (things change)
    • -
  • The media queries for these breakpoints can be found in the GOV.UK frontend toolkit _conditionals.scss file
    • -
- -

- Find out more: -

- - -

Grid unit proportions

- -

Two columns

- -
-
-
-
-

Content

-
-
-
-
-

Content

-
-
-
-
- -

Three equal columns

+
-
-
-
-
-

Content

-
-
-
-
-

Content

-
-
-
-
-

Content

-
-
+
+ +

1. Layout

+ +
    +
  • Use white space to create a visual hierarchy on the page
    • +
  • Design for small screens first, using a single column layout
    • +
  • Introduce columns as the content requires it
    • +
  • Base column ratios on halves, thirds or quarters of the page width
    • +
  • Spacing between elements is usually 5px, 10px, 15px or multiples of 15px
    • +
  • Gutters are 15px for smaller screens and 30px for larger screens
    • +
  • Lines of text should be no longer than 75 characters
    • +
  • Set breakpoints for small, medium and large screens using media queries
    • +
  • Optimise your layout for different screen sizes, but don’t make assumptions about what devices people are using (things change)
    • +
  • The media queries for these breakpoints can be found in the GOV.UK frontend toolkit _conditionals.scss file
    • +
+ +

+ Find out more: +

+ + +

Grid unit proportions

+ +

Two columns

+ +
+
+
+
+

Content

- -

Four equal columns

- -
-
-
-
-

Content

-
-
-
-
-

Content

-
-
-
-
-

Content

-
-
-
-
-

Content

-
-
+
+
+

Content

-
- +
-
-

2. Typography

- -
    -
  • Use the GDS Transport Website font in Light and Bold, it is licenced for use on the GOV.UK domains only. Services publically available on a different domains need to use an alternative typeface like Arial -
    • -
  • Create clear hierarchy using headings so content is easy to scan
    • -
  • Use headings in a uniform way across your service
    • -
  • Body copy should be the main focus of the page
    • -
  • Use 19px GDS Transport Website Light for body copy and caption text. Width should be 75 characters for legibility
    • -
  • Common font colours, can be found in the colour palette
    • -
  • Avoid using bold text inline and italics
    • -
  • For specialist/internal user content smaller text sizes can be used (14px, 12px, 10px), always ensure that there is a real user need
    • -
- -

- Find out more: -

- - -

- Headings
- GDS Transport Website Bold -

- -
-
-
+

Three equal columns

-

A 48px heading

-

A 36px heading

-

A 24px heading

-

A 19px heading

- -
-
-
-
- -

Heading Bold 48px

-

Heading Bold 36px

-

Heading Bold 24px

-

Heading Bold 19px

- -
+
+
+
+
+

Content

- -

- Body copy
- GDS Transport Website Light -

- -
-
-
- -

A 24px lead paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

-

A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

-

A 16px supporting text paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

- -
+
+
+

Content

-
-
- -

Paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Normal 24px

-

Paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Normal 19px

-

Paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Normal 16px

- -
+
+
+
+

Content

- -

Links and interaction states

-
-
-
- -

A 19px body copy link. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-

A 19px external link. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

- -
+
+
+ +

Four equal columns

+ +
+
+
+
+

Content

-
-
- -

A 19px body copy link. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-

A 19px external link. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

- -
+
+
+
+

Content

- -

Lists

-
+
- -
    -
  • Here is a bulleted list.
    • -
  • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
    • -
  • Vestibulum id ligula porta felis euismod semper
    • -
  • Integer posuere erat a ante venenatis dapibus posuere velit aliquet
    • -
- -
    -
  1. Here is a numbered list
    2. -
  2. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
    3. -
  3. Vestibulum id ligula porta felis euismod semper
    4. -
  4. Integer posuere erat a ante venenatis dapibus posuere velit aliquet
    5. -
- +

Content

- -

Inset text

-
+
- -
-

- Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna. -

-
- +

Content

-
- +
-
-

3. Colour

+
+ + +
+

2. Typography

+ +
    +
  • Use the GDS Transport Website font in Light and Bold, it is licenced for use on the GOV.UK domains only. Services publically available on a different domains need to use an alternative typeface like Arial +
    • +
  • Create clear hierarchy using headings so content is easy to scan
    • +
  • Use headings in a uniform way across your service
    • +
  • Body copy should be the main focus of the page
    • +
  • Use 19px GDS Transport Website Light for body copy and caption text. Width should be 75 characters for legibility
    • +
  • Common font colours, can be found in the colour palette
    • +
  • Avoid using bold text inline and italics
    • +
  • For specialist/internal user content smaller text sizes can be used (14px, 12px, 10px), always ensure that there is a real user need
    • +
+ +

+ Find out more: +

+ + +

+ Headings
+ GDS Transport Website Bold +

+ +
+
+
+ +

A 48px heading

+

A 36px heading

+

A 24px heading

+

A 19px heading

-
    -
  • Text should be set in black with secondary text in grey
    • -
  • Links should be set in blue and buttons or dialog boxes should have text in white
    • -
  • Text and functional elements need to be easily differentiated. When colour is desaturated we work toward an AA colour ratio standard of 4.5:1
    • -
  • Use Sass variables in case colour values need to be updated, the variables are defined in colours.scss in the GOV.UK front end toolkit.
    • -
- -

- Find out more: -

- +
+
+
+
+ +

Heading Bold 48px

+

Heading Bold 36px

+

Heading Bold 24px

+

Heading Bold 19px

-

Colour
- HEX values and Sass variable names

-
-
- -
-

Text and common colours

- -
- -

Text

- -
-
    -
  • #0B0C0C
    • -
  • $text-colour
    • -
- -
-
    -
  • #6F777B
    • -
  • $secondary-text-colour
    • -
- -
-
    -
  • #FFFFFF
    • -
  • $page-colour
    • -
- -
- -
- -

Links

- -
-
    -
  • #005ea5
    • -
  • $link-colour
    • -
- -
-
    -
  • #005ea5
    • -
  • $link-visited
    • -
- -
-
    -
  • #2e8aca
    • -
  • $link-hover-colour
    • -
- -
- -
- -

Backgrounds

- -
-
    -
  • #BFC1C3
    • -
  • $border-colour
    • -
- -
-
    -
  • #DEE0E2
    • -
  • $panel-colour
    • -
- -
-
    -
  • #F8F8F8
    • -
  • $highlight-colour
    • -
- -
-
- -

Grey to white

- -
-
    -
  • #0B0C0C
    • -
  • $black
    • -
- -
-
    -
  • #BFC1C3
    • -
  • $grey-1
    • -
- -
-
    -
  • #BFC1C3
    • -
  • $grey-2
    • -
- -
-
- - - -
-
    -
  • #DEE0E2
    • -
  • $grey-3
    • -
- -
-
    -
  • #F8F8F8
    • -
  • $grey-4
    • -
- -
-
    -
  • #FFFFFF
    • -
  • $white
    • -
- -
+
+
+
+ +

+ Body copy
+ GDS Transport Website Light +

-
- -

Standard colour palette

- -
- -

Purple

- -
-
    -
  • #2e358b
    • -
  • $purple
    • -
- -
-
    -
  • #9799c4
    • -
  • $purple-50
    • -
- -
-
    -
  • #d5d6e7
    • -
  • $purple-25
    • -
+
+
+
-
+

A 24px lead paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

+

A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

+

A 16px supporting text paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

-
+
+
+
+
-

Mauve

- -
-
    -
  • #6f72af
    • -
  • $mauve
    • -
+

Paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Normal 24px

+

Paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Normal 19px

+

Paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Normal 16px

-
-
    -
  • #b7b9d7
    • -
  • $mauve-50
    • -
+
+
+
+ +

Links and interaction states

+
+
+
-
-
    -
  • #e2e2ef
    • -
  • $mauve-25
    • -
+

A 19px body copy link. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+

A 19px external link. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-
+
+
+
+
-
- -

Fuschia

-
-
    -
  • #912b88
    • -
  • $fuschia
    • -
-
-
    -
  • #c994c3
    • -
  • $fuschia-50
    • -
-
-
    -
  • #e9d4e6
    • -
  • $fuschia-25
    • -
+

A 19px body copy link. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+

A 19px external link. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-
+
+
+
-
- -

Pink

-
-
    -
  • #d53880
    • -
  • $pink
    • -
-
-
    -
  • #eb9bbe
    • -
  • $pink-50
    • -
-
-
    -
  • #f6d7e5
    • -
  • $pink-25
    • -
+

Lists

+
+
-
- -
- -

Baby pink

-
-
    -
  • #f499be
    • -
  • $baby-pink
    • -
-
-
    -
  • #faccdf
    • -
  • $baby-pink-50
    • -
-
-
    -
  • #fdebf2
    • -
  • $baby-pink-25
    • -
+
    +
  • Here is a bulleted list.
    • +
  • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
    • +
  • Vestibulum id ligula porta felis euismod semper
    • +
  • Integer posuere erat a ante venenatis dapibus posuere velit aliquet
    • +
-
+
    +
  1. Here is a numbered list
    2. +
  2. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
    3. +
  3. Vestibulum id ligula porta felis euismod semper
    4. +
  4. Integer posuere erat a ante venenatis dapibus posuere velit aliquet
    5. +
-
- -

Red

-
-
    -
  • #b10e1e
    • -
  • $red
    • -
-
-
    -
  • #d9888c
    • -
  • $red-50
    • -
-
-
    -
  • #efcfd1
    • -
  • $red-25
    • -
+
+
+ +

Inset text

+
+
+ +
+

+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna. +

+
-
+
+
-
- -

Mellow red

-
-
    -
  • #df3034
    • -
  • $mellow-red
    • -
-
-
    -
  • #ef9998
    • -
  • $mellow-red-50
    • -
-
-
    -
  • #f9d6d6
    • -
  • $mellow-red-25
    • -
+
+ + +
+

3. Colour

+ +
    +
  • Text should be set in black with secondary text in grey
    • +
  • Links should be set in blue and buttons or dialog boxes should have text in white
    • +
  • Text and functional elements need to be easily differentiated. When colour is desaturated we work toward an AA colour ratio standard of 4.5:1
    • +
  • Use Sass variables in case colour values need to be updated, the variables are defined in colours.scss in the GOV.UK front end toolkit.
    • +
+ +

+ Find out more: +

+ + +

Colour
+ HEX values and Sass variable names

+
+
+ +

Text and background colours

+ +
+ +

Text

+ +
+
    +
  • #0B0C0C
    • +
  • $text-colour
    • +
+ +
+
    +
  • #6F777B
    • +
  • $secondary-text-colour
    • +
+ +
+
    +
  • #FFFFFF
    • +
  • $page-colour
    • +
-
+
-
- -

Orange

-
-
    -
  • #f47738
    • -
  • $orange
    • -
-
-
    -
  • #fabb96
    • -
  • $orange-50
    • -
-
-
    -
  • #fde4d4
    • -
  • $orange-25
    • -
+
+ +

Links

+ +
+
    +
  • #005ea5
    • +
  • $link-colour
    • +
+ +
+
    +
  • #005ea5
    • +
  • $link-visited
    • +
+ +
+
    +
  • #2e8aca
    • +
  • $link-hover-colour
    • +
-
+
-
- -

Brown

-
-
    -
  • #b58840
    • -
  • $brown
    • -
-
-
    -
  • #dac39c
    • -
  • $brown-50
    • -
-
-
    -
  • #f0e7d7
    • -
  • $brown-25
    • -
+
+ +

Backgrounds

+ +
+
    +
  • #BFC1C3
    • +
  • $border-colour
    • +
+ +
+
    +
  • #DEE0E2
    • +
  • $panel-colour
    • +
+ +
+
    +
  • #F8F8F8
    • +
  • $highlight-colour
    • +
-
+
-
- -

Yellow

-
-
    -
  • #ffbf47
    • -
  • $yellow
    • -
-
-
    -
  • #ffdf94
    • -
  • $yellow-50
    • -
-
-
    -
  • #fff2d3
    • -
  • $yellow-25
    • -
+
+ +

Grey to white

+ +
+
    +
  • #0B0C0C
    • +
  • $black
    • +
+ +
+
    +
  • #BFC1C3
    • +
  • $grey-1
    • +
+ +
+
    +
  • #BFC1C3
    • +
  • $grey-2
    • +
-
+
+
+ + + +
+
    +
  • #DEE0E2
    • +
  • $grey-3
    • +
+ +
+
    +
  • #F8F8F8
    • +
  • $grey-4
    • +
+ +
+
    +
  • #FFFFFF
    • +
  • $white
    • +
-
- -

Green

-
-
    -
  • #006435
    • -
  • $green
    • -
-
-
    -
  • #7fb299
    • -
  • $green-50
    • -
-
-
    -
  • #cce0d6
    • -
  • $green-25
    • -
+
-
+

Commonly used colours

-
- -

Grass green

-
-
    -
  • #85994b
    • -
  • $grass-green
    • -
- -
-
    -
  • #c2cca3
    • -
  • $grass-green-50
    • -
-
-
    -
  • #e7ebda
    • -
  • $grass-green-25
    • -
+
+ +

Alpha

+ +
+
    +
  • #d53880
    • +
  • $alpha-colour
    • +
+ +
+ +
+ +

Beta

+ +
+
    +
  • #f47738
    • +
  • $beta-colour
    • +
-
+
+
+ +

Error outline

+ +
+
    +
  • #df3034
    • +
  • $error
    • +
-
- -

Turquoise

-
-
    -
  • #28a197
    • -
  • $turquoise
    • -
-
-
    -
  • #95d0cb
    • -
  • $turquoise-50
    • -
-
-
    -
  • #d5ecea
    • -
  • $turquoise-25
    • -
+
+ +
+ +

Error background

-
+
+
    +
  • #fef7f7
    • +
  • $error-background
    • +
-
- -

Light blue

-
-
    -
  • #2b8cc4
    • -
  • $light-blue
    • -
-
-
    -
  • #96c6e2
    • -
  • $light-blue-50
    • -
-
-
    -
  • #d5e8f3
    • -
  • $light-blue-25
    • -
+
-
+
+ +

Focus

+ +
+
    +
  • #FFBF47
    • +
  • $yellow
    • +
-
-
- - -
-

4. Images and icons

+

Colour palette

+ +
+ +

Purple

+ +
+
    +
  • #2e358b
    • +
  • $purple
    • +
-
    -
  • Avoid unnecessary decoration, only use images and icons if there is a there is a real user need
    • -
  • If images are needed they should be landscape, 3:2 aspect ratio
    • -
  • If icons are needed ensure they are clear, simple and help to convey information more clearly than text alone could. Don’t hide functionality under icons
    • -
  • Ensure icons meet contrast ratio requirements
    • -
+

Mauve

+ +
+
    +
  • #6f72af
    • +
  • $mauve
    • +
+ +

Fuschia

+
+
    +
  • #912b88
    • +
  • $fuschia
    • +
-

Image aspect ratio

-
-
-
-
- 3:2 -
-
-
-
- -
-
-
-
- +
+ +

Pink

+
+
    +
  • #d53880
    • +
  • $pink
    • +
+ +

Baby pink

+
+
    +
  • #f499be
    • +
  • $baby-pink
    • +
+ +

Red

+
+
    +
  • #b10e1e
    • +
  • $red
    • +
-
-

5. Data

+
-
    -
  • Data is recommended as an alternative to using photography
    • -
  • For screen readers, ensure the data value appears first so it makes sense when read aloud
    • -
+
+ +

Mellow red

+
+
    +
  • #df3034
    • +
  • $mellow-red
    • +
+ +

Orange

+
+
    +
  • #f47738
    • +
  • $orange
    • +
+ +

Brown

+
+
    +
  • #b58840
    • +
  • $brown
    • +
-

- Find out more: -

+
- +
+ +

Yellow

+
+
    +
  • #ffbf47
    • +
  • $yellow
    • +
+ +

Green

+
+
    +
  • #006435
    • +
  • $green
    • +
+ +

Grass green

+
+
    +
  • #85994b
    • +
  • $grass-green
    • +
-

Large data

-
-
-
- -
-

24

-

Ministerial departments

-
- -
-
-
-
- -
-

80px

-

16px

-
- -
-
-

Small data

-
-
-
- -
-

56/154

-

on GOV.UK

-
- -
-
-
-
- -
-

48px

-

16px

-
- -
-
-
+
-
- +

Turquoise

+
+
    +
  • #28a197
    • +
  • $turquoise
    • +
-
-

6. Forms

+

Light blue

+
+
    +
  • #2b8cc4
    • +
  • $light-blue
    • +
-

-
    -
  • Keep forms as simple as possible, only ask what is needed to run your service
    • - -
  • Hint text should sit above a form field
    • -
  • Use hint text for supporting contextual help, don’t use placeholder text in fields
    • - -
  • For more than two options, radio buttons or checkboxes should appear stacked
    • -
  • Avoid using dropdowns, instead we recommend; radio buttons, using predictive fields (good for long lists like countries) and checkboxes
    • +
-
  • Indents are used within forms to highlight supporting information
    • -
  • All elements use the Sass variable $yellow, Hex #FFBF47 as a focus colour, often this is used as a fill or an outline of 3px
    • - +
    +
    -

    - Find out more: -

    - - -

    Form inputs and labels

    -

    - Labels should be aligned above their controls. -

    -
    +
    + + +
    +

    4. Images and icons

    + +
      +
    • Avoid unnecessary decoration, only use images and icons if there is a there is a real user need
      • +
    • If images are needed they should be landscape, 3:2 aspect ratio
      • +
    • If icons are needed ensure they are clear, simple and help to convey information more clearly than text alone could. Don’t hide functionality under icons
      • +
    • Ensure icons meet contrast ratio requirements
      • +
    + +

    Image aspect ratio

    +
    +
    +
    - -
    -
    -
    - - -
    -
    -
    - + 3:2
    - -

    Spacing between form elements

    - -

    - A form wrapper, .form-group can be used to enclose a form label and input pair. This will create 45px bottom spacing between form rows. -

    -
    +
    - -
    -
    -
    - -

    As shown on your birth certificate or passport

    - -
    -
    -
    - +
    +
    +
    -

    Hint text and example text

    -

    - Form hints should appear above the form control -

    -
    -
    - -
    -
    -
    - -

    As shown on your birth certificate or passport

    - -
    -
    -
    +
    + + +
    +

    5. Data

    +
      +
    • Data is recommended as an alternative to using photography
      • +
    • For screen readers, ensure the data value appears first so it makes sense when read aloud
      • +
    + +

    + Find out more: +

    + + + +

    Large data

    +
    +
    +
    + +
    +

    24

    +

    Ministerial departments

    +
    -

    - Form examples should also appear above the form control -

    -
    -
    - -
    -
    -
    - -

    For example your maiden name

    - -
    -
    -
    - +
    +
    +
    + +
    +

    80px

    +

    16px

    +
    +
    +
    -

    Radio buttons

    -

    - Radio buttons let users choose a single option from a list. -

    -
    -
    - -
    -
    -
    - -
    -
    - -
    -
    -
    - +

    Small data

    +
    +
    +
    + +
    +

    56/154

    +

    on GOV.UK

    +
    - -

    Checkboxes

    -

    - Checkboxes let users select either on/off toggles or multiple selections. -

    -
    -
    - -
    -
    -
    - -
    -
    -
    - +
    +
    +
    + +
    +

    48px

    +

    16px

    +
    +
    +
    -

    Large hit area radio buttons/checkboxes

    -

    - Radio buttons and checkboxes with large hit areas are easier to select with a mouse and also for touch devices -

    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -
    - -
    -
    -
    -
    +
    + + +
    +

    6. Forms

    + +

    +
      +
    • Keep forms as simple as possible, only ask what is needed to run your service
      • + +
    • Hint text should sit above a form field
      • +
    • Use hint text for supporting contextual help, don’t use placeholder text in fields
      • + +
    • For more than two options, radio buttons or checkboxes should appear stacked
      • +
    • Avoid using dropdowns, instead we recommend; radio buttons, using predictive fields (good for long lists like countries) and checkboxes
      • + +
    • Indents are used within forms to highlight supporting information
      • +
    • All elements use the Sass variable $yellow, Hex #FFBF47 as a focus colour, often this is used as a fill or an outline of 3px
      • +
    + +

    + Find out more: +

    + + +

    Form inputs and labels

    +

    + Labels should be aligned above their controls. +

    +
    +
    + +
    +
    +
    + + +
    +
    +
    -
    -
    - - -
    - +
    + +

    Spacing between form elements

    + +

    + A form wrapper, .form-group can be used to enclose a form label and input pair. This will create 45px bottom spacing between form rows. +

    +
    +
    + +
    +
    +
    + +

    As shown on your birth certificate or passport

    + +
    +
    +
    -
    -

    7. Buttons

    +
    +
    + +

    Hint text and example text

    +

    + Form hints should appear above the form control +

    +
    +
    -
      -
    • Use Buttons to move though a transaction. Don't use them to represent choices, instead use radio buttons, checkboxes or links
      • -
    • Start buttons use the colour #00823B
      • -
    • Primary buttons use the Sass variable green #006435 $green
      • -
    • Buttons can be created using the button mixin defined in the GOV.UK front end toolkit -
      • -
    • All elements use the Sass variable $yellow, Hex #FFBF47 as a focus colour, often this is used as a fill or an outline of 3px
      • -
    +
    +
    +
    + +

    As shown on your birth certificate or passport

    + +
    +
    +
    + +
    +
    +

    + Form examples should also appear above the form control +

    +
    +
    -

    - Find out more: -

    +
    +
    +
    + +

    For example your maiden name

    + +
    +
    +
    - +
    +
    + +

    Radio buttons

    +

    + Radio buttons let users choose a single option from a list. +

    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    +
    -

    Start button

    -
    -
    -
    - Start now - on the Blue Badge eligibility tool -
    -
    -
    +
    +
    + +

    Checkboxes

    +

    + Checkboxes let users select either on/off toggles or multiple selections. +

    +
    +
    + +
    +
    +
    + +
    +
    +
    -

    Primary button

    -
    -
    - -
    -
    +
    +
    -

    Disabled primary button

    -
    -
    - -
    -
    +

    Large hit area radio buttons/checkboxes

    +

    + Radio buttons and checkboxes with large hit areas are easier to select with a mouse and also for touch devices +

    -

    Secondary button

    -
    -
    - - Link -
    -
    +
    +
    + +
    +
    +
    + + +
    +
    +
    - +
    -
    -

    8. Errors and validation

    +
    +
    -
      -
    • Summarise validation errors at the top of your page, with jump links
      • -
    • The red bar visually connects the summary to the messages in the form
      • -
    • Error copy should be specific to question and validation should identify all errors
      • -
    • Errors should not cause pre-filled fields to clear
      • -
    - -

    - Find out more: -

    - - -

    Form validation errors

    - -
    -
    - -
    -

    There was a problem submitting the form

    -

    Please try the following:

    - +
    +
    +
    + +
    +
    +
    -
    -
    - -
    -

    Enter your name

    -
    - - -
    -
    -
    -
    -

    Enter your email address

    - - -
    -
    -
    -
    +
    +
    + + + +
    + + +
    +

    7. Buttons

    + +
      +
    • Use Buttons to move though a transaction. Don't use them to represent choices, instead use radio buttons, checkboxes or links
      • +
    • Start buttons use the colour #00823B
      • +
    • Primary buttons use the Sass variable green #006435 $green
      • +
    • Buttons can be created using the button mixin defined in the GOV.UK front end toolkit +
      • +
    • All elements use the Sass variable $yellow, Hex #FFBF47 as a focus colour, often this is used as a fill or an outline of 3px
      • +
    + +

    + Find out more: +

    + + + +

    Start button

    +
    +
    +
    + Start now + on the Blue Badge eligibility tool +
    +
    +
    -
    -
    +

    Primary button

    +
    +
    + +
    +
    +

    Disabled primary button

    +
    +
    +
    - - -
    +
    -

    9. Tables

    - -
      -
    • Consider putting content into tables to make it easier to scan
      • -
    - -

    - Find out more: -

    - +

    Secondary button

    +
    +
    + + Link +
    +
    + +
    + + +
    +

    8. Errors and validation

    + +
      +
    • Summarise validation errors at the top of your page, with jump links
      • +
    • The red bar visually connects the summary to the messages in the form
      • +
    • Error copy should be specific to question and validation should identify all errors
      • +
    • Errors should not cause pre-filled fields to clear
      • +
    + +

    + Find out more: +

    + + +

    Form validation errors

    + +
    +
    -

    Data in a table

    - -
    -
    +
    +

    There was a problem submitting the form

    +

    Please try the following:

    + +
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    Trade descriptionName of sourcePlace of exploitation
    Not yet on saleAmerston boreholeAmerston Hall Farm, Elwick
    Schweppes Abbey WellSchweppes Abbey WellAbbey Well, Morpeth, Northumberland
    Aqua PuraAqua PuraLow Plains, Armathwaite, Cumbria
    +
    +
    +
    +

    Enter your name

    +
    + + +
    -
    +
    +
    +

    Enter your email address

    + + +
    +
    + +
    - +
    -
    + + +
    + +

    9. Tables

    + +
      +
    • Consider putting content into tables to make it easier to scan
      • +
    + +

    + Find out more: +

    + + +

    Data in a table

    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Trade descriptionName of sourcePlace of exploitation
    Not yet on saleAmerston boreholeAmerston Hall Farm, Elwick
    Schweppes Abbey WellSchweppes Abbey WellAbbey Well, Morpeth, Northumberland
    Aqua PuraAqua PuraLow Plains, Armathwaite, Cumbria
    -
    +
    +
    +
    + + +
    {{/content}}