🔗

Add Color

If you've got project-specific colours that need sharing and you want to make use of the color() function, use the following mixin:

@include add-color(bar, #C0FFEE);

.foo {
  color: color(bar);
}

Breakout

Breakout of a parent element's max-width to fill the entire viewport width.

.foo {
  @include breakout();
}

Focus Styles

Generates a consistent outline shadow for use on :focus or class-based .has-focus states.

.foo {
  @include focus-styles();
}

// or for dark areas of UI:

.foo {
  @include focus-styles(invert);
}

Hocus

Not to be confused with the 1993 comedy 'Hocus Pocus', Hocus allows you to set :hover and :focus styles in one go.

.foo {
  @include hocus() {
    text-decoration: wavy underline;
  }
}

Hide Visually

Visually hide content, leaving it accessible to screen readers and ATs.

Note: This is also provided as a utility class in sky-toolkit-core/utilities/hide.

Further reading: Jonathan Snook's 'Hiding Content for Accessibility'.

.foo {
  @include hide-visually();
}

Setting $option to reset will declare properties that override the original styles to enable visually hidden content to be redisplayed.

Not passing any arguments will declare each value with !important - useful for building out a utility or override. Set $important to false to prevent this behaviour.

.foo {
  @include hide-visually(reset, false);
}

Hide Completely

Completely hide content both visually from the screen, and from screen readers and ATs.

Note: This is also provided as a utility class in sky-toolkit-core/utilities/hide.

.foo {
  @include hide-completely();
}

Clearfix

Clear any floated elements within a container.

Note: This is also provided as a utility class in sky-toolkit-core/utilities/clearfix.

.foo {
  @include clearfix();
}

Responsivize

Quickly produce responsive classes that apply at specific/all breakpoints. Use the @include responsivize() mixin and pass in any breakpoint/s defined in our settings, as a list of arguments. The mixin will then output classes following our @breakpoint-name convention.

Without any arguments, the mixin will output content that works at all breakpoints and each of them specifically.

For example, defining a class that applies at the small breakpoint only:

.foo {
  @include responsivize(small) {
    color: red;
  }
}

// Outputs to:
@media (min-width: 420px) {
  .foo\@small {
    color: red;
  }
}

and for defining a class that applies at small and medium breakpoints only:

.foo {
  @include responsivize(small, medium) {
    color: red;
  }
}

// Outputs to:
@media (min-width: 420px) {
  .foo\@small {
    color: red;
  }
}

@media (min-width: 740px) {
  .foo\@medium {
    color: red;
  }
}

Edge Position

To simplify and avoid repeated use of individual edge positioning (top, right, bottom, left) when offsetting all edges. Passing in a size value will offset all edges by that value. Passing in no arguments will set all edges to zero.

.foo {
  @include edge-positioning(5px);
}

// Outputs to:
.foo {
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
}

Height-sizing

Fixed height design is generally frowned upon, but for consistency's sake, it's important our key interactions follow a common height pattern. Our height-sizing mixin helps us to set a common height on elements based on our text-body's line-height value via two options:

1. fixed (default) - Outputs height-sizing with a fixed height value.
2. padding - outputs height-sizing with padding that mimics the fixed option.

.foo {
  @include height-sizing(fixed);
}

Browser Hack

Allows defining rulesets specific to particular browser(s). Set the browser versions to target by name. Currently supported:

• ie11
• edge

.foo {
  @include browser-hack(ie11, edge) {
    background: pink;
  }
}