breakpoints

mixins

mobile

Since 3.0.0

@mixin mobile() { ... }

Description

Mobile breakpoint (see $bp-mobile defined in _vars.scss). This assumes a min-width as defined by the variable.

Parameters

None.

Requires

[variable] bp-mobile

Author

Gert-Jan Meire

phablet

Since 3.0.0

@mixin phablet() { ... }

Description

Phablet breakpoint (see $bp-phablet defined in _vars.scss). This assumes a min-width as defined by the variable.

Parameters

None.

Requires

[variable] bp-phablet

Author

Bart Delrue

tablet-and-below

Since 3.0.0

@mixin tablet-and-below() { ... }

Description

Tablet breakpoint (see $bp-tablet defined in _vars.scss). This assumes a max-width as defined by the variable.

Parameters

None.

Requires

[variable] bp-tablet

Author

Bart Delrue

tablet

Since 3.0.0

@mixin tablet() { ... }

Description

Tablet breakpoint (see $bp-tablet defined in _vars.scss). This assumes a min-width as defined by the variable.

Parameters

None.

Requires

[variable] bp-tablet

Author

Gert-Jan Meire

desktop-and-below

Since 3.0.0

@mixin desktop-and-below() { ... }

Description

Mobile breakpoint (see $bp-mobile defined in _vars.scss). This assumes a min-width as defined by the variable.

Parameters

None.

Requires

[variable] bp-desktop
[variable] bp-mobile

Author

Gert-Jan Meire

desktop

Since 3.0.0

@mixin desktop() { ... }

Description

Desktop breakpoint (see $bp-tablet defined in _vars.scss). This assumes a min-width as defined by the variable.

Parameters

None.

Requires

[variable] bp-desktop

Author

Gert-Jan Meire

desktop-xl

Since 3.0.0

@mixin desktop-xl() { ... }

Description

Desktop XL breakpoint (see $bp-desktop-xl defined in _vars.scss). This assumes a min-width as defined by the variable.

Parameters

None.

Requires

[variable] bp-desktop-xl

Author

Gert-Jan Meire

buttons

mixins

button-small

Since 3.0.0

@mixin button-small() { ... }

Description

Button - small variant.

Parameters

None.

Requires

[mixin] small-text

Used by

[mixin] button

Author

Gert-Jan Meire

button-medium

Since 3.0.0

@mixin button-medium() { ... }

Description

Button - medium variant.

Parameters

None.

Requires

[mixin] medium-text

Used by

[mixin] button
[mixin] button

Author

Gert-Jan Meire

button-large

Since 3.0.0

@mixin button-large() { ... }

Description

Button - large variant.

Parameters

None.

Requires

[mixin] large-text

Used by

[mixin] button

Author

Gert-Jan Meire

button-disabled

Since 3.0.0

@mixin button-disabled() { ... }

Description

Button - disabled variant.

Parameters

None.

Requires

[function] color

Used by

[mixin] button

Author

Gert-Jan Meire

button

Since 3.0.0

@mixin button() { ... }

Description

General button styling.

Parameters

None.

Requires

[mixin] button-medium
[mixin] bold-text
[mixin] button-disabled
[mixin] button-small
[mixin] button-medium
[mixin] button-large
[mixin] button-block
[mixin] button-icon
[mixin] button-icon-left
[function] border-radius
[variable] default-font-family

Author

Gert-Jan Meire

button-block

Since 3.0.0

@mixin button-block() { ... }

Description

Makes a button display block instead of inline.

Parameters

None.

Used by

[mixin] button

Author

Gert-Jan Meire

button-icon

Since 3.0.0

@mixin button-icon() { ... }

Description

Define a button with an icon.

Parameters

None.

Used by

[mixin] button
[placeholder] button-alert
[placeholder] button-alert

Author

Gert-Jan Meire

button-icon-left

@mixin button-icon-left() { ... }

Description

Define a button with an icon on the left side.

Parameters

None.

Used by

[mixin] button

Author

Gert-Jan Meire

colors

mixins

spot-image

Since 3.0.0

@mixin spot-image($image: null, $size: 8rem) { ... }

Description

