UKHO Design System
This repository contains the source for the UKHO's design system, our library of UI components that is used in our front end designs.
Getting Started - Angular
Prerequisites
Installation
- For new projects create a brand new angular app following instructions here
- Add design system dependencies to your app using
npmoryarn
npm install @angular/cdk @fortawesome/fontawesome-freeyarn add @angular/cdk @fortawesome/fontawesome-free- Add design system to your app using
npmoryarn
npm install @ukho/design-systemyarn add @ukho/design-system- Add design system stylesheet globally in your app
// styles.scss
...
@use '~@fortawesome/fontawesome-free/scss/fontawesome';
@use '~@fortawesome/fontawesome-free/scss/solid';
@use '~@fortawesome/fontawesome-free/scss/brands';
@use '~@ukho/design-system/styles/core.scss';- Add design system assets to your app
// angular.json
...
"assets": [
... // Import your other assets as normal
{
"glob": "**/*",
"input": "./node_modules/@ukho/design-system/assets",
"output": "./assets"
}
],You are now ready to use the design system!
Usage
Below is an example of how to import the button module into your application.
- Import modules as you need them
// app.module.ts
...
import { ButtonModule } from "@ukho/design-system";
...
@NgModule({
imports: [..., ButtonModule]
})- Add component selector to html
<!--app.component.html-->
<ukho-button>Hello Button</ukho-button>Assets
By importing the assets from the design system following the instructions listed in the installation section you should have access to all the assets e.g. logos. Components that require logos all have the default paths set however there are occasions that these need to be overridden. If you have not changed the default assets path they should be available on the path: /assets/sub-folder/asset.file. e.g. /assets/svg/UKHO stacked logo.svg
Getting Started - CDN
We understand that not everyone can use angular when building their projects, so we offer a CSS only alternative which encompasses all of the styles in the design system.
Prerequisites
- Add the fontawesome stylesheet to your html
<head>
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet" />
<!--load all styles -->
</head>Installation
- Add the design system stylesheet to your html
<head>
<!-- fontawesome styles -->
<link href="https://unpkg.com/@ukho/design-system@latest/styles/css/ukho.min.css" rel="stylesheet" />
<!--load all styles -->
</head>We recommend pinning the version of the css that you are using to avoid be automatically pulling breaking changes. To do this instead of using @latest, use @{npm package version} instead. e.g @2.0.0.
Usage
Below is an example of how to add a button into your website.
-
Navigate to the design system show case site and locate the component you wish use
-
Add that snippet your html
<ukho-button><button>Hello button!</button></ukho-button>Contributing
If you would like to contribute to the design system please read the CONTRIBUTING File.