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()

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

.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.

.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.

.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.

.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.

.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.

.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.

.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.

.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.

.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'