Theme mixin to generate all themes spot images. This generates the necessary theme CSS for all defined themes based on the $themes map defined in _colors.scss

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$image`	The filename of the spot image.	`String`	`null`
`$size`	The default width + height for the spot image.	`String`	`8rem`

Requires

[variable] colors
[variable] themes
[variable] styleguide-dir

Author

Jeroen Goossens

theme

Since 3.0.0

@mixin theme($property: null, $default: null, $exception: null) { ... }

Description

Theme mixin to generate all themes for components. This generates the necessary theme CSS for all defined themes based on the $themes map defined in _colors.scss

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	The property to themify.	`String`	`null`
`$default`	The default value for the themified property.	`String`	`null`
`$exception`	The exception value for the themified property. This is the exception optionally used in subthemes.	`String`	`null`

Requires

[function] set-themified-property
[variable] colors
[variable] themes
[variable] colors

Used by

[mixin] field-base
[mixin] field-base
[mixin] field-base
[mixin] field-base
[mixin] field-base
[mixin] field-base
[mixin] field-base
[mixin] field-base
[mixin] field-base
[mixin] field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] focus-bare
[mixin] link-background
[mixin] link-underlined
[mixin] link-underlined
[placeholder] button-primary
[placeholder] button-primary
[placeholder] button-primary
[placeholder] button-primary
[placeholder] button-primary
[placeholder] button-primary
[placeholder] button-primary
[placeholder] button-primary
[placeholder] button-primary
[placeholder] button-primary
[placeholder] button-primary
[placeholder] button-secondary
[placeholder] button-secondary
[placeholder] button-secondary
[placeholder] button-secondary
[placeholder] button-secondary
[placeholder] button-secondary
[placeholder] button-secondary
[placeholder] button-secondary
[placeholder] button-secondary

Author

Gert-Jan Meire

theme-content

Since 3.0.0-beta5

@mixin theme-content($default: null, $exception: null) { ... }

Description

This mixin is similare to the theme-mixin, but uses the @content directive to make it possible to pass in custom values for a property (as often seen in borders, shadows, ...)

Inside the content block when including this mixin, you'll have the $theme-color variable available to reference.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$default`	The default value for the themified property.	`String`	`null`
`$exception`	The exception value for the themified property. This is the exception optionally used in subthemes.	`String`	`null`

Example

@include theme-content('color-primary', 'link-shadow') {
  text-shadow: 1px 1px 2px $theme-color;
}

Requires

[function] set-themified-property
[variable] colors
[variable] themes
[variable] colors

Used by

[mixin] link-background
[mixin] table-backgrounds
[mixin] table-backgrounds
[mixin] table-backgrounds

Author

Helena Standaert

functions

[private] set-themified-property

Since 3.0.0

@function set-themified-property($colors, $default, $exception) { ... }

Description

Do check if the default value exists in map colors.

We check if the given $exception exists in the theme map. If it does we return the color applied there. If it does NOT we split the $default string based on two dasshes -- We then get the color palette value based on that key from the $themes map. and we apply the correct tint through the color() mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$colors`	The map of colors to check.	`Map`	— none
`$default`	The default value for the themified property.	`String`	— none
`$exception`	The exception value for the themified property. This is the exception optionally used in subthemes.	`String`	— none

Requires

[variable] colors
[function] str-split
[function] color
[function] number

Used by

[mixin] theme
[mixin] theme-content

Author

Gert-Jan Meire

rgba-to-rgb

Since 3.0.0

@function rgba-to-rgb($base-color, $background: #fff) { ... }

Description

A function to convert a rgba color to a rgb color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$base-color`	The key of the color in the $colors map.	`Color`	— none
`$background`	The color to mix with.	`Color`	`#fff`

Requires

[variable] colors

Used by

[function] color

Author

Jeroen Goossens

color

Since 3.0.0

@function color($base-color, $tint: 0, $transparent: false, $colors$: $colors) { ... }

Description

A function to get a color from the $colors map.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$base-color`	The key of the color in the $colors map.	`Color`	— none
`$tint`	The tint to be applied to the base color.	`Int`	`0`
`$transparent`	True when you need a RGBA color, otherwise HEX value will return.	`Boolean`	`false`
$colors$	The colors array to use to calculate the correct color tint.	`Map`	`$colors`

Requires

[function] shade
[function] tint
[function] rgba-to-rgb
[variable] colors

Used by

[mixin] button-disabled
[function] set-themified-property
[mixin] field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] choices-field-base
[placeholder] button-alert
[placeholder] button-success

Author

Gert-Jan Meire

tint

Since 3.0.0

@function tint($base-color, $tint, $colors$: $colors) { ... }

Description

A function to adjust the opacity of a base color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$base-color`	The base color to be modified.	`Color`	— none
`$tint`	The tint value to modify the base color with.	`Int`	— none
$colors$	The colors array to use to calculate the correct color tint.	`Map`	`$colors`

Requires

[variable] tints
[variable] colors

Used by

[function] color

Author

Gert-Jan Meire

shade

Since 3.0.0

@function shade($base-color, $tint, $colors$: $colors) { ... }

Description

