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 npm or yarn

npm install @angular/cdk @fortawesome/fontawesome-free

yarn add @angular/cdk @fortawesome/fontawesome-free

Add design system to your app using npm or yarn

npm install @ukho/design-system

yarn 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.