@advancedco/design-system

The design system used for Advanced products and services.

Usage no npm install needed!

<script type="module">
  import advancedcoDesignSystem from 'https://cdn.skypack.dev/@advancedco/design-system';
</script>

README

Advanced Design System

The design system used for Advanced products and services.

This project was generated with Angular CLI.

We recommend you create your own Angular project and use our styles and components as part of that. You can use the styles without Angular, if you wish, but you will require Sass.

Styles

Our design system styles require you to install the fonts and icons it uses separately.

For quick installation, simply place this in the head of your index.html file:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<script src="https://kit.fontawesome.com/44397de72c.js" crossorigin="anonymous"></script>

You'll find all the Sass files you need in the assets folder to use our theme.

You can use the theme directly in your own Sass files:

@import "~@advancedco/design-system/src/assets/styles/all.scss";

or reference parts of it:

@import "~@advancedco/design-system/src/assets/styles/colours";

.header {
  background-color: $advanced-red;
}

Components

You'll find our Angular components in the elements directory of @advancedco/design-system module in your node_modules.

Simply copy them into your project and extend them as required.