open-index/open-npm huggingface dataset:
npm package: @springernature/global-skip-link
Description: Full width link to skip to main content
Author: Springer Nature
Latest version: 2.0.1

# Skip link

Skip link lets keyboard and assistive technology users go to the main content of the page without having to tab through the navigation elements.

## When to use this component

All web pages should have a skip link.

## How it works

The skip link is the first focusable element on the page. It stays visually hidden until it is focused by the first press of the tab key after page load. 

### Installation

To use the skip link component, enter the following command in your Terminal:

`npm install @springernature\global-skip-link`

Then, choose the brand you need and import the installed component code into your scss file:

```scss
// Choose one of these brands to include with your settings:

@import '@springernature/global-skip-link/scss/10-settings/default';
@import '@springernature/global-skip-link/scss/10-settings/springernature';
@import '@springernature/global-skip-link/scss/10-settings/nature';
@import '@springernature/global-skip-link/scss/10-settings/springer';

// Include this with your other components
@import '@springernature/global-skip-link/scss/50-components/skip-link';
```

### Link

The skip link should be a link to the main container of the page. You must supply an id for the link to point to.

For example, if you supply `main` as the `id`:

```html
<main id="main">
...
</main>
```

then the link would be:

```html
<a class="c-skip-link" href="#main">
    Skip to main content
</a>
```

### Focus

The target section must be focusable so that users can then continue to tab through content. Most browsers will do this automatically. However, Internet Explorer 11 does not.

To help skip link work for keyboard and assistive technology users in IE11, add a negative `tabindex` to the main element. 

```html
<main id="main" tabindex="-1">
```

Some applications might display the browser's default focus styles around the main container. To prevent this, you can remove the focus styles programmatically.

```css
main:focus {
  outline: none;
}
```

### Iframe

If there is an iframe in the page, you must add the skip link markup before it.

## Template

You can see an example in the [skip link `demo` folder](https://github.com/springernature/frontend-toolkits/tree/main/toolkits/global/packages/global-skip-link/demo).

## Help improve this page

If you’ve got a question, idea or suggestion about how to improve this component or guidance, post in the [#ask-elements Slack channel](https://springernature.slack.com/archives/CNBTFLBLP).
npm package: @springernature/global-spacing
Description: Function that ensures spacing values exist in a predefined list
Author: Springer Nature
Latest version: 0.1.0
Deprecated: https://github.com/springernature/frontend-toolkits/blob/master/DEPRECATED.md

# global-spacing

Exposes a `global-spacing` function that validates spacing units passed to it against a SASS list named `$global-spacing`.

This global-spacing package defines `$global-spacing` is an empty list, so must be redefined at either the brand or product level. For example:

```scss
$global-spacing: (
    5,
    10,
    15,
    20,
    40,
    60
);
```

The `global-spacing()` function takes up to 4 arguments, which represent the values you would normally pass when using shorthand spacing CSS properties.

## Example usage

`padding: global-spacing(5)` outputs `padding: 5px`

`margin: global-spacing(5, 5, 10)` outputs `margin: 5px 5px 10px`

If any value passed to the `global-spacing()` function does not exist in the `$global-spacing` list, the function will return `null`.

### What if I need a value not defined in the list?

`$global-spacing` is intended to improve consistency, not be a rigid ruleset.
There are scenarios when the values in `$global-spacing` won't be suitable.
For example, you may need to use a keyword value such as `auto`, `inherit`, `unset`, or you may need a specific numberic value because 'reasons'.

In those scenarios there are two options:

1) Use the shorthand and then overwrite the values as necessary

```scss
margin: global-spacing(5, 5, 10);
margin-right: auto;
```

2) Use the long hand

```scss
margin-top: global-spacing(5);
margin-right: auto;
margin-bottom: global-spacing(10);
margin-left: global-spacing(5);
```