Contains core framework variables for responsive design, typography and spacing. This should be the second file imported from shila-css. The first imported file should be tools.core, which contains functions used in settings.core.

Breakpoint variables for responsive design.

Sass map containing all breakpoints.

Breakpoint for large displays. Default value: 1025px.

Breakpoint for medium displays. Default value: 801px.

Breakpoint for small displays. Default value: 525px.

Max-width breakpoint for targeting extra small displays only. Default value: max-width $shila-s-break - 1.

Variables for responsive typography. The base line height is by default also used as a basis for all spacing variables.

Sass map containing base font sizes for different breakpoints. Default value: 16px for all breakpoints.

Sass map containing base line heights for different breakpoints. Default value: 21px for all breakpoints.

Base spacing unit. Used as the basis for other core spacing variables. Default value: default in $shila-base-line-heights.

Huge spacing unit.

Large spacing unit.

Small spacing unit.

Tiny spacing unit.

Contains color variables.

A general purpose primary color with automatically generated variants.

Default value: $shila-blue.

Dark base color variant.

Darker base color variant.

Darkest base color variant.

Light base color variant.

Lighter base color variant.

Lightest base color variant.

Base text color. Default value: $shila-darkest-gray.

Button text color. Default value: $shila-white.

Color used for headings. Default value: $shila-black.

General background color. Default value: $shila-white.

Content background color. Default value: $shila-background-color.

Form element background color. Default value: $shila-background-color.

Page background color. Default value: $shila-background-color.

Colors used for status messages and indicators.

Error status color. Default value: $shila-light-red.

Info status color. Default value: $shila-light-blue.

Success status color. Default value: $shila-light-green.

Warning status color. Default value: $shila-light-yellow.

A color that can be used for things such as links and action buttons. Default value: $shila-blue.

A color that can be used for different kinds of borders. Default value: $shila-lightest-gray.

Focus outline color. Default value: transparentized $shila-action-color.

Contains variables related to typography. Please note that some essential typography related variables are in settings.core.

Font family used for the base font. Default value: $shila-font-stack-helvetica.

Font family used for headings. Default value: $shila-base-font-family.

Sass maps containing font sizes for different breakpoints.

A Helvetica (sans-serif) font stack.

A Georgia (serif) font stack.

Default value: 700.

Default value: 400.

Default value: $shila-font-weight-bold.

Sass maps containing line heights for different breakpoints.

Contains variables used in tools.layout and other useful variables for common use cases.

Max-width breakpoint for small screen navigation and related components.

Breakpoint for large screen navigation and related components.

Maximum page (content) width. Default value: 1200px.

Maximum readable content width. Default value: 40em.

Please note that the main spacing variables are in settings.core.

Sass map containing side spacings for different breakpoints. Default value: $shila-base-spacing for all breakpoints.

Contains Sass list variables for selecting multiple elements.

Contains variables used in the more opinionated styles partials.

Default value: 150ms.

Default value: ease.

Base border style. Default value: 1px solid $shila-base-border-color.

Base border radius. Default value: 3px.

Default value: $shila-focus-outline-width solid $shila-focus-outline-color.

Default value: 2px.

Default value: 3px.

Default value: inset 0 1px 3px rgba(#000, 0.06).

Default value: $shila-form-box-shadow, 0 0 5px rgba($shila-action-color, 0.7).