A function to darken a base color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$base-color`	The base color to be modified.	`Color`	— none
`$tint`	The value to shade the base color with.	`Int`	— none
$colors$	The colors array to use to calculate the correct color tint.	`Map`	`$colors`

Requires

[variable] tints
[variable] colors

Used by

[function] color

Author

Gert-Jan Meire

variables

colors

Since 3.0.0

$colors: (
  'cyan': #009de0,
  'cyan-wcag': #007db3,
  'dark-gray': #23333a,
  'white': #fff,
  'blue': #0340c7,
  'teal': #29cfc9,
  'green': #38ab30,
  'lemon': #f5d605,
  'yellow': #fab600,
  'orange': #f95706,
  'red': #f20f36,
  'pink': #f09,
  'purple': #5a0ec4,
) !default;

Description

The colors map defines all basic and secondary colors.

Type

Map

Used by

[mixin] spot-image
[function] set-themified-property
[mixin] theme
[mixin] theme
[mixin] theme-content
[mixin] theme-content
[function] rgba-to-rgb
[function] color
[function] tint
[function] shade

Author

Gert-Jan Meire

tints

Since 3.0.0

$tints: (
  1: 10%,
  2: 25%,
  3: 50%,
  -1: .75,
  -2: .5,
  -3: .25,
  -4: .1,
  -5: .06,
  -6: .02,
) !default;

Description

This map describes different tints. These are used to calculate all color swatches based on the base colors in $colors.

Type

Map

Used by

[function] tint
[function] shade

Author

Gert-Jan Meire

box-shadow-primary

Since 3.0.0

$box-shadow-primary: 0 2px 8px 0;

Description

Themify adds the color for box shadows, this just defines the box shadow without a specific color so it can be reused.

Type

String

Used by

[placeholder] button-alert

Author

Gert-Jan Meire

themes

Since 3.0.0

$themes: (
  'cyan': (
    // Required colors!
    'color-primary': color('cyan'),
    'color-secondary': color('white'),
    'color-tertiary': color('dark-gray'),
    'color-info': color('cyan'),
    'color-success': color('green'),
    'color-warning': color('orange'),
    'color-error': color('red'),
    'color-box-shadow': $box-shadow-primary color('cyan-wcag', -3),
    'color-box-shadow-hover': $box-shadow-primary color('cyan-wcag', -2),
    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
    'accolade-stroke-light': svg-as-background('accolade-stroke', color('cyan-wcag', -4), 1280, 21),
    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('cyan', 1), 1280, 21),

    // Exceptions to colors go here...
    // These should be as limited as possible though!
    'link-color': color('cyan-wcag', 1),
    'link-hover-background': color('cyan-wcag', -4),
    'link-hover-color': color('cyan-wcag', 2),
    'link-underlined-hover-color': color('cyan-wcag', 2),

    'focus-outline': color('cyan-wcag'),

    'breadcrumb-expandable-color': color('cyan'),
    'breadcrumb-expandable-background-color-hover': color('cyan', -4),

    'button-primary-background': color('cyan-wcag'),
    'button-primary-border-color': color('cyan-wcag'),
    'button-primary-hover-background': color('cyan-wcag', 1),
    'button-primary-hover-border-color': color('cyan-wcag', 1),
    'button-primary-focus-background': color('cyan-wcag', 3),
    'button-primary-focus-border-color': color('cyan-wcag', 3),

    'button-secondary-border-color': color('cyan-wcag', -2),
    'button-secondary-color': color('cyan-wcag'),
    'button-secondary-hover-color': color('cyan-wcag', 1),
    'button-secondary-hover-border-color': color('cyan', -1),
    'button-secondary-focus-color': color('cyan-wcag', 3),
    'button-secondary-focus-background': color('cyan-wcag', -4),
    'button-secondary-focus-border-color': color('cyan-wcag', -1),

    'image-gallery-show-more-background-color': color('cyan-wcag', 3),

    'radio-background-color-checked': color('cyan', -5),
    'radio-border-color-checked': color('cyan'),
    'radio-checkmark-color': color('cyan'),

    'radio-background-color-hover-and-checked': color('cyan', -3),
    'radio-border-color-hover-and-checked': color('cyan', 3),
    'radio-color-hover-and-checked': color('cyan', 3),

    'checkbox-background-color-checked': color('cyan', -5),
    'checkbox-border-color-checked': color('cyan'),
    'checkbox-checkmark-color': color('cyan'),

    'checkbox-background-color-hover-and-checked': color('cyan', -3),
    'checkbox-border-color-hover-and-checked': color('cyan', 3),
    'checkbox-color-hover-and-checked': color('cyan', 3),

    'readspeaker-icon-color': color('cyan-wcag'),
    'readspeaker-icon-border-color': color('cyan-wcag', -2),

    'tag-border-color-hover': color('cyan-wcag', -2),
    'tag-close-button-background-hover': color('cyan-wcag', -4),
    'teaser-label-icon-color': color('cyan-wcag'),

    'gentinfo-content-shadow': color('cyan-wcag', -5),

    'tag-border-color': color('cyan-wcag', -2),
    'tag-span-border-color': color('cyan-wcag', -3),
  ),
  'orange': (
    // Required colors!
    'color-primary': color('orange'),
    'color-secondary': color('white'),
    'color-tertiary': color('dark-gray'),
    'color-info': color('cyan'),
    'color-success': color('green'),
    'color-warning': color('orange'),
    'color-error': color('red'),
    'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
    'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
    'accolade-stroke-light': svg-as-background('accolade-stroke', color('orange', -4), 1280, 21),
    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('orange', 1), 1280, 21),

    // Exceptions to colors go here...
    // These should be as limited as possible though!
    'link-color': color('dark-gray'),
    'link-hover-color': color('dark-gray', 2),
    'link-underline-color': color('dark-gray', 2),

    'button-primary-background': color('dark-gray'),
    'button-primary-border-color': color('dark-gray'),
    'button-primary-hover-background': color('dark-gray', 1),
    'button-primary-hover-border-color': color('dark-gray', 1),
    'button-primary-focus-background': color('dark-gray', 3),
    'button-primary-focus-border-color': color('dark-gray', 3),

    'button-secondary-border-color': color('dark-gray', -2),
    'button-secondary-color': color('dark-gray'),
    'button-secondary-hover-color': color('dark-gray', 1),
    'button-secondary-hover-background': color('dark-gray', -4),
    'button-secondary-hover-border-color': color('dark-gray', -1),
    'button-secondary-focus-color': color('dark-gray', 3),
    'button-secondary-focus-background': color('dark-gray', -4),
    'button-secondary-focus-border-color': color('dark-gray', -1),
  ),
  'blue': (
    // Required colors!
    'color-primary': color('blue', 3),
    'color-secondary': color('white'),
    'color-tertiary': color('dark-gray'),
    'color-info': color('cyan'),
    'color-success': color('green'),
    'color-warning': color('orange'),
    'color-error': color('red'),
    'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
    'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
    'accolade-stroke-light': svg-as-background('accolade-stroke', color('blue', -4), 1280, 21),
    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('blue', 1), 1280, 21),

    // Exceptions to colors go here...
    // These should be as limited as possible though!
    'link-color': color('dark-gray'),
    'link-hover-color': color('dark-gray', 2),
    'link-underline-color': color('dark-gray', 2),

    'button-primary-background': color('dark-gray'),
    'button-primary-border-color': color('dark-gray'),
    'button-primary-hover-background': color('dark-gray', 1),
    'button-primary-hover-border-color': color('dark-gray', 1),
    'button-primary-focus-background': color('dark-gray', 3),
    'button-primary-focus-border-color': color('dark-gray', 3),

    'button-secondary-border-color': color('dark-gray', -2),
    'button-secondary-color': color('dark-gray'),
    'button-secondary-hover-color': color('dark-gray', 1),
    'button-secondary-hover-background': color('dark-gray', -4),
    'button-secondary-hover-border-color': color('dark-gray', -1),
    'button-secondary-focus-color': color('dark-gray', 3),
    'button-secondary-focus-background': color('dark-gray', -4),
    'button-secondary-focus-border-color': color('dark-gray', -1),
  ),
  'teal': (
    // Required colors!
    'color-primary': color('teal'),
    'color-secondary': color('white'),
    'color-tertiary': color('dark-gray'),
    'color-info': color('cyan'),
    'color-success': color('green'),
    'color-warning': color('orange'),
    'color-error': color('red'),
    'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
    'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
    'accolade-stroke-light': svg-as-background('accolade-stroke', color('teal', -4), 1280, 21),
    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('teal', 1), 1280, 21),

    // Exceptions to colors go here...
    // These should be as limited as possible though!
    'link-color': color('dark-gray'),
    'link-hover-color': color('dark-gray', 2),
    'link-underline-color': color('dark-gray', 2),

    'button-primary-background': color('dark-gray'),
    'button-primary-border-color': color('dark-gray'),
    'button-primary-hover-background': color('dark-gray', 1),
    'button-primary-hover-border-color': color('dark-gray', 1),
    'button-primary-focus-background': color('dark-gray', 3),
    'button-primary-focus-border-color': color('dark-gray', 3),

    'button-secondary-border-color': color('dark-gray', -2),
    'button-secondary-color': color('dark-gray'),
    'button-secondary-hover-color': color('dark-gray', 1),
    'button-secondary-hover-background': color('dark-gray', -4),
    'button-secondary-hover-border-color': color('dark-gray', -1),
    'button-secondary-focus-color': color('dark-gray', 3),
    'button-secondary-focus-background': color('dark-gray', -4),
    'button-secondary-focus-border-color': color('dark-gray', -1),

    'heading-1-color': color('dark-gray'),
    'hero-background-color': color('teal', 2),

    'label-optional-color': color('teal', 3)
  ),
  'green': (
    // Required colors!
    'color-primary': color('green'),
    'color-secondary': color('white'),
    'color-tertiary': color('dark-gray'),
    'color-info': color('cyan'),
    'color-success': color('green'),
    'color-warning': color('orange'),
    'color-error': color('red'),
    'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
    'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
    'accolade-stroke-light': svg-as-background('accolade-stroke', color('green', -4), 1280, 21),
    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('green', 1), 1280, 21),

    // Exceptions to colors go here...
    // These should be as limited as possible though!
    'link-color': color('dark-gray'),
    'link-hover-color': color('dark-gray', 2),
    'link-underline-color': color('dark-gray', 2),

    'button-primary-background': color('dark-gray'),
    'button-primary-border-color': color('dark-gray'),
    'button-primary-hover-background': color('dark-gray', 1),
    'button-primary-hover-border-color': color('dark-gray', 1),
    'button-primary-focus-background': color('dark-gray', 3),
    'button-primary-focus-border-color': color('dark-gray', 3),

    'button-secondary-border-color': color('dark-gray', -2),
    'button-secondary-color': color('dark-gray'),
    'button-secondary-hover-color': color('dark-gray', 1),
    'button-secondary-hover-background': color('dark-gray', -4),
    'button-secondary-hover-border-color': color('dark-gray', -1),
    'button-secondary-focus-color': color('dark-gray', 3),
    'button-secondary-focus-background': color('dark-gray', -4),
    'button-secondary-focus-border-color': color('dark-gray', -1),

    'paragraph-type-background-color': color('green', -5),
    'paragraph-type-color': color('green'),
    'paragraph-course-background-color': color('green'),
    'paragraph-course-color': color('white'),

    'heading-1-color': color('dark-gray'),
    'tag-span-border-color': color('dark-gray', -2),
    'tag-border-color': color('dark-gray', -2),
  )
) !default;

Description

Themify settings. This determines the colors for all main and subthemes.

Type

Map

Used by

[mixin] spot-image
[mixin] theme
[mixin] theme-content

Author

Gert-Jan Meire

grid

mixins

extra-wide

Since 3.0.0

@mixin extra-wide() { ... }

Description

Helper mixin to break out of the grid structure in targeted places.

Parameters

None.

Requires

[variable] gutter-width
[variable] gutter-width
[variable] gutter-width

Author

Gert-Jan Meire

set-layout

Since 3.0.0

@mixin set-layout($width, $offset, $columns) { ... }

Description

Provide a helper mixin to easily position items on the grid..

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	The width in columns: e.g. 3 (... of 12).	`String`	— none
`$offset`	The offset in columns: e.g. 3 (... of 12).	`String`	— none
`$columns`	The amount of columns.	`String`	— none

Requires

[function] number
[function] str-split
[function] number
[function] str-split
[function] number
[function] str-split
[function] number
[function] str-split

Author

Gert-Jan Meire

variables

[private] susy

Since 3.0.0

$susy: (
  'columns': susy-repeat(12),
  'gutters': $gutter-width,
  'spread': 'narrow',
);

Description

This map describes the susy grid system settings.

Type

Map

Author

Gert-Jan Meire

placeholders

container

Since 3.0.0

%container { ... }

Description

The container to put a grid in.

Requires

[mixin] clearfix
[variable] bp-container
[variable] bp-container

Author

Gert-Jan Meire

content-container

Since 3.0.0

%content-container { ... }

Description

The inner container to put a grid in. This also provides the necessary padding for mobile display.

Requires

[variable] bp-max-content

Author

Gert-Jan Meire

settings

variables

styleguide-dir

Since 3.0.0

$styleguide-dir: '../styleguide' !default;

Description

Defines the style guide directory. This is used for things such as images for backgrounds in SASS.

Type

Map

Used by

[mixin] spot-image

Author

Gert-Jan Meire

uuid

Since 3.0.0

$uuid: unique-id();

Description

Generates a unique ID..

Type

Map

Author

Gert-Jan Meire

border-radius

Since 3.0.0

$border-radius: (
  'radius-0': 0,
  'radius-1': .2rem,
  'radius-2': .3rem,
  'radius-3': 1rem,
  'radius-4': 1.2rem,
  'radius-5': 1.6rem,
) !default;

Description

Defines the border radius values components can use. These values have been chosen by the design team.

Type

Map

Used by

[mixin] field-base
[function] border-radius

Author

Gert-Jan Meire

z-layers

Since 3.0.0-beta9

$z-layers: (
  'default': 1,
  'skiplink': 5,
  'mijn-gent': 6,
  'language-switcher': 6,
  'boxes': (
    'spotimage': 1
  ),
  'menu': (
    'overlay': 4,
    'base': 4
  ),
  'timeline': (
    'dots': 1,
    'video': (
      'background': 1,
      'dots': 2,
      'player': 2
    )
  ),
  'hero': (
    'base': 1,
    'caption': 3,
    'accolade': 2,
    'overlay': -1
  ),
  'teaser': (
    'overlay-link': 1,
    'content-link': 2,
    'label': 1
  ),
  'modal': (
    'base': 6, // creates new stacking context
    'overlay': -1,
    'content': 1,
    'actions': 3, // iOS fix
    'inner': 3
  )
) !default;

Description

Lists all z-index values used in the components.

Type

Map

Used by

[function] z

Author

Helena Standaert

bp-mobile

Since 3.0.0

$bp-mobile: 320px !default;

Description

Defines the min-width breakpoint for mobile screens.

Used by

[mixin] mobile
[mixin] desktop-and-below
[mixin] hide
[mixin] hide

Author

Gert-Jan Meire

bp-phablet

Since 3.0.0

$bp-phablet: 576px !default;

Description

Defines the min-width breakpoint for phablet screens.

Used by

[mixin] phablet
[mixin] hide
[mixin] hide

Author

Bart Delrue

bp-tablet

Since 3.0.0

$bp-tablet: 768px !default;

Description

Defines the min-width breakpoint for tablet screens.

Used by

[mixin] tablet-and-below
[mixin] tablet
[mixin] hide
[mixin] hide

Author

Gert-Jan Meire

bp-desktop

Since 3.0.0

$bp-desktop: 960px !default;

Description

Defines the min-width breakpoint for desktop screens.

Used by

[mixin] desktop-and-below
[mixin] desktop
[mixin] hide

Author

Gert-Jan Meire

bp-desktop-xl

Since 3.0.0

$bp-desktop-xl: 1680px !default;

Description

Defines the min-width breakpoint for extra large desktop screens.

Used by

[mixin] desktop-xl

Author

Gert-Jan Meire

bp-max-content

Since 3.0.0

$bp-max-content: 1280px !default;

Description

Defines the max width of content in a content container.

Used by

[placeholder] content-container

Author

Gert-Jan Meire

bp-container

Since 3.0.0

$bp-container: 1680px !default;

Description

Defines the max width of a grid container.

Used by

[placeholder] container
[placeholder] container

Author

Gert-Jan Meire

six-of-bp-container

Since 3.0.0

$six-of-bp-container: 32rem !default;

Description

Defines the width of six columns on container max-width. Used to limit with of block content.

Author

Bart Delrue

grid-columns

Since 3.0.0

$grid-columns: 12 !default;

Description

Defines the number of grid columns for a given grid container.

Author

Gert-Jan Meire

gutter-width

Since 3.0.0

$gutter-width: 1.2rem !default;

Description

Defines the width of grid gutters.

Used by

[mixin] extra-wide
[mixin] extra-wide
[mixin] extra-wide

Author

Gert-Jan Meire

default-paragraph-margin

Since 3.0.0

$default-paragraph-margin: 1.6rem !default;

Description

Defines the default paragraph bottom margin.

Author

Bart Delrue

default-font-family

Since 3.0.0

$default-font-family: 'Fira Sans', sans-serif !default;

Description

Defines the default font family Fira Sans.

Used by

[mixin] button
[mixin] field-base

Author

Gert-Jan Meire

default-font-weight

Since 3.0.0

$default-font-weight: 400 !default;

Description

Defines the default font weight.

Author

Gert-Jan Meire

default-font-size

Since 3.0.0

$default-font-size: 20px !default;

Description

Defines the default font size. For better readable SASS code we opted for a default font size of 20px. Therefor the body element and all elements inside it get a font-size of .8rem (which is a computed value of 16px). This allows us to calculate REM values by dividing by 20 instead of 16, which in turn gives us more readable REM values.

Author

Gert-Jan Meire

default-line-height

Since 3.0.0

$default-line-height: 1.75 !default;

Description

Defines the default line height.

Author

Gert-Jan Meire

theming

mixins

field-base

Since 3.0.0

@mixin field-base() { ... }

Description

The general field atom styling.

Parameters

None.

Requires

[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[function] svg-as-background
[function] svg-as-background
[function] svg-as-background
[function] svg-as-background
[function] svg-as-background
[variable] default-font-family
[variable] border-radius
[function] color
[function] svg-icon
[function] svg-url
[function] border-radius

Author

Gert-Jan Meire

choices-field-base

Since 3.0.0

@mixin choices-field-base() { ... }

Description

The base styling for choice fields.

Radio buttons.
Checkboxes.

Parameters

None.

Requires

[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] bold-text
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] bold-text
[mixin] theme
[mixin] theme
[mixin] theme
[function] border-radius
[function] border-radius
[function] border-radius
[function] color
[function] color
[function] color
[function] color
[function] color

Author

Gert-Jan Meire

tools

functions

str-replace

Since 3.0.0

@function str-replace($string, $search, $replace: '') { ... }

Description

Helper function to replace characters in a string.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	The needle.	`String`	— none
`$search`	The haystack.	`String`	— none
`$replace`	The separator.	`String`	`''`

Used by

[function] svg-url

Author

Gert-Jan Meire

border-radius

Since 3.0.0

@function border-radius($name, $border-radius: $border-radius) { ... }

Description

Helper function to get a border radius.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	The name of the requested border radius.	`String`	— none
`$border-radius`	The map with border radiuses defined in it.	`Map`	`$border-radius`

Requires

[variable] border-radius

Used by

[mixin] button
[mixin] field-base
[mixin] choices-field-base
[mixin] choices-field-base
[mixin] choices-field-base

Author

Gert-Jan Meire

[private] str-split

Since 3.0.0

@function str-split($string, $separator) { ... }

Description

Split a string based on a separator string.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	The string to be split.	`String`	— none
`$separator`	The separator by which to split the $string.	`String`	— none

Used by

[function] set-themified-property
[mixin] set-layout
[mixin] set-layout
[mixin] set-layout
[mixin] set-layout

Author

Gert-Jan Meire

[private] number

Since 3.0.0

@function number($value) { ... }

Description

Cast a string to a number.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The string to turn into a number.	`String`	— none

Used by

[function] set-themified-property
[mixin] set-layout
[mixin] set-layout
[mixin] set-layout
[mixin] set-layout

Author

Gert-Jan Meire

[private] svg-url

Since 3.0.0

@function svg-url($svg) { ... }

Description

Function to create an optimized svg url.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$svg`	The SVG code string to be converted for use in SASS.	`String`	— none

