MODULE-TYPO

- Sass set-up
- md-list
- md-theming (install)

UI/WebServerResources/scss/components/_components/_articles-list.scss

@@ -0,0 +1,55 @@
+/**
+*
+* Articles list
+*
+**/
+
+.articles-list {
+  padding-left: 0;
+}
+
+.articles-list__item {
+
+  padding-bottom: $lineHeight * 2;
+
+  &:last-child {
+    padding-bottom: $lineHeight * 2 + 1;
+  }
+
+  padding-left: 0;
+
+  &::before {
+    content: "";
+    display: block;
+    width: 40%;
+    height: 1px;
+    box-shadow: inset 0 1px 0 0 $colorGrayKeyline;
+    margin-right: 0;
+    margin-left: 30%;
+  }
+
+  h3 {
+    a:hover {
+      text-decoration: none;
+    }
+  }
+
+  p {
+    margin-top: $lineHeight;
+    margin-bottom: $lineHeight;
+  }
+
+  &:first-child {
+    padding-top: 0;
+
+    @include medium {
+      padding-top: $lineHeight - 2;
+    }
+
+    &::before {
+      display: none;
+    }
+  }
+
+}
+

UI/WebServerResources/scss/components/_components/_breadcrumb.scss

@@ -0,0 +1,31 @@
+/**
+*
+* Breadcrumb
+*
+**/
+
+.breadcrumbs {
+  display: none;
+  @include medium {
+    display: block;
+  }
+
+  position: relative;
+  z-index: 1;
+}
+
+.breadcrumbs p {
+  @include type--small;
+  padding-top: $lineHeight;
+}
+
+.breadcrumbs__link {
+  @include type--small;
+  color: black;
+  font-weight: 400;
+  padding-top: 0;
+
+  @include medium {
+    padding-top: 0;
+  }
+}

UI/WebServerResources/scss/components/_components/_button.scss

