PatternLab (1.0.31)

Appearance

Useful Mixins ​

Z-index ​

This mixin returns the z-index value for a given key.
@include z-index("modal")

If-Important ​

Returns !important if $important is true, otherwise returns nothing.

Use "if-important()" mixin like this in another mixin:

scss
@mixin print-font($important: false) {
  font-size: 12px if-important($important);
}

Aligning ​

Align an element vertically or horizontally.

  • Usage: align($vertical: true, $horizontal: false, $position: relative)

Examples:

  • Horizontal Centering: @include align(false, true, relative);
  • Vertical Centering of an absolute element: @include align(true, false, absolute);

Clearfix ​

Adds clearfix to the current element. Usage: @include cf();

Hide and Show ​

Use these mixins to hide and show elements.

  • use @include hidden; to hide an element from both screenreaders and browsers
  • use @include invisible; to hide an element visually
  • use @include visible("block"); to show an element with display: block

Icons ​

Add Search-Icon ​

Adds a search icon to an input field with a position parameter: @include add-search-icon("right");

Add Arrow ​

@include generate-arrows($size, $color, $border-color) generates all arrow classes for a specific width, background- and border-color in all horizontal and vertical positions (left, right, center, up, down).

The generated classes are:
.-arrow-[up/down]-[left/right]

Pseudo Elements ​

Returns default CSS properties for pseudo-elements (:before and :after).
@include pseudo(block, absolute, "\f002")

Styling ​

Mouseover Effect ​

Adds a pointer-cursor on hover and focus:
@include hover-pointer();

Overflow Wrap ​

@include overflow-wrap(); breaks multiple lines in an otherwise unbreakable place (e.g. to avoid broken layouts due to long strings)

scss
@mixin overflow-wrap() {
  overflow-wrap:break-word;
  word-wrap:break-word;
  hyphens:auto;
}

2026 - Pharma4u