# Utilities

`_utilities.less` is a reuseable collection of basic Less mixins.

# .lib-clearfix()

The `.lib-clearfix()` mixin is a modern solution for healing container`s height which have floated elements. Also its applying prevents top-margins from collapsing.

Container with floated child elements without `.lib-clearfix()`

<div class="example-clearfix-container-1"> <div class="example-clearfix-item left"> Float left </div> <div class="example-clearfix-item right"> Float right </div> </div>

Container with floated child elements with `.lib-clearfix()`

<div class="example-clearfix-container-2"> <div class="example-clearfix-item left"> Float left </div> <div class="example-clearfix-item right"> Float right </div> </div>

    .example-clearfix-container-1 {
        border: 1px solid #f00;
    }

    .example-clearfix-container-2 {
        .lib-clearfix();
        border: 1px solid #0f0;
    }

    .example-clearfix-item.left {
        float: left;
    }
    .example-clearfix-item.right {
        float: right;
    }

# .lib-visibility-hidden()

The `.lib-visibility-hidden()()` mixin changes element`s visibility to hidden and height to 0.

This is a block with applied `.lib-visibility-hidden()` mixin.

<div class="example-visibility-hidden"> <div> This is hidden text </div> </div>

    .example-visibility-hidden {
        .lib-visibility-hidden();
    }

# .lib-visually-hidden()

The `.lib-visually-hidden()` mixin safely hides the element for accessibility reasons.

This is a block with applied `.lib-visually-hidden()` mixin.

<div class="example-visually-hidden-1"> <div> This is hidden text </div> </div>

    .example-visually-hidden-1 {
        .lib-visually-hidden();
    }

# .lib-visually-hidden-reset()

The `.lib-visually-hidden-reset()` mixin resets hidden visibility and makes element again visible.

This is a block with applied `.lib-visually-hidden-reset()` mixin after `.lib-visually-hidden()` applying.

<div class="example-visually-hidden-2"> <div> The text is visible again </div> </div>

    .example-visually-hidden-2 {
        background: #fdf0d5;
        padding: 5px;
        .lib-visually-hidden();
    }

    .example-visually-hidden-2 {
        .lib-visually-hidden-reset();
    }

# .lib-css()

The `.lib-css()` mixin is used to set any css property if there is a value passed to it by a variable. Also `.lib-css()` can add -ms-, -webkit- and -moz- prefixes if needed.

If the variable is set to `false`, the `.lib-css()` mixin will add nothing to the code.

<div class="example-css-container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.. </div> <div class="example-css-container-2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.. </div>

    .example-css-container {
        .lib-css(padding, @indent__base);
        .lib-css(background, @secondary__color);
    }

    .example-css-container-2 {
        .lib-css(background, false);
    }

# .lib-css() variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_property
                false
                '' | false | value
                Any css property

                @_value
                false
                '' | false | value
                Any css value

                @_prefix
                0
                '' | false | 1
                If set to "1" adds -ms-, -webkit- and -moz- prefixes to the property

# .lib-rotate()

The `.lib-rotate()` mixin is a wrapper for css3 transform property with rotate value.

<div class="example-rotate"></div>

    .example-rotate {
        background: #f00;
        position: absolute;
        height: 20px;
        width: 40px;
        .lib-rotate(
            @_rotation: 45deg;
        );
    }

# .lib-rotate() variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @rotation
                ''
                '' | false | value
                Transform rotate value, false or ''

# .lib-input-placeholder()

The `.lib-input-placeholder()` mixin is used to change placeholder font-color and font-weight.

<input placeholder="Default text" class="example-placeholder" type="text" />

    .example-placeholder {
        .lib-input-placeholder(#808080, bold);
    }

# .lib-input-placeholder() variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_input-placeholder-color
                @form-element-input-placeholder__color
                '' | false | value
                Input placeholder color

                @_input-placeholder-font-weight
                @form-element-input__font-weight
                '' | false | value
                Input placeholder font-weight

# .lib-background-gradient()

The `.lib-background-gradient()` mixin is used for applying custom css3 gradient.

<div class="example-background-gradient-1"> I`m gradient with vertical direction </div> <div class="example-background-gradient-2"> I`m gradient with horizontal direction </div> <div class="example-background-gradient-3-wrapper"> <div class="example-background-gradient-3"> I`m gradient with horizontal direction from transparent to a color </div> </div>

    .example-background-gradient-1 {
        .lib-background-gradient(
            @_background-gradient: true,
            @_background-gradient-direction: vertical,
            @_background-gradient-color-start: #cff,
            @_background-gradient-color-end: #ccf
        );
    }

    .example-background-gradient-2 {
        .lib-background-gradient(
            @_background-gradient: true,
            @_background-gradient-direction: horizontal,
            @_background-gradient-color-start: #cff,
            @_background-gradient-color-end: #ccf
        );
    }

    .example-background-gradient-3-wrapper {
        background: #ffc;
        padding: 10px;
    }

    .example-background-gradient-3 {
        .lib-background-gradient(
            @_background-gradient: true,
            @_background-gradient-direction: horizontal,
            @_background-gradient-color-start: rgba(255,255,255,0),
            @_background-gradient-color-end: #ccf,
            @_background-gradient-color-position: false
        );
    }

# .lib-background-gradient() variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_background-gradient
                false
                '' | false | true
                If set to 'true' the element has gradient background

                @_background-gradient-direction
                ''
                '' | horizontal | vertical
                Gradient direction (horizontal or vertical)

                @_background-gradient-color-start
                ''
                '' | false | value
                Gradient start color (any css color)

                @_background-gradient-color-end
                ''
                '' | false | value
                Gradient end color (any css color)

                @_background-gradient-color-position
                false
                '' | false | true
                Sets the background-color fallback property. When set to 'false', the background-color property will be set to @_background-gradient-color-end. When set to 'true', the background-color property will be set to @_background-gradient-color-start

# .lib-url-check()

The `.lib-url-check()` mixin wraps passed value with 'url( ... )' and returns `@lib-url-check-output` variable. Can be used with `.lib-css()` mixin.

If the variable is set to `false`, the `.lib-url-check()` will return false.

<div class="example-url-check"> Block with background. </div> <div class="example-url-check-false"> Block with no background. </div>

    .example-url-check {
        //  Set image path variable
        @_icon-image: '/images/test.png';

        //  "Call" the mixin
        .lib-url-check(@_icon-image);

        //  Will return url('/images/test.png')
        .lib-css(background, #eee @lib-url-check-output no-repeat 0 0);
    }

    .example-url-check-false {
        //  Set usage image path to false
        @_icon-image: false;

        //  "Call" the mixin
        .lib-url-check(@_icon-image);

        //  Will return 'false' and outputs nothing
        .lib-css(background, #eee @lib-url-check-output no-repeat 0 0);
    }

# .lib-url-check() variables

                Mixin variable
                Allowed values
                Output variable
                Comment

                @_path
                '' | false | value
                @lib-url-check-output
                Passed url to wrap in 'url( ... )'. If the 'false' value passed mixin will return 'false'