Requires

[function] str-replace

Used by

[mixin] field-base
[function] svg-as-background

Author

Gert-Jan Meire

[private] svg-icon

Since 3.0.0

@function svg-icon($icon, $fill-color, $width, $height) { ... }

Description

Return a colored svg icon.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$icon`	The icon to return.	`String`	— none
`$fill-color`	The color in which to return the svg icon.	`Color`	— none
`$width`	The width of the bounding box of the icon.	`Int`	— none
`$height`	The height of the bounding box of the icon.	`Int`	— none

Used by

[mixin] field-base
[function] svg-as-background

Author

Gert-Jan Meire

svg-as-background

Since 3.0.0

@function svg-as-background($icon, $fill-color, $width, $height) { ... }

Description

Return a colored svg icon as a background image.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$icon`	The icon to return. Refer to the private function svg-icon for the right key to use here.	`String`	— none
`$fill-color`	The color in which to return the svg icon.	`Color`	— none
`$width`	The width of the bounding box of the icon.	`Int`	— none
`$height`	The height of the bounding box of the icon.	`Int`	— none

Requires

[function] svg-url
[function] svg-icon

Used by

[mixin] field-base
[mixin] field-base
[mixin] field-base
[mixin] field-base
[mixin] field-base

Author

Gert-Jan Meire

