samos

clearfix

@include clearfix;

Includes the clearfix hack.

shade

color: shade($color, $percentage);

Shades the color (mixes it towards black).

tint

color: tint($color, $percentage);

Tints the color (mixes it towards white).

centered-container

@include centered-container($max-width, $min-margin);

This mixin centers a container if the viewport is wider than a max width. If the screen is more narrow, it will have a margin on both sides to the edge of the viewport.

content

@include content($margin);

The content mixin applies relative margins to every elements. It automatically styles

• generic margins
• margins related to headline classes (.h1 - .h6)
• buttons (.button)
• lists (ul and ol)

All these margins are relative to the base margin, you can provide to mixin. This ensures that there is consistent spacing in the content elements.

responsive-font

@include responsive-font(3vw, 16px, 64px);

Generates a responsive font size. The font size will scale with browser width (if using vw) or browser height (vh). You must define a minimum font size, so that the font never gets too small.

You can optionally also define a maximum font size.

emoji-fonts

@include emoji-fonts("Font Family 1", "Font Family 2");

This mixin appends the different font families, that provide native support for emojis on all operating systems.

system-fonts

@include system-fonts("Font Family 1", "Font Family 2");

This mixins appends the default font families for all operating systems, so that the fallback is as close to the native look as possible.

import-fonts

@include import-fonts(
    $path-prefix,
    $font-family,
    $font-weights,
    $font-styles: (normal italic),
    $types: (woff2 woff)
);

This mixins generates the @font-face definitions for all supported fonts.

Example:

$font-weights: (light: 300, bold: 700);

@include import-fonts(
    "../font/neue-helvetica",
    "Neue Helvetica",
    $font-weights
);

text-inputs

@include text-blocks {
    @content;
}

This mixin targets all input + textarea elements except of radio buttons and checkboxes.

on-interaction

@include on-interaction {
    @content;
}

Wraps the content in all typical interaction states (:hover, :focus and :active).

normalize-to-px

width: normalize-to-px($value);

Normalizes a value to px, according to a base font-size of 10px. Supported units: px, rem.

on-max-width

@include on-max-width($max-width) {
    @content;
}

Mixin to set a max-width mixin.

on-min-width

@include on-min-width($min-width) {
    @content;
}

Mixin to set a min-width mixin.

center-element

@include center-element;

Centers an element using position: absolute and transform.

center-children

@include center-children;

Centers all children using flexbox.

fullscreen

@include fullscreen;

Stretches an element to fill at least the whole screen (can be longer if the content is too long).

fill-parent

@include fill-parent;

Fills the parent element using position: absolute.

flex-fill-width

@include flex-fill-width;

Fills the remaining width of a flexbox container.

flex-fill-height

@include flex-fill-height;

Fills the remaining height of a flexbox container.

fixed-flex-width

@include fixed-flex-width($width: null);

Disables resizing of the flex element, and optionally sets it to a fixed size.

fixed-flex-height

@include fixed-flex-height($height: null);

Disables resizing of the flex element, and optionally sets it to a fixed size.

fixed-flex-item

@include fixed-flex-item($width: null);

Disables resizing of the flex element, and optionally sets it to a fixed size.

flex-equal-columns

@include flex-equal-columns;

If set on all children of a flexbox element, the children will have equal width.

smooth-scroll

@include smooth-scroll;

This mixin enables smooth (= momentum) scrolling on mobile devices.

aspect-ratio

@include aspect-ratio($width, $height);

Uses the padding-bottom trick to set the aspect ratio of the element.

Example implementation of a fully responsive video container:

.video-container {
    // set the aspect ratio to 16:9
    @include aspect-ratio(16, 9);
    position: relative;

    .video-player {
        @include fill-parent;
    }
}

square

@include square($size);

Sets the width and height of an element to the same value.

color-svg

@include color-svg($color);

Sets the styling as fill + stroke color, according to our predefined SVG classes.

inline-svg

background-image: inline-svg('<svg ...>...</svg>');

URL-encodes the inline svg and returns it as a data url embedded in an url().

svg-child

@include svg-child;

Sets the default styling for all SVG children, namely display: block and width + height to 100%. This should be the default, as you can set the width + height on the container around the SVG. This is the most robust way to size inline SVGs.

text-overflow

@include text-overflow;

This mixin disables text wrapping, cuts the text off and adds ellipsis at the end. Use it for single line texts that are external input, but only allow for a limited width.

transition

@include transition(
    $properties,
    $duration: .15s,
    $easing: ease-in-out,
    $will-change: true
);

This mixin eases definitions of transitions. The default values are already optimized for all purposes, so try to stay with them (and use the values (especially duration and easing) consistency throughout your app).

Example:

@include transition(height width top);

// with custom duration:
@include transition(height width top, .5s);

str-replace

$replacements: ("a": "b", "c": "d");
content: str-replace($some-variable, $replacements);

Replaces all occurences of all search strings with their respective replacements.

url-encode

@include url-encode($string);

URL-encodes the given string.

hide-text

@include hide-text($absolute: false);

This mixin hides text accessibly, so that it is still readable via screen readers.

text-overflow-ellipsis

@include text-overflow-ellipsis;

This mixin disables text wrapping, cuts the text off and adds ellipsis at the end. Use it for single line texts that are external input, but only allow for a limited width.