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'