Giter Club home page Giter Club logo

govuk-design-system's Introduction

GOV.UK Design System


โš ๏ธ This project is still in early development, and is not yet ready for production use.


One place for service teams to find styles, components and patterns for designing government services.

Run locally

You'll need Git and Node.js installed to get this project running.

Note: You will need the active LTS (Long-term support) Node.js version for this project (as specified in .nvmrc)

Fork repository (optional)

If you're an external contributor make sure to fork this project first

Clone repository

git clone [email protected]:alphagov/govuk-design-system.git # or clone your own fork

cd govuk-design-system

Using nvm (optional)

If you work across multiple Node.js projects there's a good chance they require different Node.js and npm versions.

To enable this we use nvm (Node Version Manager) to switch between versions easily.

  1. install nvm
  2. Run nvm install in the project directory (this will use .nvmrc)

Install npm dependencies

npm install

Start a local server

This will build sources, serve pages and watch for changes.

npm start

Build

Build ./src to ./deploy/public

npm run build

Run the Sass linter

We are using the sass-lint plugin to lint the Sass files in source/stylesheets. You can run the linter from command line by running:

npm run lint

GOV.UK Frontend packages

Design System consumes GOV.UK Frontend packages via NPM. These are defined in the package.json file.


NOTE: For the time being we are consuming private packages. To access private packages, you will first need to log in to NPM with

npm login


Automated Checks

We're using GOV.UK PaaS for automated checks and production deployment.

When changes are pushed to GitHub Travis will:

  • run the tests
  • lint the Sass stylesheets in source/stylesheets
  • run the npm run build command to ensure that the site can be generated

If any of these fail, this will be reported in the GitHub status checks interface.

Automated Deployment

We're using Netlify to automate our deployment for development preview.

Master deploy

The master branch is published to govuk-design-system-preview.netlify.com.

Branch deploy

When a new branch is pushed to GitHub a preview website will be deployed. Branch deploys are published to a URL which includes the branch name as a prefix.

For example, if a branch is called staging, it will deploy to staging--govuk-design-system-preview.netlify.com.

Deploy preview

When a new pull request is raised a preview website will be deployed. A deploy generated from a pull request will building the site as it would be if the proposed changes were merged. Deploy Previews are published to a URL which has the prefix deploy-preview followed by the identifier number of the pull request.

For example, pull request #137 will automatically trigger a Deploy Preview at deploy-preview-137--govuk-design-system-preview.netlify.com. You will also be able to access the deploy preview URL from the govuk-design-system-ci's comment.

govuk-design-system's People

Contributors

36degrees avatar alex-ju avatar hannalaakso avatar ignaciaorellana avatar joelanman avatar nickcolley avatar nooshu avatar olliewilliams-ch avatar timpaul avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.