mixins

clearfix

Since 3.0.0

@mixin clearfix() { ... }

Description

Clearfix

For modern browsers

The space content is one way to avoid an Opera bug when the contenteditable attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that are clearfixed.
The use of table rather than block is only necessary if using :before to contain the top-margins of child elements.

Source: http://nicolasgallagher.com/micro-clearfix-hack/

Parameters

None.

Used by

[placeholder] container

Author

Gert-Jan Meire

element-states

Since 3.0.0

@mixin element-states($state, $state-hover, $property) { ... }

Description

Color element states like active, visited, hover and focus.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$state`	The default state of the element.	`String`	— none
`$state-hover`	The hover state of the element.	`String`	— none
`$property`	The property to be styled.	`String`	— none

Author

Gert-Jan Meire

no-link-style

Since 3.0.0

@mixin no-link-style() { ... }

Description

Force a link without link style.

Parameters

None.

Used by

[placeholder] no-link-style

Author

Gert-Jan Meire

[private] small-text

Since 3.0.0

@mixin small-text() { ... }

Description

Defines small text.

Parameters

None.

Used by

[mixin] button-small

Author

Gert-Jan Meire

[private] medium-text

Since 3.0.0

@mixin medium-text() { ... }

Description

Defines medium text.

Parameters

None.

Used by

[mixin] button-medium

Author

Gert-Jan Meire

[private] large-text

Since 3.0.0

@mixin large-text() { ... }

Description

Defines large text.

Parameters

None.

Used by

[mixin] button-large

Author

Gert-Jan Meire

[private] extra-large-text

Since 3.0.0

@mixin extra-large-text() { ... }

Description

Defines extra large text.

Parameters

None.

Author

Gert-Jan Meire

[private] bold-text

Since 3.0.0

@mixin bold-text() { ... }

Description

Defines bold text.

Parameters

None.

Used by

[mixin] button
[mixin] choices-field-base
[mixin] choices-field-base
[placeholder] list-no-style

Author

Helena Standaert

[private] full-width

Since 3.0.0

@mixin full-width() { ... }

Description

Displays an element full-width on the page. Breaks out of it's parent container.

Parameters

None.

Author

Helena Standaert

[private] focus-bare

Since 3.0.0

@mixin focus-bare() { ... }

Description

Add accessibility focus style.

Parameters

None.

Requires

[mixin] theme

Author

Gert-Jan Meire

link-background

Since 3.0.0

@mixin link-background($underline, $hover: null, $underline-exception: null, $hover-exception: null) { ... }

Description

Applies a hover animation using the background. Typically applied to elements containing text.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$underline`	Underline color for the link.	`String`	— none
`$hover`	Background color for the link on hover.	`String`	`null`
`$underline-exception`	The exception value for the underline color. This is the exception optionally used in subthemes.	`String`	`null`
`$hover-exception`	The exception value for the background color. This is the exception optionally used in subthemes.	`String`	`null`

