Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/alphagov/govuk_elements

❗️GOV.UK Elements is deprecated, and will only receive major bug fixes and security patches.
https://github.com/alphagov/govuk_elements

deprecated govuk-design-system-team govuk-frontend portfolio

Last synced: about 2 months ago
JSON representation

❗️GOV.UK Elements is deprecated, and will only receive major bug fixes and security patches.

Host: GitHub
URL: https://github.com/alphagov/govuk_elements
Owner: alphagov
License: mit
Created: 2014-03-19T11:29:16.000Z (over 10 years ago)
Default Branch: master
Last Pushed: 2021-09-14T12:54:25.000Z (about 3 years ago)
Last Synced: 2024-07-01T09:36:02.581Z (3 months ago)
Topics: deprecated, govuk-design-system-team, govuk-frontend, portfolio
Language: HTML
Homepage: https://govuk-elements.herokuapp.com/
Size: 16.7 MB
Stars: 227
Watchers: 97
Forks: 90
Open Issues: 1
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt

Awesome Lists containing this project

README

        The GOV.UK Design System launched on 22 June 2018

===============

GOV.UK Elements:

- is no longer maintained

- will only be updated for major bug fixes and security patches

- does not meet the [Web Content Accessibility Guidelines (WCAG 2.1 level AA) accessibility standard](https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps#meeting-accessibility-requirements)

This framework will remain available in case you’re currently using it. To help your service meet accessibility requirements, you should use the [GOV.UK Design System](https://design-system.service.gov.uk/). You can [migrate to the Design System from GOV.UK Elements](https://frontend.design-system.service.gov.uk/migrating-from-legacy-products/).

GOV.UK elements ·

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![Greenkeeper badge](https://badges.greenkeeper.io/alphagov/govuk_elements.svg)](https://greenkeeper.io/)

===============

GOV.UK elements is three things:

1. [An online design guide](https://govuk-elements.herokuapp.com/), explaining how to make your service look consistent with the rest of GOV.UK.

2. An example of how to use the code in the [GOV.UK template](https://github.com/alphagov/govuk_template) and the [GOV.UK frontend toolkit](https://github.com/alphagov/govuk_frontend_toolkit).

3. An [npm package of the Sass files](https://www.npmjs.com/package/govuk-elements-sass).

# GOV.UK elements guide

[https://govuk-elements.herokuapp.com/](https://govuk-elements.herokuapp.com/).

# Using govuk-elements-sass

Installation and usage instructions can be found in the govuk-elements-sass [README](https://github.com/alphagov/govuk_elements/blob/master/packages/govuk-elements-sass/README.md).

## Running this site locally

If you would like to clone the repository and run it locally,

you will need [Node.js](https://nodejs.org/) (at least version v0.10.0).

Clone this repository

    git clone [email protected]:alphagov/govuk_elements.git

Install all dependencies

    npm install

Run the app

    npm start

Go to [localhost:3000](http://localhost:3000) in your browser.

## Running tests

To check the whole codebase, run:

    npm test

## Linting

### GOV.UK lint

[GOV.UK elements uses govuk-lint](https://github.com/alphagov/govuk-lint#sass), which uses [scss-lint](https://github.com/brigade/scss-lint) as its scss linter.

### Standard JavaScript

GOV.UK elements uses [standardjs](https://standardjs.com/), an opinionated JavaScript linter. All JavaScript files follow its conventions.

Both linters run on CI to ensure that new pull requests are in line with them.

## Running Wraith to compare changes

GOV.UK elements uses Wraith so that regressions can be easily spotted.

This needs to be run from the Wraith directory `/tests/wraith` and some dependencies need to be installed on the local machine first.

1. Install Wraith and its dependencies.

      

        gem install wraith

        

        brew install phantomjs

        

        brew install imagemagick

2. Take a baseline of the current version.

On master run:

        wraith history config.yaml

3. Switch to your feature branch and make changes.

On your feature branch run:

        wraith latest config.yaml

## Releasing a new version

Follow the instructions in [CONTRIBUTING.md](https://github.com/alphagov/govuk_elements/blob/master/CONTRIBUTING.md).

## Pattern libraries using GOV.UK elements

Here are examples of service-specific pattern libraries using GOV.UK elements.

* [Rural Payments style guide](http://rural-payments-styleguide.herokuapp.com) | [Source Code](https://github.com/Defra/rural-payments-styleguide/)

* [Land Registry pattern library](http://land-registry-elements.herokuapp.com) | [Source Code](https://github.com/LandRegistry/land-registry-elements)

* [Digital Marketplace frontend toolkit](http://alphagov.github.io/digitalmarketplace-frontend-toolkit/) | [Source Code](https://github.com/alphagov/digitalmarketplace-frontend-toolkit)

## Contributing

You can find contribution guidelines in [CONTRIBUTING.md](https://github.com/alphagov/govuk_elements/blob/master/CONTRIBUTING.md)