10 Mixins & functions

Library to manage contrast for a11y.

In this examples $constast = 4.5 and $contrast-high = 7

Returns first color of the list matching contrast ratio.

Returns false and throws a warning message if no match.

This stylus code

.foo
    background #000
    color _contrast_choose(#000, #888 #aaa #ddd #fff)
    border-bottom 1px solid _contrast_choose(#000, #888 #aaa #ddd #fff, $contrast-high)

Will render this CSS

.foo {
    background: #000;
    color: #888;
    border-bottom: 1px solid #aaa;
}

Write font-family and fallback if $fontload-js is true

Colette provides mixins to create custom responsive grid layouts.

Generate grid columns.

Generate grid columns according to breakpoints and media queries defined in settings.

Generate an offset left margin, based on column width.

Mixin to help to generate variable of colors decomposed in hue, saturation and lightness

:root
    /** red */
    _hslVars(--red, red)
    /** green */
    _hslVars(--green, green)
    /** blue */
    _hslVars(--blue, blue)

:root {
    /** red */
    --red-h: 0deg;
    --red-s: 100%;
    --red-l: 50%;
    --red: hsl(var(--red-h), var(--red-s), var(--red-l));
    /** green */
    --green-h: 120deg;
    --green-s: 100%;
    --green-l: 25.098039215686274%;
    --green: hsl(var(--green-h), var(--green-s), var(--green-l));
    /** blue */
    --blue-h: 240deg;
    --blue-s: 100%;
    --blue-l: 50%;
    --blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l));

Returns encoded inline svg

$svg - svg code

.foo
    background-image _inlineSvg('<svg viewBox="0 0 90 30" width="30" height="30"><circle cx="15" cy="15" r="10" class="bounce1"/></svg>')

will return

.foo {
    background-image url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 30' width='30' height='30'%3E%3Ccircle cx='15' cy='15' r='10' class='bounce1'/%3E%3C/svg%3E");
}

Deprecated

Colette provides some mixins to manage vertical rythm based on $lh settings.

Return new number of lines adding some line division if initial $lines parameter is not enough.

Return line-height value necessary for $font-size.

Return size for a number on lines.

Return number of lines necessary for $font-size.

Creates a new list with the results of calling a function for every list element.

/* my_file.styl */
myList = (1 2 3 4)
myFunc(i)
    return i * 2
map(myList, myFunc)

will compile to

/* my_file.css */
2 4 6 8

Hides text but keeps it readable for screen-readers.

Spaces mixins return margin and padding properties based on a multiple of the $grid-gutter size.
Note that $grid-gutter value is defined in Colette’s settings, but it can be overridden in your project stylus file.

Returns a margin based on $grid-gutter value.

/* my_file.styl */
$grid-gutter = 16px // overrides colette’s default value
.one-argument
    _m(1)

.multiple-arguments
    _m(1 2 3 4)

will compile to

/* my_file.css */
.one-argument {
    margin: 1rem;
}

.multiple-arguments {
    margin: 1rem 2rem 3rem 4rem;
}

Returns a margin-bottom based on $grid-gutter value.

/* my_file.styl */
$grid-gutter = 16px // overrides colette’s default value
.foo
    _mb(1)

will compile to

/* my_file.css */
.foo {
    margin-bottom: 1rem;
}

Returns a margin-left based on $grid-gutter value.

/* my_file.styl */
$grid-gutter = 16px // overrides colette’s default value
.foo
    _ml(1)

will compile to

/* my_file.css */
.foo {
    margin-left: 2rem;
}

Returns a margin-right based on $grid-gutter value.

/* my_file.styl */
$grid-gutter = 16px // overrides colette’s default value
.foo
    _mr(1)

will compile to

/* my_file.css */
.foo {
    margin-right: 1rem;
}

Returns a margin-top based on $grid-gutter value.

/* my_file.styl */
$grid-gutter = 16px // overrides colette’s default value
.foo
    _mt(1)

will compile to

/* my_file.css */
.foo {
    margin-top: 1rem;
}

Returns a padding based on $grid-gutter value.

/* my_file.styl */
$grid-gutter = 16px // overrides colette’s default value
.one-argument
    _p(1)

.multiple-arguments
    _p(1 2 3 4)

will compile to

/* my_file.css */
.one-argument {
    padding: 1rem;
}

.multiple-arguments {
    padding: 1rem 2rem 3rem 4rem;
}

Returns a padding-bottom based on $grid-gutter value.

/* my_file.styl */
$grid-gutter = 16px // overrides colette’s default value
.foo
    _pb(1)

will compile to

/* my_file.css */
.foo {
    padding-bottom: 1rem;
}

Returns a padding-left based on $grid-gutter value.

/* my_file.styl */
$grid-gutter = 16px // overrides colette’s default value
.foo
    _pl(1)

will compile to

/* my_file.css */
.foo {
    padding-left: 1rem;
}

Returns a padding-right based on $grid-gutter value.

/* my_file.styl */
$grid-gutter = 16px // overrides colette’s default value
.foo
    _pr(1)

will compile to

/* my_file.css */
.foo {
    padding-right: 1rem;
}

Returns a padding-top based on $grid-gutter value.

/* my_file.styl */
$grid-gutter = 16px // overrides colette’s default value
.foo
    _pt(1)

will compile to

/* my_file.css */
.foo {
    padding-top: 1rem;
}