Overview

The front-end toolkit is a highly-modular design system for building web pages. It contains a collection of components and structures that can be assembled into more complex page layouts.

This guide contains real working examples, code snippets, documentation, and style guidelines.

Start by adding the following files to your page:

Main DUX Aegon styles/scripts libraries:

<link rel="stylesheet" href="http://localhost:3000/styles/aegon-library.css">
<script src="http://localhost:3000/scripts/aegon-library.js"></script>

Widgets, tools and additional styles library:

<link rel="stylesheet" href="http://localhost:3000/styles/toolkit.css">

Tools and additional scripts under ./src/asset/scripts/**:

<script src="http://localhost:3000/scripts/toolkit.js"></script>

Angular2 scripts and requirements:

<script src="http://localhost:3000/scripts/es6-shim.min.js"></script>
<script src="http://localhost:3000/scripts/angular2core.js"></script>
<script src="http://localhost:3000/scripts/aegon-angular2.js"></script>

Change http://localhost:3000 with your host or source host serving these files.


Color

$black
#1d1d1b
$dark_blue
#00304C
$white
#ffffff
$blue
#3395d3
$slightly_darker_blue
#007bc8
$fun_blue_approx
#2163ae
$blue_gray
#335970
$light_blue
#66b0de
$lighter_blue
#85BFE5
$slightly_lighter_blue
#99cae9
$pastel_light_blue
#D9EBF7
$lochmara_approx
#007ac7
$orange_highlight
#fcbd3e
$orange
#f9a600
Orange dark
#f39300
$grey
rgb(242,242,242)
$lighter_grey
#EFEBE7
$grey
#edebe5
$slightly_darker_grey
#e0e0e0
$dark_grey
#d8d7d1
$darker_grey
#8E8E8C
$pebble_grey
#333333
$light_green
#c8e7cc
$green
#49af57
$dark_green
#7FAE3F
$lighter_red
#f3e7e6
$light_red
#eacbca
$red
#C50B1F
$dark_red
#ca4642
$light_yellow
#fffce5
$yellow
#ffea53
$dark_yellow
#B0A126
$dark_pink
#C41F2C
$pink
#edd5d9

Typography

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam enim sunt sapiente molestias, sed dicta inventore consectetur beatae asperiores, aliquid laboriosam animi, praesentium repudiandae et, quam saepe sint cupiditate reiciendis.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6