4.7.1 • Published 2 years ago

@ukho/design-system v4.7.1

Weekly downloads
52
License
British Crown Cop...
Repository
github
Last release
2 years ago

UKHO Design System

Design System CI Design System Version

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

  1. For new projects create a brand new angular app following instructions here
  2. 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
  1. Add design system to your app using npm or yarn
npm install @ukho/design-system
yarn add @ukho/design-system
  1. 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';
  1. 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.

  1. Import modules as you need them
// app.module.ts
...
import { ButtonModule } from "@ukho/design-system";
...

@NgModule({
  imports: [..., ButtonModule]
})
  1. 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

  1. Add the fontawesome stylesheet to your html
<head>
  <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet" />
  <!--load all styles -->
</head>

Installation

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

  1. Navigate to the design system show case site and locate the component you wish use

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

filesizehighlight.jsnormalize.csstslib
@infinitebrahmanuniverse/nolb-_uk@everything-registry/sub-chunk-963@zalastax/nolb-_uk
4.7.1

2 years ago

4.7.0

2 years ago

4.6.2

2 years ago

4.6.1

2 years ago

4.6.0

2 years ago

4.5.2

2 years ago

4.5.1

2 years ago

4.5.0

2 years ago

4.4.1

2 years ago

4.4.0

2 years ago

4.4.2

2 years ago

4.1.0

2 years ago

4.3.0

2 years ago

4.2.1

2 years ago

4.1.2

2 years ago

4.2.0

2 years ago

4.1.1

2 years ago

3.3.3

2 years ago

3.3.2

3 years ago

4.0.1

2 years ago

4.0.0

2 years ago

3.3.1

3 years ago

3.3.0

3 years ago

3.2.0

3 years ago

3.1.0

3 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.4.0

3 years ago

2.3.0

3 years ago

2.2.0

3 years ago

2.1.0

3 years ago

2.0.0-next.15

3 years ago

2.0.0-next.16

3 years ago

2.0.0

3 years ago

2.0.0-next.13

3 years ago

2.0.0-next.14

3 years ago

2.0.0-next.11

3 years ago

2.0.0-next.12

3 years ago

2.0.0-next.10

3 years ago

2.0.0-next.9

3 years ago

2.0.0-next.8

3 years ago

2.0.0-next.7

3 years ago

2.0.0-next.6

3 years ago

2.0.0-next.5

3 years ago

2.0.0-next.4

3 years ago

2.0.0-next.3

3 years ago

2.0.0-next.2

3 years ago

2.0.0-next.1

3 years ago