@@ -0,0 +1,56 @@
+/**
+*
+* Button
+*
+**/
+
+.button {
+  display: inline-block;
+  padding: (($lineHeight / 2) - 1) 32px;
+  margin-bottom: $lineHeight / 2;
+  margin-top: $lineHeight / 2;
+  min-height: $lineHeight;
+
+  text-align: center;
+
+  font-family: $fontHighlight;
+  font-weight: 600;
+  text-decoration: none;
+
+  outline: 0;
+
+  transition: none;
+
+  &:hover {
+    background: #4d4d4d;
+    color: #ffffff;
+    border: 1px solid #4d4d4d;
+    text-decoration: none;
+  }
+}
+
+// Mixin to create buttons
+@mixin style-button($color, $textColor, $isInverted: false) {
+
+  background: $color;
+  color: $textColor;
+  border: 1px solid darken($color, 10%);
+
+  @if $isInverted { border-color: transparent;}
+}
+
+
+.button--primary {
+  @extend .button;
+  @include style-button(#4285f4, #ffffff);
+}
+
+.button--secondary {
+  @extend .button;
+  @include style-button(#ffffff, $colorBlue);
+}
+
+.button--secondary-variation {
+  @extend .button;
+  @include style-button(#ffffff, $colorBlue, true);
+}

UI/WebServerResources/scss/components/_components/_column-list.scss

@@ -0,0 +1,42 @@
+/**
+*
+* Column list
+*
+**/
+
+.columns-list-wrapper {
+  @include wide {
+    margin-right: $mediumColWidth;
+  }
+
+}
+
+.list--columns {
+  border-bottom: 1px solid #ccc;
+  padding-bottom: $lineHeight - 1;
+  margin-bottom: 1px;
+
+  @include medium {
+    column-count: 2;
+    column-rule: 0 none transparent;
+    column-gap: 0;
+  }
+
+  & li,
+  & .columns-list-item {
+    @include type--small;
+    padding: 0;
+  }
+
+  & a {
+    display:  block;
+    position: relative;
+    padding-left: 39px;
+
+    &::before {
+      line-height: 26px;
+    }
+  }
+
+}
+

UI/WebServerResources/scss/components/_components/_grid.scss

@@ -0,0 +1,144 @@
+/**
+*
+* Grid
+*
+**/
+
+
+@include medium-only {
+  // Generating grid classes for medium view
+  @for $i from 1 through $mediumColCount {
+    .g-medium--#{$i} {
+      @include rule--col(medium);
+      width: ($mediumColWidth*$i) + ($mediumGutterWidth*($i + -1));
+      @if $i == $mediumColCount { margin-right: 0; }
+    }
+
+    @if $i < $mediumColCount {
+      .g-medium--push-#{$i} {
+        margin-left: ($mediumColWidth*$i) + ($mediumGutterWidth*$i);
+      }
+      .g-medium--pull-#{$i} {
+        margin-right: ($mediumColWidth*$i) + ($mediumGutterWidth*$i);
+      }
+    }
+  }
+
+  .g-medium--full {
+    @include rule--col(medium);
+    margin-right: 0;
+    width: 100%;
+  }
+
+  .g--third {
+    @include rule--col(medium);
+    width: $mediumColWidth;
+  }
+
+  .g--half,
+  .g-medium--half {
+    @include rule--col(medium);
+    width: 50% - $mediumGutterWidth/2;
+  }
+
+  .g-medium--last { margin-right: 0; }
+  .g-medium--last + .g-medium--half { clear: left; }
+
+  .g--pull-half { margin-right: 50% + $mediumGutterWidth/2; }
+}
+
+
+@include wide {
+  // Generating grid classes for wide view
+  @for $i from 1 through $wideColCount {
+    .g-wide--#{$i} {
+      @include rule--col(wide);
+      width: ($wideColWidth*$i) + ($wideGutterWidth*($i + -1));
+      @if $i == $wideColCount { margin-right: 0; }
+    }
+
+    @if $i < $wideColCount {
+      .g-wide--push-#{$i} {
+        margin-left: ($wideColWidth*$i) + ($wideGutterWidth*$i);
+      }
+      .g-wide--pull-#{$i} {
+        margin-right: ($wideColWidth*$i) + ($wideGutterWidth*$i);
+      }
+    }
+  }
+
+  .g-wide--last { margin-right: 0; }
+
+  .g-wide--full {
+    @include rule--col(wide);
+    margin-right: 0;
+    width: 100%;
+  }
+
+  .g--third {
+    @include rule--col(wide);
+    width: 30.8%;
+  }
+
+  .g--half,
+  .g-wide--half {
+    @include rule--col(wide);
+    width: 50% - $wideGutterWidth/2;
+  }
+
+  .g--pull-half { margin-right: 50% + $wideGutterWidth/2; }
+}
+
+
+// This is a global 'last' class
+// to be used with global grid classes, such as 'half' or 'third'
+// Example usage:
+//  <div class="third"></div>
+//  <div class="third"></div>
+//  <div class="third last"></div>
+.g--last { margin-right: 0; }
+
+
+// This is a global 'centered' class
+.g--centered {
+  float: none; // reset float to none so we can center it
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// This is a grid overlay
+// Its purpose is to show users our grid system
+// It becomes visible when a class 'debug' is added to the body
+.grid-overlay {
+
+  display: none;
+  pointer-events: none;
+
+  // Only show when parents (body) has debug class
+  .debug & {
+    @include container(true);
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    display: block;
+
+    [class*="g-"] {
+      height: 100%;
+      background-color: rgba(lighten(#000, 35%), .2);
+    }
+
+    @include medium-only {
+      .g-wide--last {
+        display: none;
+      }
+    }
+
+    @include small-only {
+      display: none;
+    }
+  }
+}

UI/WebServerResources/scss/components/_components/_guides-list.scss

@@ -0,0 +1,78 @@
+/**
+*
+* Guides List
+*
+**/
+
+
+.guides-list {
+  overflow: hidden;
+
+  @include medium {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    padding-top: $lineHeight*2;
+  }
+}
+
+.guides-list__item {
+  padding: 0;
+  background: #ffffff;
+  margin-top: $lineHeight;
+  margin-bottom: 0;
+
+  @include medium {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+
+  h3 {
+    margin: 0 32px;
+  }
+
+  p {
+    margin: $lineHeight 32px 0;
+  }
+
+  .primary-content {
+    @include medium {
+      flex: 1;
+    }
+  }
+
+  .secondary-content {
+    position: relative;
+    // background: #f5f5f5;
+    margin-top: ($lineHeight*2) - 1;
+    border-top: 1px solid $colorGrayKeyline;
+
+    @include medium {
+      width: 100%; // needed due to parent being flex
+    }
+
+    .icon-circle {
+      position: absolute;
+      top: -$lineHeight - 2;
+      left: 50%;
+      margin-left: -21px;
+      border: 2px solid #ffffff;
+
+      & i {
+        font-size: 23px;
+      }
+    }
+  }
+
+  ol {
+    margin: $lineHeight 0 0;
+    padding: $lineHeight*2 0 $lineHeight*2;
+    margin-top: 0;
+  }
+
+  &::before {
+    display: none;
+  }
+}

UI/WebServerResources/scss/components/_components/_icon-circle.scss

@@ -0,0 +1,110 @@
+/**
+*
+* Icon Circle
+*
+**/
+
+.icon-circle,
+.icon-circle--large {
+  height: 0;
+  width: 0;
+  background: $colorGray;
+  display: block;
+  position: relative;
+  border-radius: 100%;
+  font-size: 0;
+  padding: 22px; // Breaks baseline grid
+  margin: 4px auto; // Adds margin top/bottom to fix baseline grid ;)
+
+  i,
+  span {
+    position: absolute;
+    line-height: 0px;
+    top: 50%;
+    width: 100%;
+    left: 0;
+    text-align: center;
+    color: #ffffff;
+    font-size: $fontLarge;
+  }
+
+  span {
+    font-family: $fontHighlight;
+    font-size: $fontLarge;
+    font-weight: 700;
+
+    @include medium {
+      font-size: $fontXLarge;
+    }
+  }
+}
+
+.icon-circle--large {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: $lineHeight;
+  position: relative;
+
+  i {
+    font-size: $fontLarge;
+
+    @include medium {
+      font-size: $fontXLarge;
+    }
+  }
+
+  @include medium {
+    padding: ($lineHeight + $lineHeight/2) - 2;
+    border: 2px solid #ffffff;
+
+    a & {
+      padding: ($lineHeight + $lineHeight/2) - 1;
+
+      box-shadow: inset 0px 0px 0px 1px rgba(#ffffff, .42);
+      border: 1px solid;
+
+      // demo transition
+      transition: all 100ms linear;
+      transform: translateZ(0); // kick in hardware acceleration
+    }
+
+    .no-touch a:hover & {
+      box-shadow: inset 0px 0px 0px 1px #ffffff;
+      transform: scale(1.1);
+    }
+  }
+
+}
+
+.icon-circle--nav {
+  height: 0;
+  width: 0;
+  background: $colorGray;
+  display: block;
+  position: relative;
+  border-radius: 100%;
+  font-size: 0;
+  padding: $lineHeight/2;
+  margin: 0 auto;
+
+  @include medium {
+    padding: 22px; // Breaks baseline grid
+    margin-top: 4px; // Adds margin top/bottom to fix baseline grid ;)
+    margin-bottom: 4px; // Adds margin top/bottom to fix baseline grid ;)
+  }
+
+  i {
+    position: absolute;
+    line-height: 1px;
+    top: 50%;
+    width: 100%;
+    left: 0;
+    text-align: center;
+    color: #ffffff;
+    font-size: $fontBase;
+
+    @include medium {
+      font-size: $fontLarge;
+    }
+  }
+}

UI/WebServerResources/scss/components/_components/_icons.scss

@@ -0,0 +1,147 @@
+@font-face {
+  font-family: icons;
+  src: url(../images/icons/icons.eot);
+  src: url(../images/icons/icons.eot?#iefix) format('embedded-opentype'),
+    url(../images/icons/icons.woff2) format('woff2'),
+    url(../images/icons/icons.woff) format('woff'),
+    url(../images/icons/icons.ttf) format('truetype'),
+    url(../images/icons/icons.svg?#icons) format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.icon {
+  font-family: 'icons';
+  display: inline-block;
+  vertical-align: top;
+  line-height: 1;
+  font-weight: normal;
+  font-style: normal;
+  speak: none;
+  text-decoration: inherit;
+  text-transform: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Icons
+$icon-bullet: '\e001';
+.icon-bullet::before {
+  content:"\e001";
+}
+
+$icon-chevron-down: '\e002';
+.icon-chevron-down::before {
+  content: '\e002';
+}
+
+$icon-chevron-large: '\e003';
+.icon-chevron-large::before {
+  content: '\e003';
+}
+
+$icon-chevron-left: '\e004';
+.icon-chevron-left::before {
+  content: '\e004';
+}
+
+$icon-chevron-right: '\e005';
+.icon-chevron-right::before {
+  content: '\e005';
+}
+
+$icon-chevron-up: '\e006';
+.icon-chevron-up::before {
+  content: '\e006';
+}
+
+$icon-close: '\e007';
+.icon-close::before {
+  content: '\e007';
+}
+
+$icon-cog: '\e008';
+.icon-cog::before {
+  content: '\e008';
+}
+
+$icon-diamond: '\e009';
+.icon-diamond::before {
+  content: '\e009';
+}
+
+$icon-exclamation: '\e00a';
+.icon-exclamation::before {
+  content: '\e00a';
+}
+
+$icon-google-dev: '\e00b';
+.icon-google-dev::before {
+  content: '\e00b';
+}
+
+$icon-hash: '\e00c';
+.icon-hash::before {
+  content: '\e00c';
+}
+
+$icon-introduction-to-media: '\e00d';
+.icon-introduction-to-media::before {
+  content: '\e00d';
+}
+
+$icon-lessons: '\e00e';
+.icon-lessons::before {
+  content: '\e00e';
+}
+
+$icon-menu: '\e00f';
+.icon-menu::before {
+  content: '\e00f';
+}
+
+$icon-minus: '\e010';
+.icon-minus::before {
+  content: '\e010';
+}
+
+$icon-multi-device-layouts: '\e011';
+.icon-multi-device-layouts::before {
+  content: '\e011';
+}
+
+$icon-performance: '\e012';
+.icon-performance::before {
+  content: '\e012';
+}
+
+$icon-plus: '\e013';
+.icon-plus::before {
+  content: '\e013';
+}
+
+$icon-question: '\e014';
+.icon-question::before {
+  content: '\e014';
+}
+
+$icon-slash: '\e015';
+.icon-slash::before {
+  content: '\e015';
+}
+
+$icon-star: '\e016';
+.icon-star::before {
+  content: '\e016';
+}
+
+$icon-tick: '\e017';
+.icon-tick::before {
+  content: '\e017';
+}
+
+$icon-user-input: '\e018';
+.icon-user-input::before {
+  content: '\e018';
+}

UI/WebServerResources/scss/components/_components/_link.scss

@@ -0,0 +1,21 @@
+/**
+*
+* Link
+*
+**/
+
+a {
+  color: $colorBlue;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+.cta--primary {
+  @include style-cta($colorBlue, $icon-chevron-right);
+}
+
+.cta--secondary {
+  @include style-cta($colorBlue);
+}

UI/WebServerResources/scss/components/_components/_list.scss

@@ -0,0 +1,336 @@
+/**
+*
+* List
+*
+**/
+
+ul,
+ol {
+  list-style: none;
+  margin: 0;
+
+  @include small-only {
+    padding-left: 0;
+  }
+}
+
+ul li {
+  position: relative;
+  padding-left: 16px;
+  @include bullet-type("", icon-bullet);
+
+  &::before {
+    font-size: 4px;
+  }
+}
+
+ol {
+  counter-reset: list;
+  > li {
+    @include numbered-list;
+    position: relative;
+    padding-left: 32px;
+
+    // This selected every adjacent <li>
+    // from the 10th and overrides the
+    // content property of each
+    &:nth-child(10n) ~ li::before,
+    &:nth-child(10n)::before {
+      content: counter(list);
+    }
+
+  }
+}
+
+ul ol,
+ol ul {
+  padding-top: 0;
+}
+
+
+/*==========  LIST LINKS  ==========*/
+
+ul.list-links {
+  li::before {
+    display: none;
+  }
+  a {
+    @include bullet-type("", icon-bullet);
+
+    &::before {
+      font-size: 4px;
+    }
+
+    font-weight: 400;
+  }
+
+  &.list-links--primary {
+    a {
+      @include bullet-type("", icon-chevron-right);
+      font-weight: 400;
+      font-family: $fontHighlight;
+      line-height: 1; // fixes baseline grid alignment
+      text-decoration: none;
+    }
+  }
+}
+
+ol.list-links {
+  li {
+    &::before {
+      display: none;
+    }
+
+    a {
+      display: inline-block;
+      @include numbered-list;
+      font-weight: 300;
+    }
+
+    &:nth-child(10n) ~ li a::before,
+    &:nth-child(10n) a::before {
+      content: counter(list);
+    }
+  }
+
+  &.list-links--secondary {
+    a::before {
+      display: none;
+    }
+  }
+}
+
+.list-links--secondary {
+  @include type--base;
+  padding-left: 0;
+
+  li {
+    padding-left: 0;
+  }
+}
+
+/*==========  ANCHOR LIST  ==========*/
+
+.list-anchor {
+  padding-left: 0;
+
+  li {
+    @include type--base;
+    padding-top: 0;
+    padding-left: 0;
+
+    &::before {
+      display: none
+    }
+
+  }
+
+  a {
+    @include bullet-type("", icon-bullet);
+    line-height: 1; // fixes baseline grid alignment
+    display: inline-block;
+    padding-left: 16px;
+
+    &::before {
+      font-size: 4px;
+    }
+  }
+}
+
+/*==========  SMALL LIST  ==========*/
+
+.list-small {
+
+  li {
+    @include medium {
+      @include type--small;
+      padding-top: 0;
+    }
+  }
+}
+
+/*==========  CENTERED LIST  ==========*/
+
+.list-centered {
+  text-align: center;
+  padding-left: 0;
+}
+
+/*==========  FEATURED LIST  ==========*/
+
+.featured-list {
+  padding-top: $lineHeight * 3;
+  padding-bottom: $lineHeight * 3;
+}
+
+.featured-list__item {
+  background: #ffffff;
+  padding-left: 0;
+  padding-top: $lineHeight;
+  padding-bottom: $lineHeight;
+
+  @include medium {
+    min-height: $lineHeight * 13;
+    padding: $lineHeight * 2 32px;
+  }
+
+  margin-top: $lineHeight;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  p {
+    margin-bottom: $lineHeight;
+  }
+}
+
+.featured-list__img-wrapper {
+  display: none;
+  position: relative;
+  padding-top: $lineHeight;
+  margin: 0 -5%;
+
+  @include medium {
+    display: block;
+    padding-top: 0;
+    margin: 0;
+  }
+}
+
+.featured-list__img {
+  @include medium {
+    padding-top: 60.8%;
+    padding-bottom: 0;
+    height: 0;
+    overflow: hidden;
+    position: absolute;
+    width: 100%;
+
+  }
+
+  img {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+
+    @include medium {
+      margin: 0;
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: 100%;
+      left: 0;
+    }
+  }
+}
+
+/*==========  RELATED GUIDES LIST  ==========*/
+.related-guides-list {
+  font-family: $fontHighlight;
+  padding-top: 0;
+  padding-left: 0;
+
+  @include medium {
+    padding-top: $lineHeight
+  }
+
+  @include wide {
+    padding-top: 0
+  }
+
+  p {
+    padding-top: 0;
+  }
+
+  .tag {
+    padding-top: 0;
+  }
+
+  li {
+    padding-top: $lineHeight;
+    padding-bottom: $lineHeight - 1;
+    border-bottom: 1px solid $colorGrayKeyline;
+
+    &:last-child {
+      border-color: transparent;
+    }
+
+    @include medium {
+      padding-top: 0;
+      padding-bottom: 0;
+      border-color: transparent;
+    }
+  }
+}
+
+/*==========  LIST RESET  ==========*/
+
+.list--reset {
+  padding-left: 0;
+
+  li {
+    padding-left: 0;
+  }
+
+  &.list-links a::before,
+  & li::before {
+    display: none !important; // Fine to use !important when we are forcing an override
+  }
+}
+
+
+/*==========  LESSONS  ==========*/
+.list-lessons {
+  padding-left: 0;
+
+  & a {
+    color: #ffffff;
+  }
+
+  & .current {
+    &,
+    a {
+      text-decoration: none;
+      cursor: default;
+    }
+
+    & .icon {
+      font-size: $fontSmall;
+      display: inline-block;
+      background: rgba(#000000, .2);
+      border-radius: 100%;
+      width: 26px;
+      line-height: 26px;
+      text-align: center;
+      margin-left: 7px;
+    }
+  }
+
+}
+
+
+/*==========  GUIDES INTO - used on homepage  ==========*/
+.list-guides-intro {
+  margin-bottom: $lineHeight*2;
+
+  @include small-only {
+    padding-top: $lineHeight*2;
+  }
+
+  li {
+    border-bottom: 1px solid $colorGrayKeyline;
+    padding-bottom: ($lineHeight*2) - 1;
+    margin-bottom: ($lineHeight*2);
+
+    @include medium {
+      border-color: transparent;
+      padding-bottom: 0;
+    }
+
+    &:last-child {
+      border-bottom: transparent;
+      margin-bottom: 0;
+    }
+  }
+}

UI/WebServerResources/scss/components/_components/_media.scss

@@ -0,0 +1,19 @@
+/**
+*
+* Media - imgs/videos
+*
+**/
+
+img,
+video,
+object {
+  max-width: 100%;
+}
+
+img {
+
+  .content & {
+    margin-top: $lineHeight;
+    margin-bottom: $lineHeight;
+  }
+}

UI/WebServerResources/scss/components/_components/_subsection-title.scss

@@ -0,0 +1,16 @@
+/**
+*
+* subsection__title
+*
+**/
+
+.subsection-title {
+  color: $colorGrayDark;
+  margin-top: $lineHeight * 2;
+}
+
+.subsection-number {
+  @include type--base;
+  padding-top: 0;
+  display: block;
+}

UI/WebServerResources/scss/components/_components/_table.scss

@@ -0,0 +1,158 @@
+/**
+*
+* Table
+*
+**/
+
+table {
+  margin-top: $lineHeight;
+  width: 100%;
+
+  thead {
+    background: $colorBlue;
+    color: #ffffff;
+  }
+
+  th {
+    text-align: center;
+    display: none;
+    font-family: $fontHighlight;
+    @include type--medium;
+  }
+
+  tr {
+    @include medium {
+      border-bottom: 1px solid #ffffff;
+    }
+  }
+
+  tbody {
+    background: $colorGrayBackground;
+  }
+
+  td {
+    display: block;
+    padding-top: $lineHeight/2;
+    padding-bottom: $lineHeight/2;
+
+    // This is to re-plicate the table-headers for mobile
+    &::before {
+      content: attr(data-th) " :";
+      display: inline-block;
+      color: #ffffff;
+      background: $colorBlue;
+      border-right: 2px solid #ffffff;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 100px;
+      max-height: 100%;
+      font-family: $fontHighlight;
+      font-size: 16px;
+      font-weight: 400;
+      padding-left: $lineHeight/2;
+      padding-top: $lineHeight/2;
+
+      @include medium {
+        display: none;
+      }
+    }
+  }
+
+  th,
+  td {
+    position: relative;
+    padding-left: 140px;
+
+    @include medium {
+      display: table-cell;
+    }
+  }
+
+  th {
+    @include medium {
+      padding: $lineHeight;
+      padding-top: 13px;
+      padding-bottom: $lineHeight/2 - 1;
+    }
+  }
+
+  td {
+    @include medium {
+      padding: $lineHeight;
+      padding-bottom: $lineHeight - 1;
+    }
+  }
+}
+
+td:last-child::after {
+  content: "";
+  display: block;
+  background: #ffffff;
+  height: 1px;
+  left: 0;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  @include medium {
+    display: none;
+  }
+}
+
+.table-2 {
+  col {
+    width: $mediumContainer / 2;
+    @include wide {
+      width: $wideContainer / 2;
+    }
+  }
+
+  th,
+  td {
+    @include medium {
+      &:first-child {
+        border-right: 2px solid #ffffff;
+      }
+    }
+  }
+}
+
+.table-3 {
+  col {
+    width: $mediumContainer / 3;
+    @include wide {
+      width: $wideContainer / 3;
+    }
+  }
+
+  th,
+  td {
+    @include medium {
+      &:nth-child(2) {
+        border-left: 2px solid #ffffff;
+        border-right: 2px solid #ffffff;
+      }
+    }
+  }
+}
+
+.table-4 {
+  col {
+    width: $mediumContainer / 4;
+    @include wide {
+      width: $wideContainer / 4;
+    }
+  }
+
+  th,
+  td {
+    @include medium {
+      &:nth-child(2),
+      &:nth-child(3) {
+        border-left: 2px solid #ffffff;
+        border-right: 2px solid #ffffff;
+      }
+    }
+  }
+}

UI/WebServerResources/scss/components/_components/_typography.scss

@@ -0,0 +1,52 @@
+/**
+*
+* Typography
+*
+**/
+
+// Just normalizing text
+// Recommend using padding instead of margin
+h1, h2, h3, h4, h5, p {
+  margin: 0;
+}
+
+// Definitions
+.small,
+small {
+  @include type--small;
+}
+
+.base,
+p,
+ul,
+ol {
+  @include type--base;
+}
+
+.medium,
+h4 {
+  @include type--medium;
+}
+
+.large,
+h3 {
+  @include type--large;
+}
+.xlarge,
+h2 {
+  @include type--xlarge;
+}
+
+.xxlarge,
+h1 {
+  @include type--xxlarge;
+}
+
+.huge {
+  @include type--huge;
+}
+
+
+li > p {
+  padding-top: 0;
+}

UI/WebServerResources/scss/components/_modules/_article-nav.scss

@@ -0,0 +1,88 @@
+/**
+*
+* Article nav
+*
+**/
+
+.article-nav {
+  overflow: hidden;
+  position: relative;
+
+  &::before {
+    content: '';
+    border-left: 2px solid $colorGrayKeyline;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 50%;
+  }
+}
+
+.article-nav-link {
+  padding: $lineHeight 32px;
+  float: left;
+  width: 50%;
+  position: relative;
+
+  &::before{
+    position: absolute;
+    top: 21px;
+    font-family: $fontHighlight;
+    font-size: $fontMedium;
+    font-weight: 400;
+
+    @include medium {
+      top: 25px;
+      font-size: $fontLarge;
+      display: block;
+      padding: 13px 10px;
+      color: #ffffff;
+      background: $colorBlue;
+    }
+  }
+}
+
+.article-nav p {
+  padding: 0;
+  margin: 0;
+}
+
+.article-nav-link--prev {
+  text-align: right;
+  // border-right-width: 1px;
+
+  &::before {
+    font-family: $fontIcon;
+    @extend .icon-chevron-left::before;
+    left: 32px;
+  }
+
+  p {
+    @include medium {
+      padding-left: 52px;
+    }
+  }
+}
+
+.article-nav-link--next {
+  // border-left-width: 1px;
+
+  &::before {
+    font-family: $fontIcon;
+    @extend .icon-chevron-right::before;
+    right: 32px;
+  }
+
+  p {
+    @include medium {
+      padding-right: 52px;
+    }
+  }
+}
+
+.article-nav-count {
+  @include type--large;
+  font-weight: 700;
+  @include medium {font-weight: 400;}
+}
+

UI/WebServerResources/scss/components/_modules/_articles-section.scss

@@ -0,0 +1,25 @@
+/**
+*
+* Articles section
+*
+**/
+
+.articles-section {
+  background: $colorGrayBackground;
+  text-align: center;
+  padding: $lineHeight 0 $lineHeight*4;
+}
+
+.articles-count {
+  color: $colorBlue;
+  font-family: $fontHighlight;
+  font-weight: 400;
+}
+
+.article-section__icon {
+  top: -($lineHeight);
+
+  @include medium {
+    top: -($lineHeight + $lineHeight/2);
+  }
+}

UI/WebServerResources/scss/components/_modules/_did-you-know.scss

@@ -0,0 +1,56 @@
+/**
+*
+* Text module
+*
+**/
+
+.did-you-know {
+
+  ol {
+    @include medium {
+      padding-top: 0 !important;
+    }
+  }
+
+  .cta--primary {
+    margin-top: $lineHeight;
+    font-weight: 500;
+  }
+
+  &>.g--half {
+    position: relative;
+    padding-left: 0;
+    @include medium {padding-left: 32px}
+  }
+}
+
+.did-you-know__symbol {
+  padding-bottom: $lineHeight*12;
+  @include medium {padding-bottom: $lineHeight}
+
+  &::after {
+    content: $icon-question;
+    color: $colorBlue;
+    font-family: $fontIcon;
+    font-size: 300px;
+    top: 150px;
+    left: 30%;
+    position: relative;
+    display: block;
+    width: 0;
+
+    @include medium {
+      position: absolute;
+      font-size: 400px;
+      top: 200px;
+      left: 110%;
+    }
+
+    @include wide {
+      position: absolute;
+      font-size: 400px;
+      top: 200px;
+      left: 124%;
+    }
+  }
+}

UI/WebServerResources/scss/components/_modules/_editorial-header.scss

@@ -0,0 +1,78 @@
+/**
+*
+* Editorial Header
+*
+**/
+
+.editorial-header {
+  overflow: hidden;
+
+  .breadcrumbs {
+    color: $colorBlue;
+
+    a {
+      color: $colorBlue;
+    }
+  }
+
+  .container {
+
+    @include medium {
+      position: relative;
+
+      // Pseudo elements to add the background characters
+      &::before {
+        content: $icon-chevron-large;
+        font-family: $fontIcon;
+        font-size: 1000px;
+        line-height: 0;
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 100%;
+        color: $colorGrayBackground;
+        margin: 168px -35px 0 0;
+      }
+    }
+  }
+
+}
+
+.editorial-header__excerpt {
+  @include type--medium(true);
+  font-family: $fontHighlight;
+}
+
+.editorial-header .tag{
+  padding-top: $lineHeight*2;
+}
+
+.editorial-header__subtitle {
+  @include type--xxlarge;
+  padding-top: 0;
+  @include medium {
+    padding-top: 0;
+    padding-bottom: $lineHeight;
+  }
+  color: $colorBlue;
+}
+
+.editorial-header__toc {
+  margin-top: $lineHeight;
+
+  ol {
+    padding-top: 0;
+
+    @include medium {
+      padding-top: 0;
+    }
+  }
+}
+
+.editorial-header__toc-title {
+  font-family: $fontHighlight;
+  border-bottom: 1px solid $colorGrayKeyline;
+  margin-bottom: 13px;
+  padding-bottom: 13px !important;
+  color: $colorBlue;
+}

UI/WebServerResources/scss/components/_modules/_featured-section.scss

@@ -0,0 +1,9 @@
+/**
+*
+* Editorial Header
+*
+**/
+
+.featured-section {
+  background: $colorGrayBackground;
+}

UI/WebServerResources/scss/components/_modules/_featured-spotlight.scss

@@ -0,0 +1,61 @@
+/**
+*
+* Editorial Header
+*
+**/
+
+.featured-spotlight {
+  background: $colorGrayDark;
+  color: #ffffff;
+  overflow: hidden;
+  padding-bottom: $lineHeight * 3 - 1;
+  margin-top: $lineHeight * 2;
+
+  p {
+    padding-bottom: $lineHeight;
+  }
+
+  .cta--primary {
+    color: #ffffff;
+
+    &:hover {
+      color: #ffffff;
+    }
+  }
+}
+
+.featured-spotlight__container {
+  position: relative;
+}
+
+.featured-spotlight__img {
+  @include small-only {
+    padding-top: 58.4%;
+    padding-bottom: 0;
+    height: 0;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
+
+  img {
+    margin: 0 auto;
+    display: block;
+    width: 100%;
+
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin: 0;
+
+    @include medium {
+      width: auto;
+      max-width: none;
+      left: 100% + $mediumGutterWidth * 2;
+    }
+
+    @include wide {
+      left: 100% + $wideGutterWidth * 2;
+    }
+  }
+}

UI/WebServerResources/scss/components/_modules/_guides-section.scss

@@ -0,0 +1,5 @@
+.guides-section {
+  background: $colorGrayBackground;
+  text-align: center;
+  padding: $lineHeight 0 $lineHeight * 4;
+}

UI/WebServerResources/scss/components/_modules/_highlight.scss

@@ -0,0 +1,269 @@
+/**
+*
+* Highlight
+*
+**/
+
+.highlight-module {
+  overflow: hidden;
+  margin-top: $lineHeight * 2;
+  margin-bottom: $lineHeight;
+  position: relative;
+
+  &::after {
+    background: $colorGrayBackground;
+    content: '';
+    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 0;
+    width: 100%;
+    right: 0;
+    left: 0;
+  }
+
+  ul,
+  ol {
+    padding-left: 0;
+  }
+}
+
+.highlight-module__container {
+  @include container;
+  padding-bottom: $lineHeight * 3;
+  z-index: 1;
+  @include highlight-symbol();
+
+  @include medium {
+    padding-bottom: $lineHeight * 2;
+  }
+
+  @include wide {
+    min-height: $lineHeight * 8;
+  }
+}
+
+.highlight-module__title {
+  @include type--huge;
+  padding-top: $lineHeight;
+
+  @include wide {
+    @include type--xxlarge;
+  }
+}
+
+.highlight-module__cta {
+  display: block;
+}
+
+
+/*==========  LEARNING  ==========*/
+.highlight-module--learning {
+  color: #ffffff;
+
+  &::after {
+    background-color: $colorLearning;
+  }
+
+  a {
+    color: #ffffff;
+    text-decoration: underline;
+  }
+}
+
+
+/*==========  REMEMBER  ==========*/
+.highlight-module--remember {
+  color: #ffffff;
+
+  &::after {
+    background-color: $colorRemember;
+  }
+
+  a {
+    color: #ffffff;
+    text-decoration: underline;
+  }
+}
+
+
+/*==========  CODE  ==========*/
+.highlight-module--code {
+  overflow: visible;
+  margin-bottom: $lineHeight * 2;
+
+  pre {
+    margin: 0;
+    padding-top: $lineHeight;
+    font-size: $fontBase - 2;
+    line-height: $lineHeight;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+
+    span {
+      margin: 0;
+      padding: 0;
+      display: inline-block;
+    }
+  }
+
+  code {
+    margin: 0;
+    padding: 0;
+    word-spacing: -2px;
+    display: block;
+  }
+
+  .highlight-module__container {
+    padding-bottom: 0;
+  }
+
+  .highlight-module__cta {
+    position: absolute;
+    bottom: -$lineHeight;
+  }
+
+}
+
+
+/*==========  LEFT  ==========*/
+.highlight-module--left {
+  &::after {
+    @include wide {
+      width: 80%;
+      right: 20%;
+    }
+  }
+}
+
+
+/*==========  RIGHT  ==========*/
+.highlight-module--right {
+  &::after {
+    @include wide {
+      width: 80%;
+      left: 20%;
+    }
+  }
+
+  &.highlight-module--code {
+    &::after {
+      @include wide {
+        width: 100%;
+        left: 0;
+      }
+    }
+  }
+}
+
+/*==========  INLINE  ==========*/
+.highlight-module--inline {
+  color: $colorText;
+  overflow: visible;
+  margin: $lineHeight 0 0;
+
+  & .highlight-module__container {
+    padding-bottom: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  & .highlight-module__content {
+    border-color: $colorGrayKeyline;
+    border-style: solid;
+    border-width: 1px;
+    border-left-width: 0;
+    border-right-width: 0;
+    margin-bottom: -2px; // Offsetting 2px to considerate border top/bottom - baseline rules.
+    padding:  0 0 $lineHeight;
+  }
+
+  & .highlight-module__title {
+    @include type--large;
+  }
+
+  &.highlight-module--remember {
+    & .highlight-module__title,
+    & li::before {
+      color: $colorRemember;
+    }
+  }
+
+  &.highlight-module--learning {
+    & .highlight-module__title,
+    & li::before {
+      color: $colorLearning;
+    }
+  }
+
+  &::after {
+    display: none !important;
+  }
+}
+
+/*==========  COLORS  ==========*/
+
+div.highlight > pre > code, code .highlight  { background: transparent; }
+div.highlight > pre > code .c, code .highlight .c { color: #999988; font-style: italic } /* Comment */
+div.highlight > pre > code .err, code .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+div.highlight > pre > code .k, code .highlight .k { } /* Keyword */
+div.highlight > pre > code .o, code .highlight .o { } /* Operator */
+div.highlight > pre > code .cm, code .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+div.highlight > pre > code .cp, code .highlight .cp { color: $colorGray; } /* Comment.Preproc */
+div.highlight > pre > code .c1, code .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+div.highlight > pre > code .cs, code .highlight .cs { color: $colorGray; font-style: italic } /* Comment.Special */
+div.highlight > pre > code .gs, code .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+div.highlight > pre > code .gd .x, code .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+div.highlight > pre > code .ge, code .highlight .ge { font-style: italic } /* Generic.Emph */
+div.highlight > pre > code .gr, code .highlight .gr { color: #aa0000 } /* Generic.Error */
+div.highlight > pre > code .gh, code .highlight .gh { color: $colorGray } /* Generic.Heading */
+div.highlight > pre > code .gi, code .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+div.highlight > pre > code .gi .x, code .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+div.highlight > pre > code .go, code .highlight .go { color: #888888 } /* Generic.Output */
+div.highlight > pre > code .gp, code .highlight .gp { color: #555555 } /* Generic.Prompt */
+div.highlight > pre > code .gs, code .highlight .gs { } /* Generic.Strong */
+div.highlight > pre > code .gu, code .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+div.highlight > pre > code .gt, code .highlight .gt { color: #aa0000 } /* Generic.Traceback */
+div.highlight > pre > code .kc, code .highlight .kc { } /* Keyword.Constant */
+div.highlight > pre > code .kd, code .highlight .kd { } /* Keyword.Declaration */
+div.highlight > pre > code .kp, code .highlight .kp { } /* Keyword.Pseudo */
+div.highlight > pre > code .kr, code .highlight .kr { } /* Keyword.Reserved */
+div.highlight > pre > code .kt, code .highlight .kt { color: #445588; } /* Keyword.Type */
+div.highlight > pre > code .m, code .highlight .m { color: #009999 } /* Literal.Number */
+div.highlight > pre > code .s, code .highlight .s { color: $colorLearning } /* Literal.String */
+div.highlight > pre > code .na, code .highlight .na { color: #008080 } /* Name.Attribute */
+div.highlight > pre > code .nb, code .highlight .nb { color: #0086B3 } /* Name.Builtin */
+div.highlight > pre > code .nc, code .highlight .nc { color: #445588; } /* Name.Class */
+div.highlight > pre > code .no, code .highlight .no { color: #008080 } /* Name.Constant */
+div.highlight > pre > code .ni, code .highlight .ni { color: #800080 } /* Name.Entity */
+div.highlight > pre > code .ne, code .highlight .ne { color: #990000; } /* Name.Exception */
+div.highlight > pre > code .nf, code .highlight .nf { color: #990000; } /* Name.Function */
+div.highlight > pre > code .nn, code .highlight .nn { color: #555555 } /* Name.Namespace */
+div.highlight > pre > code .nt, code .highlight .nt { color: $colorRemember } /* Name.Tag */
+div.highlight > pre > code .nv, code .highlight .nv { color: #008080 } /* Name.Variable */
+div.highlight > pre > code .ow, code .highlight .ow { } /* Operator.Word */
+div.highlight > pre > code .w, code .highlight .w { color: #bbbbbb } /* Text.Whitespace */
+div.highlight > pre > code .mf, code .highlight .mf { color: #009999 } /* Literal.Number.Float */
+div.highlight > pre > code .mh, code .highlight .mh { color: #009999 } /* Literal.Number.Hex */
+div.highlight > pre > code .mi, code .highlight .mi { color: #009999 } /* Literal.Number.Integer */
+div.highlight > pre > code .mo, code .highlight .mo { color: #009999 } /* Literal.Number.Oct */
+div.highlight > pre > code .sb, code .highlight .sb { color: $colorLearning } /* Literal.String.Backtick */
+div.highlight > pre > code .sc, code .highlight .sc { color: $colorLearning } /* Literal.String.Char */
+div.highlight > pre > code .sd, code .highlight .sd { color: $colorLearning } /* Literal.String.Doc */
+div.highlight > pre > code .s2, code .highlight .s2 { color: $colorLearning } /* Literal.String.Double */
+div.highlight > pre > code .se, code .highlight .se { color: $colorLearning } /* Literal.String.Escape */
+div.highlight > pre > code .sh, code .highlight .sh { color: $colorLearning } /* Literal.String.Heredoc */
+div.highlight > pre > code .si, code .highlight .si { color: $colorLearning } /* Literal.String.Interpol */
+div.highlight > pre > code .sx, code .highlight .sx { color: $colorLearning } /* Literal.String.Other */
+div.highlight > pre > code .sr, code .highlight .sr { color: #009926 } /* Literal.String.Regex */
+div.highlight > pre > code .s1, code .highlight .s1 { color: $colorLearning } /* Literal.String.Single */
+div.highlight > pre > code .ss, code .highlight .ss { color: #990073 } /* Literal.String.Symbol */
+div.highlight > pre > code .bp, code .highlight .bp { color: $colorGray } /* Name.Builtin.Pseudo */
+div.highlight > pre > code .vc, code .highlight .vc { color: #008080 } /* Name.Variable.Class */
+div.highlight > pre > code .vg, code .highlight .vg { color: #008080 } /* Name.Variable.Global */
+div.highlight > pre > code .vi, code .highlight .vi { color: #008080 } /* Name.Variable.Instance */
+div.highlight > pre > code .il, code .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

UI/WebServerResources/scss/components/_modules/_in-this-guide.scss

@@ -0,0 +1,15 @@
+/**
+*
+* In this guide
+*
+**/
+
+.in-this-guide {
+  margin-top: - $lineHeight * 3;
+}
+
+.in-this-guide__title {
+  @include type--medium(true);
+  font-family: $fontHighlight;
+  margin-bottom: $lineHeight;
+}

UI/WebServerResources/scss/components/_modules/_next-lessons.scss

@@ -0,0 +1,79 @@
+/**
+*
+* Next Lessons
+*
+**/
+
+.next-lessons {
+  background: $colorGrayDark;
+  padding: $lineHeight $lineHeight $lineHeight * 2;
+  margin-top: $lineHeight;
+  color: #ffffff;
+  position: relative;
+
+  h3 {
+    i {
+      @include medium {
+        display: none;
+      }
+    }
+  }
+
+  &::before,
+  &::after {
+    color: rgba(255, 255, 255, 0.5);
+    position: absolute;
+    display: none;
+
+    @include medium {
+      display: inline-block;
+    }
+  }
+
+  &::before {
+    @include medium {
+      content: attr(data-current-lesson);
+
+      font-family: $fontHighlight;
+      font-size: $fontBase;
+      font-weight: 400;
+      line-height: 1;
+
+      background: $colorGrayDark;
+      display: inline-block;
+      padding: 5px 7px;
+
+      right: 127px;
+      top: 143px;
+
+      z-index: 1;
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    @include wide {
+      font-size: $fontMedium;
+      padding-left: 15px;
+      padding-right: 15px;
+      top: 126px;
+      right: 230px;
+    }
+
+  }
+
+  &::after {
+    @include medium {
+      content: $icon-lessons;
+      font-family: $fontIcon;
+      font-size: 150px;
+
+      right: 40px;
+      top: 185px;
+    }
+
+    @include wide {
+      font-size: 210px;
+      right: 120px;
+    }
+
+  }
+}

UI/WebServerResources/scss/components/_modules/_page-header.scss

@@ -0,0 +1,32 @@
+/**
+*
+* Page header
+*
+**/
+
+.page-header {
+  text-align: center;
+
+  .breadcrumbs {
+    text-align: left;
+    color: $colorBlue;
+
+    a {
+      color: $colorBlue;
+    }
+  }
+
+  h3 {
+    color: $colorGrayDark;
+    padding-top: $lineHeight * 2;
+  }
+}
+
+.page-header__excerpt {
+  position: relative;
+  padding-top: 0;
+
+  &:last-child {
+    padding-bottom: $lineHeight * 3;
+  }
+}

UI/WebServerResources/scss/components/_modules/_quote.scss

@@ -0,0 +1,44 @@
+/**
+*
+* Quote
+*
+**/
+
+.quote__content {
+  position: relative;
+  font-family: $fontHighlight;
+  @include type--medium;
+  padding-top: $lineHeight * 4;
+  padding-left: $lineHeight;
+
+  @include medium {
+    padding-top: $lineHeight * 2;
+    padding-left: 0;
+  }
+
+  p {
+    border-top: 1px solid $colorGrayKeyline;
+    text-align: right;
+    font-weight: 500;
+    margin-top: $lineHeight/2 - 1;
+    padding-top: $lineHeight/2;
+  }
+
+  &::before {
+    content: open-quote;
+    display: block;
+    position: absolute;
+    font-family: $fontHighlight;
+    font-weight: 700;
+    color: $colorGrayBackground;
+    top: 90px;
+    left: $lineHeight;
+    font-size: 260px;
+
+    @include medium {
+      top: 225px;
+      left: -210px;
+      font-size: 540px;
+    }
+  }
+}

UI/WebServerResources/scss/components/_modules/_related-guides.scss

@@ -0,0 +1,41 @@
+/**
+*
+* Related items
+*
+**/
+
+.related-guides {
+  margin-top: $lineHeight*3;
+  padding-bottom: ($lineHeight*2) - 2;
+  border-top: 2px solid $colorGrayKeyline;
+  padding-top: ($lineHeight*2) - 2;
+}
+
+.related-guides__list {
+  .list-links {
+    padding-top: 0;
+  }
+
+  a {
+    display: block;
+  }
+}
+
+.related-guides__title {
+  @include type--xlarge;
+  padding-top: 0;
+
+  @include medium {
+    padding-top: 0;
+  }
+}
+
+.related-guides__main-link {
+  text-transform: uppercase;
+
+  &::before {
+    content: '#';
+    display: inline-block;
+    padding-right: 2px;
+  }
+}

UI/WebServerResources/scss/components/_modules/_related-items.scss

@@ -0,0 +1,19 @@
+/**
+*
+* Related items
+*
+**/
+
+.related-items {
+  background-color: $colorGrayDark;
+  color: #ffffff;
+  padding-bottom: $lineHeight * 2;
+  margin-top: $lineHeight * 2;
+
+  .list-links {
+    a {
+      color: #ffffff;
+    }
+  }
+
+}

UI/WebServerResources/scss/components/_modules/_summary-header.scss

@@ -0,0 +1,29 @@
+/**
+*
+* Editorial Header
+*
+**/
+
+.summary-header {
+  background-color: $colorBlue;
+  padding-bottom: $lineHeight * 3;
+  color: #ffffff;
+  margin-bottom: $lineHeight;
+  box-shadow: inset 0 2px 0 0 #fff;
+
+  .breadcrumbs__link {
+    color: #ffffff;
+  }
+
+}
+
+.summary-header__anchor-list {
+  margin-top: $lineHeight * 2;
+}
+
+
+.summary-header__anchors-item {
+  & a {
+    color: #ffffff;
+  }
+}

UI/WebServerResources/scss/components/_modules/_toc.scss

@@ -0,0 +1,34 @@
+/**
+*
+* Table of contents
+*
+**/
+
+.toc__title {
+  @include type--medium;
+  font-family: $fontHighlight;
+  padding-bottom: $lineHeight/2;
+  margin-bottom: ($lineHeight/2) - 1;
+  border-bottom: 1px solid $colorGrayKeyline;
+
+  @include medium {
+    padding-bottom: $lineHeight/2;
+    margin-bottom: $lineHeight/2;
+  }
+}
+
+.toc__list {
+  padding-top: 0;
+
+  border-bottom: 1px solid $colorGrayKeyline;
+  padding-bottom: ($lineHeight/2) - 1;
+  margin-bottom: $lineHeight/2;
+
+  a {
+    display: block;
+  }
+}
+
+.toc__sublist {
+  padding-top: 0;
+}

UI/WebServerResources/scss/components/_pages/_page-resources.scss

@@ -0,0 +1,23 @@
+/**
+*
+* Resources page
+*
+**/
+
+.page--resources {
+  & .article-section__icon,
+  & .articles-count,
+  & .guides-list__item .secondary-content {
+    display: none;
+  }
+
+  & .primary-content {
+    padding-top: $lineHeight;
+    padding-bottom: $lineHeight*2;
+
+    p {
+      margin-top: 0;
+    }
+  }
+
+}

UI/WebServerResources/scss/components/_pages/_styleguide.scss

@@ -0,0 +1,82 @@
+/**
+*
+* Styleguide
+*
+**/
+
+.page--styleguide {
+
+  .styleguide__module-title {
+    margin-bottom: $lineHeight;
+  }
+
+  section {
+    margin-bottom: $lineHeight*2;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: $lineHeight*3 - 1;
+
+  }
+
+  .styleguide__color-list {
+    text-align: center;
+
+    li {
+      border-bottom: $lineHeight*2 solid;
+      margin-bottom: $lineHeight;
+      position: relative;
+    }
+  }
+
+  .styleguide__breadcrumb .breadcrumbs {
+    display: block;
+  }
+
+  .styleguide__lists {
+    ul,
+    ol {
+      margin-bottom: $lineHeight;
+    }
+  }
+
+  .styleguide__inverted-block {
+    background: #e8e8e8;
+    padding: 0 13px;
+  }
+
+  .styleguide__theme-block {
+    background: $colorLayouts;
+    padding: 0 13px;
+  }
+
+}
+
+.demo {
+  margin-bottom: $lineHeight;
+  margin-top: $lineHeight;
+}
+
+.demo {
+  [class*="g-"] {
+    background-color: $colorGrayLight;
+    position: relative;
+    margin-bottom: $lineHeight;
+    min-height: $lineHeight*6;
+
+    &::before,
+    &::after {
+      @include type--small;
+      display: block;
+      margin: 0 10px;
+    }
+
+    &::before {
+      content: 'HTML classes: ';
+      font-weight: 700;
+    }
+
+    &::after {
+      content: attr(class);
+      word-spacing: 15px;
+    }
+  }
+}

UI/WebServerResources/scss/components/_palette.scss

@@ -0,0 +1,335 @@
+/**
+*
+* Material design color palettes NOT TO BE USED WITH ANGULAR-MATERIAL
+* @see http://www.google.com/design/spec/style/color.html
+*
+**/
+
+/* ==========  Blacks  ========== */
+
+$colorBlack: #000;
+$colorGrayDark: rgba($colorBlack, .87);
+$colorGray: rgba($colorBlack, .54);
+$colorGrayLight: rgba($colorBlack, .26);
+$colorGrayLighter: rgba($colorBlack, .12);
+
+/* ==========  Color Palettes  ========== */
+
+$paletteRed: #fde0dc #f9bdbb #f69988 #f36c60 #e84e40 #e51c23 #dd191d
+           #d01716 #c41411 #b0120a #ff7997 #ff5177 #ff2d6f #e00032;
+
+$palettePink:   #fce4ec #f8bbd0 #f48fb1 #f06292 #ec407a #e91e63 #d81b60
+              #c2185b #ad1457 #880e4f #ff80ab #ff4081 #f50057 #c51162;
+
+$palettePurple: #f3e5f5 #e1bee7 #ce93d8 #ba68c8 #ab47bc #9c27b0 #8e24aa
+              #7b1fa2 #6a1b9a #4a148c #ea80fc #e040fb #d500f9 #aa00ff;
+
+$paletteDeepPurple: #673ab7 #ede7f6 #d1c4e9 #b39ddb #9575cd #7e57c2 #673ab7
+                  #5e35b1 #512da8 #4527a0 #311b92 #b388ff #7c4dff #651fff
+                  #6200ea;
+
+$paletteIndigo: #e8eaf6 #c5cae9 #9fa8da #7986cb #5c6bc0 #3f51b5 #3949ab
+              #303f9f #283593 #1a237e #8c9eff #536dfe #3d5afe #304ffe;
+
+$paletteBlue: #e7e9fd #d0d9ff #afbfff #91a7ff #738ffe #5677fc #4e6cef
+            #455ede #3b50ce #2a36b1 #a6baff #6889ff #4d73ff #4d69ff;
+
+$paletteLightBlue: #e1f5fe #b3e5fc #81d4fa #4fc3f7 #29b6f6 #03a9f4 #039be5
+                 #0288d1 #0277bd #01579b #80d8ff #40c4ff #00b0ff #0091ea;
+
+$paletteCyan: #e0f7fa #b2ebf2 #80deea #4dd0e1 #26c6da #00bcd4 #00acc1
+            #0097a7 #00838f #006064 #84ffff #18ffff #00e5ff #00b8d4;
+
+$paletteTeal: #e0f2f1 #b2dfdb #80cbc4 #4db6ac #26a69a #009688 #00897b
+            #00796b #00695c #004d40 #a7ffeb #64ffda #1de9b6 #00bfa5;
+
+$paletteGreen: #d0f8ce #a3e9a4 #72d572 #42bd41 #2baf2b #259b24 #0a8f08
+             #0a7e07 #056f00 #0d5302 #a2f78d #5af158 #14e715 #12c700;
+
+$paletteLightGreen: #f1f8e9 #dcedc8 #c5e1a5 #aed581 #9ccc65 #8bc34a #7cb342
+                  #689f38 #558b2f #33691e #ccff90 #b2ff59 #76ff03 #64dd17;
+
+$paletteLime: #f9fbe7 #f0f4c3 #e6ee9c #dce775 #d4e157 #cddc39 #c0ca33
+            #afb42b #9e9d24 #827717 #f4ff81 #eeff41 #c6ff00 #aeea00;
+
+$paletteYellow: #fffde7 #fff9c4 #fff59d #fff176 #ffee58 #ffeb3b #fdd835
+              #fbc02d #f9a825 #f57f17 #ffff8d #ffff00 #ffea00 #ffd600;
+
+$paletteAmber: #fff8e1 #ffecb3 #ffe082 #ffd54f #ffca28 #ffc107 #ffb300
+             #ffa000 #ff8f00 #ff6f00 #ffe57f #ffd740 #ffc400 #ffab00;
+
+$paletteOrange: #fff3e0 #ffe0b2 #ffcc80 #ffb74d #ffa726 #ff9800 #fb8c00
+              #f57c00 #ef6c00 #e65100 #ffd180 #ffab40 #ff9100 #ff6d00;
+
+$paletteDeepOrange: #fbe9e7 #ffccbc #ffab91 #ff8a65 #ff7043 #ff5722 #f4511e
+                  #e64a19 #d84315 #bf360c #ff9e80 #ff6e40 #ff3d00 #dd2c00;
+
+$paletteBrown: #efebe9 #d7ccc8 #bcaaa4 #a1887f #8d6e63
+             #795548 #6d4c41 #5d4037 #4e342e #3e2723;
+
+$paletteBlueGrey: #eceff1 #cfd8dc #b0bec5 #90a4ae #78909c
+                #607d8b #546e7a #455a64 #37474f #263238;
+
+/* ==========  Color definitions  ========== */
+
+$colorRed50:   nth($paletteRed, 1);
+$colorRed100:  nth($paletteRed, 2);
+$colorRed200:  nth($paletteRed, 3);
+$colorRed300:  nth($paletteRed, 4);
+$colorRed400:  nth($paletteRed, 5);
+$colorRed500:  nth($paletteRed, 6);
+$colorRed600:  nth($paletteRed, 7);
+$colorRed700:  nth($paletteRed, 8);
+$colorRed800:  nth($paletteRed, 9);
+$colorRed900:  nth($paletteRed, 10);
+$colorRedA100: nth($paletteRed, 11);
+$colorRedA200: nth($paletteRed, 12);
+$colorRedA400: nth($paletteRed, 13);
+$colorRedA700: nth($paletteRed, 14);
+
+$colorPink50:   nth($palettePink, 1);
+$colorPink100:  nth($palettePink, 2);
+$colorPink200:  nth($palettePink, 3);
+$colorPink300:  nth($palettePink, 4);
+$colorPink400:  nth($palettePink, 5);
+$colorPink500:  nth($palettePink, 6);
+$colorPink600:  nth($palettePink, 7);
+$colorPink700:  nth($palettePink, 8);
+$colorPink800:  nth($palettePink, 9);
+$colorPink900:  nth($palettePink, 10);
+$colorPinkA100: nth($palettePink, 11);
+$colorPinkA200: nth($palettePink, 12);
+$colorPinkA400: nth($palettePink, 13);
+$colorPinkA700: nth($palettePink, 14);
+
+$colorPurple50:   nth($palettePurple, 1);
+$colorPurple100:  nth($palettePurple, 2);
+$colorPurple200:  nth($palettePurple, 3);
+$colorPurple300:  nth($palettePurple, 4);
+$colorPurple400:  nth($palettePurple, 5);
+$colorPurple500:  nth($palettePurple, 6);
+$colorPurple600:  nth($palettePurple, 7);
+$colorPurple700:  nth($palettePurple, 8);
+$colorPurple800:  nth($palettePurple, 9);
+$colorPurple900:  nth($palettePurple, 10);
+$colorPurpleA100: nth($palettePurple, 11);
+$colorPurpleA200: nth($palettePurple, 12);
+$colorPurpleA400: nth($palettePurple, 13);
+$colorPurpleA700: nth($palettePurple, 14);
+
+$colorDeepPurple50:   nth($paletteDeepPurple, 1);
+$colorDeepPurple100:  nth($paletteDeepPurple, 2);
+$colorDeepPurple200:  nth($paletteDeepPurple, 3);
+$colorDeepPurple300:  nth($paletteDeepPurple, 4);
+$colorDeepPurple400:  nth($paletteDeepPurple, 5);
+$colorDeepPurple500:  nth($paletteDeepPurple, 6);
+$colorDeepPurple600:  nth($paletteDeepPurple, 7);
+$colorDeepPurple700:  nth($paletteDeepPurple, 8);
+$colorDeepPurple800:  nth($paletteDeepPurple, 9);
+$colorDeepPurple900:  nth($paletteDeepPurple, 10);
+$colorDeepPurpleA100: nth($paletteDeepPurple, 11);
+$colorDeepPurpleA200: nth($paletteDeepPurple, 12);
+$colorDeepPurpleA400: nth($paletteDeepPurple, 13);
+$colorDeepPurpleA700: nth($paletteDeepPurple, 14);
+
+$colorIndigo50:   nth($paletteIndigo, 1);
+$colorIndigo100:  nth($paletteIndigo, 2);
+$colorIndigo200:  nth($paletteIndigo, 3);
+$colorIndigo300:  nth($paletteIndigo, 4);
+$colorIndigo400:  nth($paletteIndigo, 5);
+$colorIndigo500:  nth($paletteIndigo, 6);
+$colorIndigo600:  nth($paletteIndigo, 7);
+$colorIndigo700:  nth($paletteIndigo, 8);
+$colorIndigo800:  nth($paletteIndigo, 9);
+$colorIndigo900:  nth($paletteIndigo, 10);
+$colorIndigoA100: nth($paletteIndigo, 11);
+$colorIndigoA200: nth($paletteIndigo, 12);
+$colorIndigoA400: nth($paletteIndigo, 13);
+$colorIndigoA700: nth($paletteIndigo, 14);
+
+$colorBlue50:   nth($paletteBlue, 1);
+$colorBlue100:  nth($paletteBlue, 2);
+$colorBlue200:  nth($paletteBlue, 3);
+$colorBlue300:  nth($paletteBlue, 4);
+$colorBlue400:  nth($paletteBlue, 5);
+$colorBlue500:  nth($paletteBlue, 6);
+$colorBlue600:  nth($paletteBlue, 7);
+$colorBlue700:  nth($paletteBlue, 8);
+$colorBlue800:  nth($paletteBlue, 9);
+$colorBlue900:  nth($paletteBlue, 10);
+$colorBlueA100: nth($paletteBlue, 11);
+$colorBlueA200: nth($paletteBlue, 12);
+$colorBlueA400: nth($paletteBlue, 13);
+$colorBlueA700: nth($paletteBlue, 14);
+
+$colorLightBlue50:   nth($paletteLightBlue, 1);
+$colorLightBlue100:  nth($paletteLightBlue, 2);
+$colorLightBlue200:  nth($paletteLightBlue, 3);
+$colorLightBlue300:  nth($paletteLightBlue, 4);
+$colorLightBlue400:  nth($paletteLightBlue, 5);
+$colorLightBlue500:  nth($paletteLightBlue, 6);
+$colorLightBlue600:  nth($paletteLightBlue, 7);
+$colorLightBlue700:  nth($paletteLightBlue, 8);
+$colorLightBlue800:  nth($paletteLightBlue, 9);
+$colorLightBlue900:  nth($paletteLightBlue, 10);
+$colorLightBlueA100: nth($paletteLightBlue, 11);
+$colorLightBlueA200: nth($paletteLightBlue, 12);
+$colorLightBlueA400: nth($paletteLightBlue, 13);
+$colorLightBlueA700: nth($paletteLightBlue, 14);
+
+$colorCyan50:   nth($paletteCyan, 1);
+$colorCyan100:  nth($paletteCyan, 2);
+$colorCyan200:  nth($paletteCyan, 3);
+$colorCyan300:  nth($paletteCyan, 4);
+$colorCyan400:  nth($paletteCyan, 5);
+$colorCyan500:  nth($paletteCyan, 6);
+$colorCyan600:  nth($paletteCyan, 7);
+$colorCyan700:  nth($paletteCyan, 8);
+$colorCyan800:  nth($paletteCyan, 9);
+$colorCyan900:  nth($paletteCyan, 10);
+$colorCyanA100: nth($paletteCyan, 11);
+$colorCyanA200: nth($paletteCyan, 12);
+$colorCyanA400: nth($paletteCyan, 13);
+$colorCyanA700: nth($paletteCyan, 14);
+
+$colorTeal50:   nth($paletteTeal, 1);
+$colorTeal100:  nth($paletteTeal, 2);
+$colorTeal200:  nth($paletteTeal, 3);
+$colorTeal300:  nth($paletteTeal, 4);
+$colorTeal400:  nth($paletteTeal, 5);
+$colorTeal500:  nth($paletteTeal, 6);
+$colorTeal600:  nth($paletteTeal, 7);
+$colorTeal700:  nth($paletteTeal, 8);
+$colorTeal800:  nth($paletteTeal, 9);
+$colorTeal900:  nth($paletteTeal, 10);
+$colorTealA100: nth($paletteTeal, 11);
+$colorTealA200: nth($paletteTeal, 12);
+$colorTealA400: nth($paletteTeal, 13);
+$colorTealA700: nth($paletteTeal, 14);
+
+$colorGreen50:   nth($paletteGreen, 1);
+$colorGreen100:  nth($paletteGreen, 2);
+$colorGreen200:  nth($paletteGreen, 3);
+$colorGreen300:  nth($paletteGreen, 4);
+$colorGreen400:  nth($paletteGreen, 5);
+$colorGreen500:  nth($paletteGreen, 6);
+$colorGreen600:  nth($paletteGreen, 7);
+$colorGreen700:  nth($paletteGreen, 8);
+$colorGreen800:  nth($paletteGreen, 9);
+$colorGreen900:  nth($paletteGreen, 10);
+$colorGreenA100: nth($paletteGreen, 11);
+$colorGreenA200: nth($paletteGreen, 12);
+$colorGreenA400: nth($paletteGreen, 13);
+$colorGreenA700: nth($paletteGreen, 14);
+
+$colorLightGreen50:   nth($paletteLightGreen, 1);
+$colorLightGreen100:  nth($paletteLightGreen, 2);
+$colorLightGreen200:  nth($paletteLightGreen, 3);
+$colorLightGreen300:  nth($paletteLightGreen, 4);
+$colorLightGreen400:  nth($paletteLightGreen, 5);
+$colorLightGreen500:  nth($paletteLightGreen, 6);
+$colorLightGreen600:  nth($paletteLightGreen, 7);
+$colorLightGreen700:  nth($paletteLightGreen, 8);
+$colorLightGreen800:  nth($paletteLightGreen, 9);
+$colorLightGreen900:  nth($paletteLightGreen, 10);
+$colorLightGreenA100: nth($paletteLightGreen, 11);
+$colorLightGreenA200: nth($paletteLightGreen, 12);
+$colorLightGreenA400: nth($paletteLightGreen, 13);
+$colorLightGreenA700: nth($paletteLightGreen, 14);
+
+$colorLime50:   nth($paletteLime, 1);
+$colorLime100:  nth($paletteLime, 2);
+$colorLime200:  nth($paletteLime, 3);
+$colorLime300:  nth($paletteLime, 4);
+$colorLime400:  nth($paletteLime, 5);
+$colorLime500:  nth($paletteLime, 6);
+$colorLime600:  nth($paletteLime, 7);
+$colorLime700:  nth($paletteLime, 8);
+$colorLime800:  nth($paletteLime, 9);
+$colorLime900:  nth($paletteLime, 10);
+$colorLimeA100: nth($paletteLime, 11);
+$colorLimeA200: nth($paletteLime, 12);
+$colorLimeA400: nth($paletteLime, 13);
+$colorLimeA700: nth($paletteLime, 14);
+
+$colorYellow50:   nth($paletteYellow, 1);
+$colorYellow100:  nth($paletteYellow, 2);
+$colorYellow200:  nth($paletteYellow, 3);
+$colorYellow300:  nth($paletteYellow, 4);
+$colorYellow400:  nth($paletteYellow, 5);
+$colorYellow500:  nth($paletteYellow, 6);
+$colorYellow600:  nth($paletteYellow, 7);
+$colorYellow700:  nth($paletteYellow, 8);
+$colorYellow800:  nth($paletteYellow, 9);
+$colorYellow900:  nth($paletteYellow, 10);
+$colorYellowA100: nth($paletteYellow, 11);
+$colorYellowA200: nth($paletteYellow, 12);
+$colorYellowA400: nth($paletteYellow, 13);
+$colorYellowA700: nth($paletteYellow, 14);
+
+$colorAmber50:   nth($paletteAmber, 1);
+$colorAmber100:  nth($paletteAmber, 2);
+$colorAmber200:  nth($paletteAmber, 3);
+$colorAmber300:  nth($paletteAmber, 4);
+$colorAmber400:  nth($paletteAmber, 5);
+$colorAmber500:  nth($paletteAmber, 6);
+$colorAmber600:  nth($paletteAmber, 7);
+$colorAmber700:  nth($paletteAmber, 8);
+$colorAmber800:  nth($paletteAmber, 9);
+$colorAmber900:  nth($paletteAmber, 10);
+$colorAmberA100: nth($paletteAmber, 11);
+$colorAmberA200: nth($paletteAmber, 12);
+$colorAmberA400: nth($paletteAmber, 13);
+$colorAmberA700: nth($paletteAmber, 14);
+
+$colorOrange50:   nth($paletteOrange, 1);
+$colorOrange100:  nth($paletteOrange, 2);
+$colorOrange200:  nth($paletteOrange, 3);
+$colorOrange300:  nth($paletteOrange, 4);
+$colorOrange400:  nth($paletteOrange, 5);
+$colorOrange500:  nth($paletteOrange, 6);
+$colorOrange600:  nth($paletteOrange, 7);
+$colorOrange700:  nth($paletteOrange, 8);
+$colorOrange800:  nth($paletteOrange, 9);
+$colorOrange900:  nth($paletteOrange, 10);
+$colorOrangeA100: nth($paletteOrange, 11);
+$colorOrangeA200: nth($paletteOrange, 12);
+$colorOrangeA400: nth($paletteOrange, 13);
+$colorOrangeA700: nth($paletteOrange, 14);
+
+$colorDeepOrange50:   nth($paletteDeepOrange, 1);
+$colorDeepOrange100:  nth($paletteDeepOrange, 2);
+$colorDeepOrange200:  nth($paletteDeepOrange, 3);
+$colorDeepOrange300:  nth($paletteDeepOrange, 4);
+$colorDeepOrange400:  nth($paletteDeepOrange, 5);
+$colorDeepOrange500:  nth($paletteDeepOrange, 6);
+$colorDeepOrange600:  nth($paletteDeepOrange, 7);
+$colorDeepOrange700:  nth($paletteDeepOrange, 8);
+$colorDeepOrange800:  nth($paletteDeepOrange, 9);
+$colorDeepOrange900:  nth($paletteDeepOrange, 10);
+$colorDeepOrangeA100: nth($paletteDeepOrange, 11);
+$colorDeepOrangeA200: nth($paletteDeepOrange, 12);
+$colorDeepOrangeA400: nth($paletteDeepOrange, 13);
+$colorDeepOrangeA700: nth($paletteDeepOrange, 14);
+
+$colorBrown50:   nth($paletteBrown, 1);
+$colorBrown100:  nth($paletteBrown, 2);
+$colorBrown200:  nth($paletteBrown, 3);
+$colorBrown300:  nth($paletteBrown, 4);
+$colorBrown400:  nth($paletteBrown, 5);
+$colorBrown500:  nth($paletteBrown, 6);
+$colorBrown600:  nth($paletteBrown, 7);
+$colorBrown700:  nth($paletteBrown, 8);
+$colorBrown800:  nth($paletteBrown, 9);
+$colorBrown900:  nth($paletteBrown, 10);
+
+$colorBlueGrey50:   nth($paletteBlueGrey, 1);
+$colorBlueGrey100:  nth($paletteBlueGrey, 2);
+$colorBlueGrey200:  nth($paletteBlueGrey, 3);
+$colorBlueGrey300:  nth($paletteBlueGrey, 4);
+$colorBlueGrey400:  nth($paletteBlueGrey, 5);
+$colorBlueGrey500:  nth($paletteBlueGrey, 6);
+$colorBlueGrey600:  nth($paletteBlueGrey, 7);
+$colorBlueGrey700:  nth($paletteBlueGrey, 8);
+$colorBlueGrey800:  nth($paletteBlueGrey, 9);
+$colorBlueGrey900:  nth($paletteBlueGrey, 10);

UI/WebServerResources/scss/components/_utils.scss

@@ -0,0 +1,417 @@
+/**
+*
+* Utils
+*
+**/
+
+/*==========  VARIABLES  ==========*/
+
+  // Defining breakpoints
+  $medium: 620px !default;
+  $wide: 800px !default;
+  $huge: 1600px !default;
+  $mediumContainer: 688px !default;
+  $wideContainer: 864px !default;
+
+  // Defining grid sizes
+  $mediumColCount: 3 !default;
+  $mediumColWidth: 30.3% !default;
+  $mediumGutterWidth: 4.5% !default;
+  $wideColCount: 4 !default;
+  $wideColWidth: 22.2% !default;
+  $wideGutterWidth: 3.7% !default;
+
+  // Defining colors
+  $colorBlue: #3372df !default;
+  $colorBlueSecondary: lighten($colorBlue, 30%) !default;
+  $colorGreen: #0f9d58 !default;
+  $colorGreenSecondary: lighten($colorGreen, 30%) !default;
+  $colorRed: #cb4437 !default;
+  $colorRedSecondary: lighten($colorRed, 30%) !default;
+  $colorYellow: #f4b400 !default;
+  $colorYellowSecondary: lighten($colorYellow, 20%) !default;
+
+  $colorRemember: #09829a !default;
+  $colorLearning: #da2e75 !default;
+
+  $colorGrayBackground: #f0f0f0 !default;
+  $colorGrayKeyline: #e0e0e0 !default;
+  $colorGray: #737373 !default;
+  $colorGrayLight: #eeeeee !default;
+  $colorGrayDark: #404040 !default;
+
+  $colorText: $colorGrayDark !default;
+  $colorHighlight: $colorBlue !default;
+  $colorWarning: $colorYellowSecondary !default;
+  $colorMuted: $colorGray !default;
+  $colorDanger: $colorRed !default;
+
+  $colorLayouts: #297ea9 !default;
+  $colorLayoutsSecondary: lighten($colorLayouts, 30%) !default;
+  $colorUser: #2c8566 !default;
+  $colorUserSecondary: lighten($colorUser, 30%) !default;
+  $colorMedia: #cf423a !default;
+  $colorMediaSecondary: lighten($colorMedia, 30%) !default;
+  $colorPerformance: #7b5294 !default;
+  $colorPerformanceSecondary: lighten($colorPerformance, 30%) !default;
+
+  // Defining font family
+  $fontDefault: 'Ubuntu', Helvetica, Arial, sans-serif !default;
+  $fontHighlight: 'Ubuntu', Helvetica, sans-serif !default;
+  $fontIcon: 'icons' !default;
+
+  // Defining font sizes
+  $fontSmall: 13px !default;
+  $fontBase: 16px  !default;
+  $fontMedium: 20px !default;
+  $fontLarge: 26px !default;
+  $fontXLarge: 42px !default;
+  $fontXXLarge: 68px !default;
+  $fontHuge: 110px !default;
+
+  // Defining baseline line height
+  $lineHeight: 26px !default;
+
+  // Defining animation easings
+  $animationEasing: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default;
+
+  // Defining sidebar stuff
+  $sidebarWidth: 280px !default;
+
+
+/*==========  FUNCTIONS  ==========*/
+
+  @function leading($size, $context: $lineHeight) {
+    @return  $context / $size + em;
+  }
+
+
+/*==========  MIXINS  ==========*/
+
+  @mixin media-query($media-query) {
+    @if $media-query == small {
+      @media only screen and (max-width: $medium - 1) { @content; }
+    }
+
+    @if $media-query == medium {
+      @media only screen and (min-width: $medium) { @content; }
+    }
+
+    @if $media-query == medium-only {
+      @media only screen and (min-width: $medium) and (max-width: $wide - 1) { @content; }
+    }
+
+    @if $media-query == wide {
+      @media only screen and (min-width: $wide) { @content; }
+    }
+
+    @if $media-query == huge {
+      @media only screen and (min-width: $huge) { @content; }
+    }
+  }
+
+  // Just some helpers...
+  @mixin small-only { @include media-query(small) { @content }; }
+  @mixin medium { @include media-query(medium) { @content }; }
+  @mixin medium-only { @include media-query(medium-only) { @content }; }
+  @mixin wide { @include media-query(wide) { @content }; }
+  @mixin huge { @include media-query(huge) { @content }; }
+
+  // Mixin to constrain elements
+  @mixin container($isRelative: false) {
+    box-sizing: content-box;
+
+    @if $isRelative {
+      position: relative;
+    }
+
+    padding-left: 5%;
+    padding-right: 5%;
+    margin-left: auto;
+    margin-right: auto;
+
+
+    @include medium {
+      padding-left: 4.8%;
+      padding-right: 4.8%;
+      max-width: $mediumContainer;
+    }
+
+    @include wide {
+      padding-left: 4.4%;
+      padding-right: 4.4%;
+      max-width: $wideContainer;
+    }
+  }
+
+
+
+  // Mixin to show a baseline grid
+  // only visible when body has 'debug' class
+  @mixin baseline-grid() {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      width: 100%;
+      z-index: 9;
+
+      display: none;
+      background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 95%,rgba(0,0,0,0.15) 100%);
+
+      background-size: 100% 26px;
+    }
+
+    &.debug::after {
+      display: block;
+      pointer-events: none;
+    }
+  }
+
+  // Mixins simply to store CSS rules
+  @mixin rule--small {
+    font-size: $fontSmall;
+    line-height: 2.0000em; /* 26px */
+    padding-top: 2.0000em;
+    padding-bottom: 0;
+  }
+
+  @mixin rule--base {
+    font-size: $fontBase;
+    line-height: 1.6250em; /* 26px */
+    padding-top: 1.6250em;
+    padding-bottom: 0;
+  }
+
+  @mixin rule--medium {
+    font-size: $fontMedium;
+    font-weight: 300;
+    line-height: 1.3000em; /* 26px */
+    padding-top: 1.3000em;
+    padding-bottom: 0;
+  }
+
+  @mixin rule--large {
+    font-family: $fontHighlight;
+    font-size: $fontLarge;
+    font-weight: 300;
+    line-height: 1.0000em; /* 26px */
+    padding-top: 1.0000em;
+    padding-bottom: 0;
+  }
+
+  @mixin rule--xlarge {
+    font-family: $fontHighlight;
+    font-size: $fontXLarge;
+    font-weight: 300;
+    line-height: 1.2381em; /* 52px */
+    padding-top: 0.6190em;
+    padding-bottom: 0;
+  }
+
+  @mixin rule--xxlarge {
+    font-family: $fontHighlight;
+    font-size: $fontXXLarge;
+    font-weight: 300;
+    line-height: 1.1471em; /* 78px */
+    padding-top: 0.3824em;
+    padding-bottom: 0;
+  }
+
+  @mixin rule--huge {
+    font-family: $fontHighlight;
+    font-size: $fontHuge;
+    font-weight: 300;
+    line-height: 1.19em; /* 130px */
+    padding-top: 0.2364em;
+    padding-bottom: 0;
+  }
+
+
+
+  // Mixins to determine which rule to use at which breakpoint
+  @mixin type--small($isFromMixin: false) {
+    @include rule--small;
+  }
+
+  @mixin type--base($isFromMixin: false) {
+    @include rule--base;
+  }
+
+  @mixin type--medium($isFromMixin: false) {
+    @if $isFromMixin == false {
+      @include type--base(true);
+      @include wide {
+        @include rule--medium;
+      }
+    }
+    @else {
+      @include rule--medium;
+    }
+  }
+
+  @mixin type--large($isFromMixin: false) {
+    @if $isFromMixin == false {
+      @include type--medium(true);
+      @include wide {
+        @include rule--large;
+      }
+    }
+    @else {
+      @include rule--large;
+    }
+  }
+
+  @mixin type--xlarge($isFromMixin: false) {
+    @if $isFromMixin == false {
+      @include type--large(true);
+      @include wide {
+        @include rule--xlarge;
+      }
+    }
+    @else {
+      @include rule--xlarge;
+    }
+  }
+
+  @mixin type--xxlarge($isFromMixin: false) {
+    @if $isFromMixin == false {
+      @include type--xlarge(true);
+      @include wide {
+        @include rule--xxlarge;
+      }
+    }
+    @else {
+      @include rule--xxlarge;
+    }
+  }
+
+  @mixin type--huge($isFromMixin: false) {
+    @if $isFromMixin == false {
+      @include type--xxlarge(true);
+      @include wide {
+        @include rule--huge;
+      }
+    }
+    @else {
+      @include rule--huge;
+    }
+  }
+
+
+  // LISTS
+  @mixin bullet-type($bullet, $icon: false) {
+    &::before {
+      @if $icon {
+        font-family: $fontIcon;
+        @extend .#{$icon}::before;
+        font-size: $fontSmall;
+      }
+      @else {
+        content: $bullet;
+        font-family: $fontHighlight;
+      }
+
+      display: block;
+      font-weight: 400;
+      position: absolute;
+      top: 0;
+      left: 0;
+      line-height: $lineHeight;
+
+    }
+  }
+
+  @mixin numbered-list() {
+    &::before {
+      counter-increment: list;
+      content: '0' counter(list);
+      color: inherit;
+      font-weight: 400;
+      display: inline-block;
+      position: absolute;
+      left: 0;
+    }
+  }
+
+  // Mixin to create links
+  @mixin style-cta($textColor, $linkIcon: false) {
+    font-family: $fontHighlight;
+    color: $textColor;
+    font-weight: 400;
+    display: inline-block;
+    line-height: 1;
+
+    &:hover {
+      color: $colorGrayDark;
+    }
+
+    @if $linkIcon {
+      text-decoration: none;
+      &::before {
+        display: inline-block;
+        padding-right: 10px;
+        font-family: $fontIcon;
+        line-height: ($lineHeight) - 1; // remove 1px from line-height to fix baseline alignment
+        font-size: $fontSmall;
+        content: $linkIcon;
+      }
+    }
+  }
+
+  // Mixin to create highlight modules
+  @mixin highlight-symbol($verticalOffset: 0, $horizontalOffset: 45px, $fontSize: 130px) {
+    position: relative;
+
+    &::before {
+      display: none;
+
+      @include medium {
+        display: block;
+        position: absolute;
+        top: 106px;
+        right: $horizontalOffset;
+
+        font-family: $fontIcon;
+        font-size: $fontSize;
+        line-height: 1px;
+        text-align: center;
+        height: 100%;
+        width: $mediumColWidth;
+        color: #ffffff;
+      }
+
+      .highlight-module--left & {
+        right: auto;
+        left: $horizontalOffset;
+      }
+
+      @include wide {
+        top: 134px;
+        width: $wideColWidth;
+        font-size: $fontSize + 50;
+
+        .highlight-module--large & {
+          font-size: $fontSize + 300;
+        }
+      }
+    }
+  }
+
+  // Grid CSS rules
+  @mixin rule--col($mediaQuery) {
+    @if $mediaQuery == medium {
+      float: left;
+      margin-right: $mediumGutterWidth;
+    }
+
+    @if $mediaQuery == wide {
+      float: left;
+      margin-right: $wideGutterWidth;
+    }
+  }