Hint component

A discreet style to show additional or hint information

Example

html

<span class="hint">A tiny hint</span>

$hint-color (Color)

scss

$hint-color: $dark-gray !default;

Text color for .hint

$hint-font-size (Number)

scss

$hint-font-size: 13px !default;

Font size for .hint

Price component

Simple price style with currency

Example

html

<span class="price" data-currency="CHF">127.39</span>

Headings

Example

html

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

@mixin fluid()

Mixin to apply fluid values to a given property depending on optinal min and max widths
Warning: You shall not use the value 0, nor use different units for the given params

Parameters

$property: (String)

The CSS property which should have a fluid value

$min-val: (Number)

The minimum value $property should have at $min-vw

$max-val: (Number)

The maximum value $property should have at $max-vw

$min-vw: map-get($breakpoints, phone) (Number)

Minimum width at which $min-val is applied

$max-vw: map-get($breakpoints, wide) (Number)

Maximum width at which $max-val is applied

Example

scss

@include fluid(font-size, 12px, 24px)
@include fluid(padding, 10px, 20px, map-get($breakpoints, tablet), map-get($breakpoints, desktop))