API Doc

messages

mixins

error Anchor to error









@mixin error($key, $self-closing: false) { 
  @include item('error', $key, $self-closing);
 }

View source on GitHub

Description

Defines an error

Parameters
parameter Name parameter Description parameter Type parameter Default value
$key

Key used to fetch message in $messages map

String none
$self-closing

Whether or not to use message on self or next node

Bool false
Example
.selector {
  @include error("no-src");
}

warning Anchor to warning









@mixin warning($key, $self-closing: false) { 
  @include item('warning', $key, $self-closing);
 }

View source on GitHub

Description

Defines a warning

Parameters
parameter Name parameter Description parameter Type parameter Default value
$key

Key used to fetch message in $messages map

String none
$self-closing

Whether or not to use message on self or next node

Bool false
Example
.selector {
  @include warning("abbr");
}

obsolete Anchor to obsolete









@mixin obsolete($key, $self-closing: false) { 
  @include item('obsolete', $key, $self-closing);
 }

View source on GitHub

Description

Defines an obsolete thing

Parameters
parameter Name parameter Description parameter Type parameter Default value
$key

Key used to fetch message in $messages map

String none
$self-closing

Whether or not to use message on self or next node

Bool false
Example
.selector {
  @include obsolete("any");
}

advice Anchor to advice









@mixin advice($key, $self-closing: false) { 
  @include item('advice', $key, $self-closing);
 }

View source on GitHub

Description

Defines an advice

Parameters
parameter Name parameter Description parameter Type parameter Default value
$key

Key used to fetch message in $messages map

String none
$self-closing

Whether or not to use message on self or next node

Bool false
Example
.selector {
  @include advice("nav");
}

disable-tests Anchor to disable-tests





@mixin disable-tests($keys...) { 
  @each $key in $keys {
    $disabled-tests: append($disabled-tests, $key) !global;
  }
 }

View source on GitHub

Description

Disable specific tests

Parameters
parameter Name parameter Description parameter Type parameter Default value
$keys

Keys of tests to disable

Arglist none
Example
@include disable-tests('error:tab-order', 'advice:empty-class');
Requires

a11y-head Anchor to a11y-head









@mixin a11y-head($tag..., $theme...) { 
  // Because it's in the <head>
  display: block !important;

  &::after {
    @include a11y-before;
    content: $tag;
    background: theme-conf($theme, 'color') !important;
    color: #fff !important;
  }
 }

View source on GitHub

Description

Display messages on <head>'s tags

Parameters
parameter Name parameter Description parameter Type parameter Default value
$tag

Text to display, recommended: tag name

Arglist none
$theme

Message's level

Arglist none
Example
@include a11y-head('title', 'error')

Configuration

mixins

set-minimum-level Anchor to set-minimum-level





@mixin set-minimum-level($level) { 
  $level: to-lower-case($level);
  $levels: map-keys($themes);

  @if not index($levels, $level) {
    $default-level: nth($levels, -1);
    $level: $default-level;

    @warn 'Level `#{$level}` does not exist. '
      + 'Please choose one of `#{inspect($levels)}`. '
      + 'Falling back on `#{$default-level}`';
  }

  $minimum-level: $level !global;
 }

View source on GitHub

Description

Defines the minimum level used by a11y.css. Either:

  • error for errors only;
  • warning for errors and warnings;
  • obsolete for everything but advices;
  • advice for everything.

Parameters
parameter Name parameter Description parameter Type parameter Default value
$level none String none
Output

Nothing

Example
@include set-minimum-level('error');
Requires

base-content Anchor to base-content





@mixin base-content($minimum-level) { 
  $background: ();
  $content: ();

  // @note Line breaks can be triggered by «\A» within the message content.
  // @see issue #7, solution from @7studio
  @each $theme in map-keys($themes) {
    @if is-level-enough($theme) {
      $background-offset: theme-conf($theme, 'background-offset');
      $background-theme:
        transparent $background-offset,
        theme-conf($theme, 'color') $background-offset,
        theme-conf($theme, 'color') ($background-offset + 0.2em),
        transparent ($background-offset + 0.2em);
      $background: append($background, $background-theme, 'comma');
      $content-theme: quote(message('ui', $theme)) ': ' #{counter(unquote($theme))} '\A ';
      $content: append($content, $content-theme);
    }
  }

  background-image: linear-gradient(to bottom, transparent, $background, transparent 100%);
  content: $content;
 }

View source on GitHub

Description

Defines head::after’s content and background-image depending on $minimum-level.

Parameters
parameter Name parameter Description parameter Type parameter Default value
$minimum-level

Inheriting minimum level

String none
Output

content and background-image

Example
@include base-content($minimum-level);
Requires

a11y Anchor to a11y













@mixin a11y($theme, $key, $self-closing: false) { 
  $base-selector: '&::before';

  border: 4px solid theme-conf($theme, 'color');
  counter-increment: unquote($theme);
  position: relative;

  @if $self-closing {
    $base-selector: '& ~ ::after';

    ~ * {
      position: relative;
    }
  }

  #{$base-selector} {
    @include a11y-before;
    @include message($theme, $key);
    background: theme-conf($theme, 'color') !important;
    color: #fff !important;
    z-index: theme-conf($theme, 'index') !important;
  }
 }

View source on GitHub

Description

Main mixin to display a message.

Parameters
parameter Name parameter Description parameter Type parameter Default value
$theme

Theme

String none
$key

Key used to fetch message in $messages map

String none
$self-closing

Whether or not to use message on self or next node

Bool false

a11y-reset Anchor to a11y-reset

@mixin a11y-reset() { 
  counter-increment: none !important;
  border: 0 !important;

  &::before,
  ~ ::after {
    content: '' !important;
    display: none !important;
  }
 }

View source on GitHub

Description

Provides a way to cancel a message.

variables

themes Anchor to themes

$themes: (
  'error': (
    'color': #d90b0b,
    'index': 2147483647,
    'background-offset': 1.4em
  ),
  'warning': (
    'color': #f50,
    'index': 2147483646,
    'background-offset': 2.9em
  ),
  'obsolete': (
    'color': royalblue,
    'index': 2147483645,
    'background-offset': 4.4em
  ),
  'advice': (
    'color': green,
    'index': 2147483644,
    'background-offset': 5.9em
  ),
);

View source on GitHub

Description

This map holds configuration for all themes. Each theme has an icon, a color and a z-index, and a background offset.

Type

Map

Map structure
Map key Name Map key Description Map key Type Map key Value
theme none Map none
theme.color

Theme color

Color none
theme.index

Theme z-index

Number none
theme.background-offset

Theme background-offset

Length none
Used by