Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
nhsuk-frontend
Advanced tools
nhsuk-frontend - npm Package Compare versions
Comparing version 0.4.0 to 0.5.0
| # NHS.UK Frontend Changelog | ||
| ## 0.5.0 (Prerelease) - Dec 07, 2018 | ||
| :boom: **Breaking changes** | ||
| - Utility classes - Utility classes should be prefixed with `nhsuk-u-` rather than `nhsuk-!-`. ([PR 282](https://github.com/nhsuk/nhsuk-frontend/pull/282)) | ||
| If you are using any utility classes in your HTML, such as spacing, width or typography overrides, you need to update your HTML classes from | ||
| `nhsuk-!-` to `nhsuk-u-`. | ||
| You can find out more about utility class usage in the [utility class documentation](https://github.com/nhsuk/nhsuk-frontend/tree/master/packages/core#utilities). | ||
| :wrench: **Fixes** | ||
| - Footer - Add the ability to change the link of the NHS logo within the nunjucks macro with `homeHref` argument. Also have the logo show by default with the ability to hide it using the `showLogo` argument. ([PR 278](https://github.com/nhsuk/nhsuk-frontend/pull/278)) | ||
| ## 0.4.0 (Prerelease) - Dec 03, 2018 | ||
@@ -4,0 +19,0 @@ |
| { | ||
| "name": "nhsuk-frontend", | ||
| "version": "0.4.0", | ||
| "version": "0.5.0", | ||
| "description": "The NHS website frontend styles, for creating NHS websites and services.", | ||
@@ -5,0 +5,0 @@ "sasslintConfig": "config/sass-lint.yml", |
| # Action link | ||
| Find out more about the action link component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/157). | ||
@@ -6,0 +4,0 @@ |
| # Back link | ||
| Find out more about the back link component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/202). | ||
@@ -6,0 +4,0 @@ |
| # Breadcrumb | ||
| Find out more about the breadcrumb component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/158). | ||
@@ -6,0 +4,0 @@ |
| # Button | ||
| Find out more about the button component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/203). | ||
@@ -6,0 +4,0 @@ |
| # Checkboxes | ||
| Find out more about the checkboxes component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/207). | ||
@@ -6,0 +4,0 @@ |
| # Contents list | ||
| Find out more about the care card component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/161). | ||
@@ -6,0 +4,0 @@ |
| # Date input | ||
| Find out more about the date input component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/217). | ||
@@ -6,0 +4,0 @@ |
| # Details | ||
| Find out more about the action link component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/162). | ||
@@ -6,0 +4,0 @@ |
| # Emergency alert | ||
| Find out more about the emergency alert component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/166). | ||
@@ -6,0 +4,0 @@ |
| # Error message | ||
| Find out more about the error message component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/218). | ||
@@ -6,0 +4,0 @@ |
| # Error summary | ||
| Find out more about the error summary component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/219). | ||
@@ -6,0 +4,0 @@ |
| # Feedback banner | ||
| Find out more about the feedback banner component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/167). | ||
@@ -6,0 +4,0 @@ |
| # Fieldset | ||
| Find out more about the fieldset component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/220). | ||
@@ -6,0 +4,0 @@ |
@@ -49,29 +49,19 @@ # Footer | ||
| { | ||
| "url": "https://www.nhs.uk/Pages/nhs-sites.aspx", | ||
| "URL": "https://www.nhs.uk/Pages/nhs-sites.aspx", | ||
| "label": "NHS sites" | ||
| }, | ||
| { | ||
| "url": "https://www.nhs.uk/about-us", | ||
| "URL": "https://www.nhs.uk/about-us", | ||
| "label": "About us" | ||
| }, | ||
| { | ||
| "url": "https://www.nhs.uk/contact-us/", | ||
| "URL": "https://www.nhs.uk/contact-us/", | ||
| "label": "Contact us" | ||
| }, | ||
| { | ||
| "url": "https://www.nhs.uk/Personalisation/Login.aspx", | ||
| "label": "Profile editor login" | ||
| } | ||
| ], | ||
| "secondaryLinks": [ | ||
| { | ||
| "url": "https://www.nhs.uk/about-us/sitemap/", | ||
| "URL": "https://www.nhs.uk/about-us/sitemap/", | ||
| "label": "Sitemap" | ||
| }, | ||
| { | ||
| 'url': 'https://www.nhs.uk/accessibility/', | ||
| 'label': 'Accessibility' | ||
| }, | ||
| { | ||
| "url": "https://www.nhs.uk/our-policies/", | ||
| "URL": "https://www.nhs.uk/our-policies/", | ||
| "label": "Our policies" | ||
@@ -92,5 +82,3 @@ } | ||
| | **primaryLinks.[].label** | string | No | The label of a primary navigation item in the footer. | | ||
| | **secondaryLinks** | array | No | Array of secondary navigation items for use in the footer. | | ||
| | **secondaryLinks.[].url** | string | No | The href of a secondary navigation item in the footer. | | ||
| | **secondaryLinks.[].label** | string | No | The label of a secondary navigation item in the footer. | | ||
| | **homeHref** | string | No | The href of the home link for the logo. Defaults to "/". | | ||
| | **showLogo** | boolean | No | Show or hide the NHS logo in the footer. Logo shows by default. | |
| # Hero | ||
| Find out more about the hero component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/170). | ||
@@ -21,4 +19,4 @@ | ||
| <div class="nhsuk-hero__wrapper"> | ||
| <h1 class="nhsuk-!-margin-bottom-3">We’re here for you</h1> | ||
| <p class="nhsuk-body-l nhsuk-!-margin-bottom-0">Helping you take control of your health and wellbeing.</p> | ||
| <h1 class="nhsuk-u-margin-bottom-3">We’re here for you</h1> | ||
| <p class="nhsuk-body-l nhsuk-u-margin-bottom-0">Helping you take control of your health and wellbeing.</p> | ||
| </div> | ||
@@ -57,4 +55,4 @@ </div> | ||
| <div class="nhsuk-hero-content"> | ||
| <h1 class="nhsuk-!-margin-bottom-3">We’re here for you</h1> | ||
| <p class="nhsuk-body-l nhsuk-!-margin-bottom-0">Helping you take control of your health and wellbeing.</p> | ||
| <h1 class="nhsuk-u-margin-bottom-3">We’re here for you</h1> | ||
| <p class="nhsuk-body-l nhsuk-u-margin-bottom-0">Helping you take control of your health and wellbeing.</p> | ||
| </div> | ||
@@ -61,0 +59,0 @@ </div> |
| # Hint | ||
| Find out more about the hint component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/221). | ||
@@ -6,0 +4,0 @@ |
| # Images | ||
| Find out more about the images component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/171). | ||
@@ -6,0 +4,0 @@ |
| # Input | ||
| Find out more about the input component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/222). | ||
@@ -6,0 +4,0 @@ |
| # Label | ||
| Find out more about the label component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/223). | ||
@@ -6,0 +4,0 @@ |
| # List panel | ||
| Find out more about the list panel component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/173). | ||
@@ -6,0 +4,0 @@ |
| # Nav A-Z | ||
| Find out more about the nav A-Z component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/186). | ||
@@ -6,0 +4,0 @@ |
| # Pagination | ||
| Find out more about the pagination component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/174). | ||
@@ -6,0 +4,0 @@ |
| # Panel | ||
| Find out more about the panel component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/175). | ||
@@ -6,0 +4,0 @@ |
| # Promo | ||
| Find out more about the promo component and when to use it in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/176). | ||
@@ -6,0 +4,0 @@ |
| # Radios | ||
| Find out more about the radios component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/224). | ||
@@ -6,0 +4,0 @@ |
| # Review date | ||
| Find out more about the review date component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/177). | ||
| ## Quick start examples | ||
@@ -9,0 +6,0 @@ |
| # Select | ||
| Find out more about the select component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/225). | ||
@@ -6,0 +4,0 @@ |
| # Skip link | ||
| Find out more about the skip link component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/178). | ||
@@ -6,0 +4,0 @@ |
| # Table | ||
| Find out more about the table component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/179). | ||
@@ -6,0 +4,0 @@ |
| # Textarea | ||
| Find out more about the textarea component and when to use it in the [NHS digital service manual](https://beta.nhs.uk/service-manual/patterns/). | ||
| To discuss or contribute to this component, visit the [GitHub issue for this component](https://github.com/nhsuk/nhsuk-frontend/issues/226). | ||
@@ -6,0 +4,0 @@ |
@@ -7,10 +7,8 @@ # Core | ||
| Find out more about the core styles and patterns in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/). | ||
| ## Breakpoints | ||
| ``` | ||
| mobile: 320px, | ||
| tablet: 641px, | ||
| desktop: 769px, | ||
| mobile: 320px | ||
| tablet: 641px | ||
| desktop: 769px | ||
| large-desktop: 990px | ||
@@ -110,28 +108,18 @@ ``` | ||
| ## Variables | ||
| ### Example page layout | ||
| ### Colours | ||
| You can find the full list of colour variables and their use in the [NHS Digital service manual](https://beta.nhs.uk/service-manual/) or in the [sass-docs](). | ||
| #### Primary | ||
| ```scss | ||
| $color_nhsuk-blue: #005EB8; | ||
| $color_nhsuk-white: #FFFFFF; | ||
| $color_nhsuk-black: #212B32; | ||
| $color_nhsuk-green: #007F3B; | ||
| $color_nhsuk-red: #DA291C; | ||
| $color_nhsuk-yellow: #ffeb3b; | ||
| $color_nhsuk-purple: #330072; | ||
| ```html | ||
| <!-- Header --> | ||
| <div class="nhsuk-width-container"> | ||
| <main class="nhsuk-main-wrapper" id="maincontent"> | ||
| <div class="nhsuk-grid-row"> | ||
| <div class="nhsuk-grid-column-three-quarters"> | ||
| <!-- Components --> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| <!-- Footer --> | ||
| ``` | ||
| #### Secondary | ||
| ```scss | ||
| $color_nhsuk-pale-yellow: #FFF9C4; | ||
| $color_nhsuk-warm-yellow: #FFB81C; | ||
| $color_nhsuk-aqua-green: #00A499; | ||
| ``` | ||
| ## Utilities | ||
@@ -141,2 +129,4 @@ | ||
| Automatically clear an elements child elements. | ||
| ```html | ||
@@ -152,2 +142,15 @@ <div class="nhsuk-u-clear"></div> | ||
| ### Grid overrides | ||
| By default all grid elements will go to 100% width on screen sizes below tablet. These utilities can force | ||
| custom widths on all screen sizes. | ||
| ``` | ||
| nhsuk-u-[grid-size] | ||
| ``` | ||
| ```html | ||
| <div class="nhsuk-grid-column-one-half nhsuk-u-one-half"></div> | ||
| ``` | ||
| ### Normal font weight | ||
@@ -161,2 +164,4 @@ | ||
| Add a maximum width to large pieces of content, to improve readability. | ||
| ```html | ||
@@ -174,4 +179,30 @@ <div class="nhsuk-u-reading-width"> | ||
| ### Spacing overrides | ||
| ```html | ||
| class="nhsuk-u-margin-[direction]-[spacing]" | ||
| ``` | ||
| #### Remove bottom margin | ||
| ```html | ||
| <h1 class="nhsuk-u-margin-bottom-0"></h1> | ||
| ``` | ||
| #### Remove all margins | ||
| ```html | ||
| <h1 class="nhsuk-u-margin-0"></h1> | ||
| ``` | ||
| #### Custom margins | ||
| ```html | ||
| <h1 class="nhsuk-u-margin-top-1"></h1> | ||
| ``` | ||
| ### Prevent text wrapping | ||
| Prevent long anchor links from line breaking on smaller screens. | ||
| ```html | ||
@@ -183,4 +214,40 @@ <a class="nhsuk-u-nowrap"></a> | ||
| Hide elements visually but keep it in the DOM, useful for screen readers. | ||
| ```html | ||
| <span class="nhsuk-u-visually-hidden"></span> | ||
| ``` | ||
| ## Variables (Sass) | ||
| ### Colours | ||
| #### Primary | ||
| ```scss | ||
| $color_nhsuk-blue: #005eb8; | ||
| $color_nhsuk-white: #ffffff; | ||
| $color_nhsuk-black: #212b32; | ||
| $color_nhsuk-green: #007f3b; | ||
| $color_nhsuk-red: #da291c; | ||
| $color_nhsuk-yellow: #ffeb3b; | ||
| $color_nhsuk-purple: #330072; | ||
| ``` | ||
| #### Secondary | ||
| ```scss | ||
| $color_nhsuk-pale-yellow: #fff9c4; | ||
| $color_nhsuk-warm-yellow: #ffb81C; | ||
| $color_nhsuk-aqua-green: #00A499; | ||
| ``` | ||
| #### Greyscale | ||
| ```scss | ||
| $color_nhsuk-grey-1: #425563; | ||
| $color_nhsuk-grey-2: #768692; | ||
| $color_nhsuk-grey-3: #aeb7bd; | ||
| $color_nhsuk-grey-4: #d8dde0; | ||
| $color_nhsuk-grey-5: #f0f4f5; | ||
| ``` |
@@ -5,30 +5,25 @@ # NHS.UK Frontend | ||
| You can see examples of components, and guidance on when to use them, in the [NHS digital service manual](https://beta.nhs.uk/service-manual). | ||
| Visit the [NHS digital service manual](https://beta.nhs.uk/service-manual) for examples of components and guidance for when to use them. | ||
| ## Using NHS.UK Frontend | ||
| ## How to install NHS.UK Frontend | ||
| There are 2 ways you can start using NHS.UK Frontend in your websites and services. | ||
| ### 1. Install with package managers | ||
| ### 1. Install with package managers (recommended) | ||
| We recommend that you [install NHS.UK Frontend using node package manager (npm)](/docs/installation/installing-with-npm.md). | ||
| We recommend installing NHS.UK Frontend via package managers; node package manager (npm), yarn, or the Python Package Index (PyPi). | ||
| Other package managers will become available in early 2019, such as yarn and Python Package Index (PyPi). | ||
| + [Installing using npm](/docs/installation/installing-with-npm.md) | ||
| + Installing using yarn (available soon) | ||
| + Installing using PyPi (available soon) | ||
| ### 2. Install by using compiled files | ||
| If you are not using one of the above package managers, you can install by using our compiled files. | ||
| You can also [install NHS.UK Frontend using our compiled files](/docs/installation/installing-compiled.md), if you are not currently using a package manager. | ||
| + [Installing using compiled files](/docs/installation/installing-compiled.md) | ||
| ## Browsers and assistive technology | ||
| ## Browser support | ||
| Please see our [browser support information](/docs/contributing/coding-standards/browser-support.md) to see which browsers NHS.UK Frontend supports. | ||
| Visit our [support for browsers and assistive technology](/docs/contributing/coding-standards/browser-support.md), for details on operating systems and software. | ||
| ## Contributing | ||
| ## Contribute | ||
| Please see our [contributing guidelines](/docs/contributing/README.md) on how to set up the project locally and contribute changes to NHS.UK Frontend. | ||
| [Contribute to NHS.UK Frontend](/docs/contributing/README.md) by following our guidelines. | ||
| **Special thanks to the following for their contributions:** | ||
| We created this library with help from: | ||
@@ -38,9 +33,10 @@ - [Government Digital Service (GDS)](https://github.com/alphagov/) | ||
| - [Phil Sherry](https://github.com/philsherry) | ||
| - [Caroline Jarrett](https://twitter.com/cjforms) | ||
| ## Get in touch | ||
| NHS.UK Frontend is actively maintained by a team at NHS Digital, you can contact us on [Slack](https://nhsuk.slack.com/messages/CCPLQ9YAJ) or [send us an email](mailto:nhsdigital.nhsuk-frontend@nhs.net). | ||
| NHS.UK Frontend is maintained by NHS Digital. Email [nhsdigital.nhsuk-frontend@nhs.net](mailto:nhsdigital.nhsuk-frontend@nhs.net), or open a [Github issue](https://github.com/nhsuk/nhsuk-frontend/issues/new/choose). | ||
| ## Licence | ||
| Unless stated otherwise, the codebase is released under the MIT License. This covers both the codebase and any sample code in the documentation. The documentation is © Crown copyright and available under the terms of the Open Government 3.0 licence. | ||
| The codebase is released under the MIT License, unless stated otherwise. This covers both the codebase and any sample code in the documentation. The documentation is © Crown copyright and available under the terms of the Open Government 3.0 licence. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.34%
972998
- Number of lines in readme file
- decreased by-8.89%
41
No dependency changes