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 foundations and components as part of that. You can use the theme without Angular, if you wish, but you will require Sass.

Foundations

Our design system theme requires 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.