Requires

[mixin] theme
[mixin] theme-content

Author

Helena Standaert

reset-link-background

Since 3.0.0-beta9

@mixin reset-link-background() { ... }

Description

Undo default link styling.

Parameters

None.

Author

Helena Standaert

link-underlined

Since 3.0.0-beta9

@mixin link-underlined($active-selector: null) { ... }

Description

Link styling with an underline on-hover

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$active-selector`	Selector for active elements. The 'active' state styling is applied to this selector.	`String`	`null`

Requires

[mixin] theme
[mixin] theme

Author

Helena Standaert

table-backgrounds

Since 3.0.0-beta10

@mixin table-backgrounds($child-selector: null) { ... }

Description

Apply background colors for tables

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$child-selector`	Selector for child elements.	`String`	`null`

Requires

[mixin] theme-content
[mixin] theme-content
[mixin] theme-content

Author

Helena Standaert

General

functions

map-deep-get

@function map-deep-get($map, $keys...) { ... }

Description

Deep get function to get a value from nested sass maps.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	Sass map that contains the desired value.	`Map`	— none
`$keys`	Chain of keys that represent the position of the desired value.	`Arglist`	— none

Returns

Any type —

Desired value.

Used by

[function] z

Author

Hugo Giraudel

z

@function z($layers) { ... }

