Skip-link

Variables

Module Settings

$config: (
  "padding" : (1em 2em),
  "background-color" : white,
  "box-shadow" : true,
  "border-radius" : true,
  "z-index" : true
);

File Information

• File: _skip-link.scss
• Group: skip-link
• Type: variable
• Lines (comments): 31-32
• Lines (code): 34-40

Mixins

Change modules $config

File Information

• File: _skip-link.scss
• Group: skip-link
• Type: mixin
• Lines (comments): 42-45
• Lines (code): 47-49

Examples

@include ulu.component-skip-link-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	Map	Map of changes

Require

• $config

Output component stylesheet

• Note: This needs to be paired with the display helper class "hidden-visually-focusable"
• Note: Remember to add an id to the content you want to skip to. Often this will go to the content after the nav menu.

File Information

• File: _skip-link.scss
• Group: skip-link
• Type: mixin
• Lines (comments): 61-74
• Lines (code): 76-93

Examples

@include ulu.component-skip-link-styles();

<a 
  class="skip-link hidden-visually-focusable" 
  href="#main-content"
>
  Skip to main content
</a>
...
<main id="main-content">...</main>

Require

• get()

Functions

Get a config option

File Information

• File: _skip-link.scss
• Group: skip-link
• Type: function
• Lines (comments): 51-54
• Lines (code): 56-59

Examples

@include ulu.component-skip-link-get("property");

Parameters

Name	Type	Description
$name	Map	Name of property

Require

• $config