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

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

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

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

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

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

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

Author

  • Gert-Jan Meire

buttons

mixins

button-small

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

Description

Button - small variant.

Parameters

None.

Requires

Used by

Author

  • Gert-Jan Meire

button-medium

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

Description

Button - medium variant.

Parameters

None.

Requires

Used by

Author

  • Gert-Jan Meire

button-large

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

Description

Button - large variant.

Parameters

None.

Requires

Used by

Author

  • Gert-Jan Meire

button-disabled

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

Description

Button - disabled variant.

Parameters

None.

Requires

Used by

Author

  • Gert-Jan Meire

button

Since 3.0.0
@mixin button() { ... }

Description

General button styling.

Parameters

None.

Requires

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

Author

  • Gert-Jan Meire

button-icon

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

Description

Define a button with an icon.

Parameters

None.

Used by

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

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 Nameparameter Descriptionparameter Typeparameter Default value
$image

The filename of the spot image.

Stringnull
$size

The default width + height for the spot image.

String8rem

Requires

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 Nameparameter Descriptionparameter Typeparameter Default value
$property

The property to themify.

Stringnull
$default

The default value for the themified property.

Stringnull
$exception

The exception value for the themified property. This is the exception optionally used in subthemes.

Stringnull

Requires

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$default

The default value for the themified property.

Stringnull
$exception

The exception value for the themified property. This is the exception optionally used in subthemes.

Stringnull

Example

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

Requires

Used by

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 Nameparameter Descriptionparameter Typeparameter 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

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$base-color

The key of the color in the $colors map.

Color none
$background

The color to mix with.

Color#fff

Requires

Used by

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 Nameparameter Descriptionparameter Typeparameter 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.

Int0
$transparent

True when you need a RGBA color, otherwise HEX value will return.

Booleanfalse
$colors$

The colors array to use to calculate the correct color tint.

Map$colors

Requires

Used by

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 Nameparameter Descriptionparameter Typeparameter 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

Used by

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 Nameparameter Descriptionparameter Typeparameter 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

Used by

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

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

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

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

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

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 Nameparameter Descriptionparameter Typeparameter 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

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

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

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

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

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

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

Author

  • Bart Delrue

bp-tablet

Since 3.0.0
$bp-tablet: 768px !default;

Description

Defines the min-width breakpoint for tablet screens.

Used by

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

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

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

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

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

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

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

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

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 Nameparameter Descriptionparameter Typeparameter Default value
$string

The needle.

String none
$search

The haystack.

String none
$replace

The separator.

String''

Used by

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 Nameparameter Descriptionparameter Typeparameter 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

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$string

The string to be split.

String none
$separator

The separator by which to split the $string.

String none

Used by

Author

  • Gert-Jan Meire

[private] number

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

Description

Cast a string to a number.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

The string to turn into a number.

String none

Used by

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 Nameparameter Descriptionparameter Typeparameter Default value
$svg

The SVG code string to be converted for use in SASS.

String none

Requires

Used by

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 Nameparameter Descriptionparameter Typeparameter 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

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 Nameparameter Descriptionparameter Typeparameter 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

Used by

Author

  • Gert-Jan Meire

mixins

clearfix

Since 3.0.0
@mixin clearfix() { ... }

Description

Clearfix

For modern browsers

  1. 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.
  2. 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

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 Nameparameter Descriptionparameter Typeparameter 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

[private] small-text

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

Description

Defines small text.

Parameters

None.

Used by

Author

  • Gert-Jan Meire

[private] medium-text

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

Description

Defines medium text.

Parameters

None.

Used by

Author

  • Gert-Jan Meire

[private] large-text

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

Description

Defines large text.

Parameters

None.

Used by

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

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

Author

  • Gert-Jan Meire

table-backgrounds

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

Description

Apply background colors for tables

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$child-selector

Selector for child elements.

Stringnull

Requires

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 Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter Default value
$layers

Name of

String none

Requires

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

.modal-overlay

.modal-overlay { ... }

Description

Overlay

[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

visually-hidden

%visually-hidden { ... }

Description

Visually hidden

button-alert

Since 3.0.0
%button-alert { ... }

Description

Alert button type.

Requires

Author

  • Gert-Jan Meire

button-primary

Since 3.0.0
%button-primary { ... }

Description

Primary button type.

Requires

Author

  • Gert-Jan Meire

button-secondary

Since 3.0.0
%button-secondary { ... }

Description

Secondary button type.

Requires

Author

  • Gert-Jan Meire

button-success

Since 3.0.0
%button-success { ... }

Description

Success button type.

Requires

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

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