Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/simonwhatley/nhsuk-visual-studio-code-extension

This extension for Visual Studio Code includes snippets to help build the UK's NHS digital services.
https://github.com/simonwhatley/nhsuk-visual-studio-code-extension

extension nhsuk nunjucks snippets visual-studio-code vscode vscode-extension

Last synced: about 9 hours ago
JSON representation

This extension for Visual Studio Code includes snippets to help build the UK's NHS digital services.

Awesome Lists containing this project

README 

        
# About the NHS.UK Visual Studio Code extension



This extension for Visual Studio Code includes snippets to help in building the UK's NHS digital services.



## Available snippets



### Styles



#### Layout



|Name|Shortcut|Notes|

|-------------------------|-------------------------|---|

|Form group|`nhsuk-form-group`||

|Form section|`nhsuk-form-section`||

|[Grid column full](https://service-manual.nhs.uk/design-system/styles/layout/#full-width)|`nhsuk-grid-column-full`||

|[Grid column one-half](https://service-manual.nhs.uk/design-system/styles/layout/#one-half)|`nhsuk-grid-column-one-half`||

|[Grid column one-quarter](https://service-manual.nhs.uk/design-system/styles/layout/#one-quarter)|`nhsuk-grid-column-one-quarter`||

|[Grid column one-third](https://service-manual.nhs.uk/design-system/styles/layout/#one-third)|`nhsuk-grid-column-one-third`||

|[Grid column two-thirds](https://service-manual.nhs.uk/design-system/styles/layout/#two-thirds)|`nhsuk-grid-column-two-thirds`||

|[Grid column](https://service-manual.nhs.uk/design-system/styles/layout/)|`nhsuk-grid-column`||

|[Grid row](https://service-manual.nhs.uk/design-system/styles/layout/)|`nhsuk-grid-row`||

|[Layout one-third / two-thirds](https://service-manual.nhs.uk/design-system/styles/layout/#two-thirds-one-third)|`nhsuk-layout-one-third-two-thirds`||

|[Layout two-thirds / one-third](https://service-manual.nhs.uk/design-system/styles/layout/#two-thirds-one-third)|`nhsuk-layout-two-thirds-one-third`||



#### Typography



|Name|Shortcut|Notes|

|-------------------------|-------------------------|---|

|Caption|`nhsuk-caption`||

|[Font size override](https://service-manual.nhs.uk/design-system/styles/typography/#font-size)|`nhsuk-font-size`||

|[Font weight override](https://service-manual.nhs.uk/design-system/styles/typography/#font-weight)|`nhsuk-font-weight`||

|[Heading](https://service-manual.nhs.uk/design-system/styles/typography/#headings)|`nhsuk-heading`||

|[Links](https://service-manual.nhs.uk/design-system/styles/typography/#links)|`nhsuk-link`||

|[Lists](https://service-manual.nhs.uk/design-system/styles/typography/#lists)|`nhsuk-list`||

|[Lists – Bulleted](https://service-manual.nhs.uk/design-system/styles/typography/#bulleted-lists)|`nhsuk-list-bulleted`||

|[Lists – Numbered](https://service-manual.nhs.uk/design-system/styles/typography/#numbered-lists)|`nhsuk-list-numbered`||

|[Paragraph body text](https://service-manual.nhs.uk/design-system/styles/typography/#body)|`nhsuk-paragraph-body`||

|[Paragraph body text large](https://service-manual.nhs.uk/design-system/styles/typography/#lead-paragraph)|`nhsuk-paragraph-body-lead`||

|[Paragraph body text small](https://service-manual.nhs.uk/design-system/styles/typography/#body-small)|`nhsuk-paragraph-body-small`||

|[Section break](https://service-manual.nhs.uk/design-system/styles/typography/#section-break)|`nhsuk-section-break`||

|Visually hidden|`nhsuk-visually-hidden`|Creates a visually hidden `span`|



### Components



#### Form elements



|Name|Shortcut|Notes|

|-------------------------|-------------------------|---|

|Addresses|`nhsuk-address`||

|Bank details|`nhsuk-bank-details`||

|[Button](https://service-manual.nhs.uk/design-system/components/button/)|`nhsuk-button`||

|[Character count](https://service-manual.nhs.uk/design-system/components/character-count)|`nhsuk-character-count`||

|[Checkboxes](https://service-manual.nhs.uk/design-system/components/checkboxes/)|`nhsuk-checkboxes`||

|Checkbox or radio option|`nhsuk-option`|Use in conjunction with the `nhsuk-checkboxes` and `nhsuk-radios` Nunjucks snippets.|

|[Date input](https://service-manual.nhs.uk/design-system/components/date-input/)|`nhsuk-date`||

|Email address|`nhsuk-email`||

|[Error summary](https://service-manual.nhs.uk/design-system/components/error-summary/)|`nhsuk-error-summary`||

|[Fieldset](https://service-manual.nhs.uk/design-system/components/fieldset/)|`nhsuk-fieldset`||

|National insurance number|`nhsuk-nino`||

|[Radios](https://service-manual.nhs.uk/design-system/components/radios/)|`nhsuk-radios`||

|[Select](https://service-manual.nhs.uk/design-system/components/select/)|`nhsuk-select`||

|Select option|`nhsuk-select-option`|Use in conjunction with the `nhsuk-select` Nunjucks snippet.|

|Telephone number|`nhsuk-telephone`||

|[Text input](https://service-manual.nhs.uk/design-system/components/text-input/)|`nhsuk-input`||

|[Textarea](https://service-manual.nhs.uk/design-system/components/textarea/)|`nhsuk-textarea`||



#### Content presentation



|Name|Shortcut|Notes|

|-------------------------|-------------------------|---|

|[Care cards](https://service-manual.nhs.uk/design-system/patterns/help-users-decide-when-and-where-to-get-care)|`nhsuk-care-card`||

|[Details](https://service-manual.nhs.uk/design-system/components/details/)|`nhsuk-details`||

|[Do and don’t lists](https://service-manual.nhs.uk/design-system/components/do-and-dont-lists/)|`nhsuk-do-dont-list`||

|[Expander](https://service-manual.nhs.uk/design-system/components/expander/)|`nhsuk-expander`||

|[Images](https://service-manual.nhs.uk/design-system/components/images/)|`nhsuk-image`||

|[Inset text](https://service-manual.nhs.uk/design-system/components/inset-text/)|`nhsuk-inset-text`||

|[Summary list](https://service-manual.nhs.uk/design-system/components/summary-list)|`nhsuk-summary-list`||

|[Table](https://service-manual.nhs.uk/design-system/components/table/)|`nhsuk-table`||

|[Tabs](https://service-manual.nhs.uk/design-system/components/tabs/)|`nhsuk-tabs`||

|Tab item HTML|`nhsuk-tab-item`|Use in conjunction with the `nhsuk-tabs` snippet. This snippet can be used to encapsulate a tab panel.|

|[Tag](https://service-manual.nhs.uk/design-system/components/tag/)|`nhsuk-tag`||

|[Warning callout](https://service-manual.nhs.uk/design-system/components/warning-callout/)|`nhsuk-warning-callout`||



#### Navigation



|Name|Shortcut|Notes|

|-------------------------|-------------------------|---|

|[Action link](https://service-manual.nhs.uk/design-system/components/action-link/)|`nhsuk-action-link`||

|[Back link](https://service-manual.nhs.uk/design-system/components/back-link/)|`nhsuk-back-link`||

|[Breadcrumbs](https://service-manual.nhs.uk/design-system/components/breadcrumbs/)|`nhsuk-breadcrumbs`||

|[Contents list](https://service-manual.nhs.uk/design-system/components/contents-list/)|`nhsuk-contents-list`||

|[Footer](https://service-manual.nhs.uk/design-system/components/footer/)|`nhsuk-footer`||

|[Header](https://service-manual.nhs.uk/design-system/components/header/)|`nhsuk-header`||

|[Pagination](https://service-manual.nhs.uk/design-system/components/pagination/)|`nhsuk-pagination`||

|[Skip link](https://service-manual.nhs.uk/design-system/components/skip-link/)|`nhsuk-skip-link`||



## Dependencies

Using this extension depends on the installation of the [NHS.UK Frontend](https://www.npmjs.com/package/nhsuk-frontend) and [Nunjucks](https://www.npmjs.com/package/nunjucks) into your project.



## Support

This repository is maintained by Simon Whatley. If you’ve got a question or need support you can:



- Email [email protected] putting the repository name in the subject line.

- [View known issues on GitHub](https://github.com/simonwhatley/nhsuk-visual-studio-code-extension/issues).



## Contributing

If you’ve got an idea or suggestion you can:



- Email [email protected] putting the repository name in the subject line.

- [Create a GitHub issue](https://github.com/simonwhatley/nhsuk-visual-studio-code-extension/issues).



## Licence

Unless otherwise stated, this codebase is released under the [MIT License](https://github.com/simonwhatley/nhsuk-visual-studio-code-extension/blob/master/LICENSE). This covers both the codebase and any sample code in the documentation.