Description

Returns the z-index value for a certain layer. The z-layers map is defined in _vars.scss.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$layers`	Name of	`String`	— none

Requires

[function] map-deep-get
[variable] z-layers

css

.nowrap

.nowrap { ... }

Description

Prevent text wrapping.

.bold

.bold { ... }

Description

Add bold styling

.element-hidden

.element-hidden { ... }

Description

Hide elements from all users.

Used for elements which should not be immediately displayed to any user. An example would be a collapsible fieldset that will be expanded with a click from a user. The effect of this class can be toggled with the jQuery show() and hide() functions.

.element-invisible

.element-invisible { ... }

Description

Hide elements visually, but keep them available for screen-readers.

Used for information required for screen-reader users to understand and use the site where visual display is undesirable. Information provided in this manner should be kept concise, to avoid unnecessary burden on the user. '!important' is used to prevent unintentional overrides.

&.standalone-link:not(.no-icon)

&.standalone-link:not(.no-icon) { ... }

Description

Stand alone links.

&[download]:not(.no-icon)

&[download]:not(.no-icon) { ... }

Description

Download links.

&[href^="mailto:"]:not(.no-icon)

&[href^="mailto:"]:not(.no-icon) { ... }

Description

Mail links.

&[href^="tel:"]:not(.no-icon)

&[href^="tel:"]:not(.no-icon) { ... }

Description

Phone links.

&[href^="http://"]:not(.no-icon), &[href^="https://"]:not(.no-icon)

&[href^="http://"]:not(.no-icon),
  &[href^="https://"]:not(.no-icon) { ... }

Description

External links get an indicator.

&[download]

&[download] { ... }

Description

Download links.

&.standalone-link:not(.no-icon)

&.standalone-link:not(.no-icon) { ... }

Description

Stand alone links.

.text-right

Since 3.0.0

.text-right { ... }

Description

Helper class to align text right.

Author

Gert-Jan Meire

.text-left

Since 3.0.0

.text-left { ... }

Description

Helper class to align text left.

Author

Gert-Jan Meire

[class*="cs--"] & a

[class*="cs--"] & a { ... }

Description

Links in the breadcrumb should never have icons.

a

a { ... }

Description

All links shouldn't have an indicator.

&-header

&-header { ... }

Description

Header

&-content

&-content { ... }

Description

Content

&-actions

&-actions { ... }

Description

Actions

[class*="cs--"] & a

[class*="cs--"] & a { ... }

Description

Links in the footer should never have icons.

&-slot

&-slot { ... }

Description

Programme slot.

&-detail

&-detail { ... }

Description

Programme detail

a

a { ... }

Description

External links other than group Ghent get an indicator.

placeholders

no-link-style

%no-link-style { ... }

Description

Force a link to have no link styling.

Requires

[mixin] no-link-style

button-alert

Since 3.0.0

%button-alert { ... }

Description

Alert button type.

Requires

[mixin] button-icon
[mixin] button-icon
[variable] box-shadow-primary
[function] color

Author

Gert-Jan Meire

button-primary

Since 3.0.0

%button-primary { ... }

Description

Primary button type.

Requires

[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme

Author

Gert-Jan Meire

button-secondary

Since 3.0.0

%button-secondary { ... }

Description

Secondary button type.

Requires

[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme
[mixin] theme

Author

Gert-Jan Meire

button-success

Since 3.0.0

%button-success { ... }

Description

Success button type.

Requires

[function] color

Author

Gert-Jan Meire

a-remove-indicator

%a-remove-indicator { ... }

Description

External links other than group Ghent get an indicator.

list-no-style

Since 3.0.0

%list-no-style { ... }

Description

Remove default styling from a list.

Requires

[mixin] bold-text

Author

Gert-Jan Meire

variables

directions

$directions: top, right, bottom, left;

Description

Margin helper classes.

mixins

hide

@mixin hide() { ... }

Description

Hiding helper classes.

Parameters

None.

Requires

[variable] bp-mobile
[variable] bp-mobile
[variable] bp-phablet
[variable] bp-phablet
[variable] bp-tablet
[variable] bp-tablet
[variable] bp-desktop