@uktrade/great-design-system
Advanced tools
The Design System for Business provides markup, SCSS and JS in the form of layouts, styling and components. Everything you need to build a front end in your application that is accessible, consistent and efficient.
The application serves two main purposes:
Ensure you have the following installed:
To install nvm, follow the instructions from the nvm repository.
Once nvm is installed, you can use it to install the required Node.js version:
nvm install 20.9.0
nvm use 20.9.0
Clone the repository:
git clone https://github.com/uktrade/great-design-system.git
cd great-design-system
Install dependencies:
npm install
The static site provides documentation for the design system and is generated using Eleventy (11ty).
Start development server:
npm run dev
This runs the development server for Eleventy and watches for changes using Webpack.
Build the static site:
npm run build
This script cleans the dist directory and runs the Eleventy and Webpack build processes.
The design system frontend code is designed to be published to npm for consumption in other applications. Components are written in Nunjucks.
Environment Variables:
Create a .env file in the root of your project and add your Figma access token and file ID:
ACCESS_TOKEN=your_figma_access_token
FILE_ID=your_figma_file_id
Fetch Figma design tokens:
npm run figma:token-fetch
This script fetches design tokens from Figma and generates SCSS files.
Publish the codebase to npm:
npm run npm:package
This script cleans the dist directory, builds the Webpack bundles, copies components and SCSS files, and prepares the package for publishing.
Lint JavaScript files:
npm run lint:js
Lint SCSS files:
npm run lint:scss
This project is licensed under the MIT License.
FAQs
## Overview
The npm package @uktrade/great-design-system receives a total of 49 weekly downloads. As such, @uktrade/great-design-system popularity was classified as not popular.
We found that @uktrade/great-design-system demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.