Variablen

Das Aussehen des Themes wird maßgeblich über eine Vielzahl von SASS-Variablen gesteuert:

  • wiederkehrende und Basis-Variablen sind in der _variables.scss zu finden
  • objekt- und komponentenspezifische Variablen sind im Kopfbereich der jeweiligen Dateien (z.B. _navigation.scss) hinterlegt
  • weitere Variablen werden in dem zugrundeliegenden Basis-Framework Nutshell verwendet und können über die _variables.scss oder die jeweiligen objektspezifischen Dateien überschrieben werden.

Farbschema

$color-turkey
$color-brand
$color-highlight
$color-links
$color-btn
$color-gray-light
$color-tint
$color-band-tint-background
$color-gray
$color-gray-dark
$color-text
$color-band-dark-background-gradient
$color-page-background
$color-btn-text
$base-overlay-background
rgba(0,0,0,0.7)

Typografie

$base-font-size: 1rem;
$base-line-height: 1.625;

$base-font-size--xs: 0.875rem;
$base-font-size--lg: 1.125rem;
$base-font-size--xl: 1.25rem;

$base-font-family-serif: "Merriweather", Georgia, "Times New Roman", serif;
$base-font-family-sans-serif: "PT Sans", "Helvetica Neue", Helvetica, sans-serif;

$base-font-family: $base-font-family-serif;

Abstände

$base-spacing-unit: 1.625rem;

Variablen aus der Nutshell:

$base-spacing-unit--xs: $base-spacing-unit / 4 !default;
$base-spacing-unit--sm: $base-spacing-unit / 2 !default;
$base-spacing-unit--lg: $base-spacing-unit * 2 !default;
$base-spacing-unit--xl: $base-spacing-unit * 4 !default;

Rahmen

$base-border-radius: 4px;
$base-border-width: 2px;
$base-border-color: currentColor;

Variablen aus der Nutshell:

$base-border: $base-border-width solid $base-border-color !default;

Sonstige

$ie9-support: true;