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-blue
--color-brand-primary
--color-highlight
--color-btn
--color-blue-darker
--color-brand-secondary
--color-links
--color-band-dark-background
--color-gray-light
--color-tint
--color-band-tint-background
--color-gray-dark
--color-text
--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-1: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
--base-font-family-2: 'Raleway', 'Helvetica Neue', sans-serif;

--base-font-family: var(--base-font-family-1);

Abstände

--base-spacing-unit: 1rem;

Variablen aus der Nutshell:

--base-spacing-unit--xs: calc(--base-spacing-unit / 4);
--base-spacing-unit--sm: calc(--base-spacing-unit / 2);
--base-spacing-unit--lg: calc(--base-spacing-unit * 2);
--base-spacing-unit--xl: calc(--base-spacing-unit * 4);

Rahmen

--base-border-radius: 4px;
--base-border-width: 1px;
$base-border-color: #D0D0D0;

Variablen aus der Nutshell:

--base-border: var(--base-border-width) solid var(--base-border-color);