HLESS

Small powerfull mixin library for less and styled-components.

Css utils and css hacks kit.

Setup

To install hless from npm, run:

$ npm install hless --save
# or 
$ bower install hless --save

Finally, use in your js file:

import hlessClearfix from 'hless/styled/hlessClearfix';
hlessClearfix();
 
import hlessPlaceholder from 'hless/styled/hlessPlaceholder';
hlessPlaceholder(/*color:*/'#eee', /*font-style: */'italic');
 
import hlessSelectionDisabled from 'hless/styled/hlessSelectionDisabled';
hlessSelectionDisabled(/*color:*/'#eee');
 
import hlessRatio from 'hless/styled/hlessRatio';
hlessRatio(2.5); // height:width == 2.5:1
 
import hlessFakeIcon from 'hless/styled/hlessFakeIcon';
hlessFakeIcon(/*color:*/'#eee', /*width:*/'100%', /*border-radius:*/'0');
 
import hlessFakeText from 'hless/styled/hlessFakeText';
hlessFakeText(/*color:*/'#eee', /*width:*/'100%');
 
import hlessTriangle from 'hless/styled/hlessTriangle';
hlessTriangle('bottom', /*size:*/'4px', /*color:*/'#eee');
 
import { helssJustifyParent, helssJustifyChild } from 'hless/styled/helssJustify';
helssJustifyParent();
helssJustifyChild();
 
import { helssFloatGridRow, helssFloatGridCol } from 'hless/styled/helssFloatGrid';
helssFloatGridRow(/*margin:*/'16px');
helssFloatGridCol(/*factor:*/1/12, /*margin:*/'16px');
 
import { helssFlexGridRow, helssFlexGridCol } from 'hless/styled/helssFlexGrid';
helssFlexGridRow(/*margin:*/'16px');
helssFlexGridCol(/*factor:*/1/12, /*margin:*/'16px');

Use in your less file:

@import "hless/lib/index.less";
 
// do something usefull

Features

// STRUCTURE ELEMENTS: 
 
._grid-row(@margin: 0);
._grid-column(@factor, @margin: 0);
._grid-column-factor(@factor);
 
._center();
 
._block_justify_parent();
._block_justify_child();
._block_justify_child(@font_size, @line_height);
 
._position_middle(@height);
 
._position_middle_parent(@height: 100%);
._position_middle_child();
 
._clearfix();
 
 
 
 
// FIGURES: 
// counter 
._counter(@attr_name, @font_size, @bg, @color, @opacity: 1, @right: -3px, @bottom: -5px);
 
// rectangle 
._ratio(@width, @height);
._ratio_before(@width, @height);
 
// fake element placeholders 
._fake-text(@color-fake: #eee, @width: 80%);
._fake-icon(@color-fake: #eee, @width: 100%, @height-ratio: 1, @radius: 0);
 
// triangle 
._triangle_color(@color);
._triangle_size(@size);
 
._triangle_bottom();
._triangle_bottom(@size);
._triangle_bottom(@size, @color);
 
._triangle_top();
._triangle_top(@size);
._triangle_top(@size, @color);
 
._triangle_left();
._triangle_left(@size);
._triangle_left(@size, @color);
 
._triangle_right();
._triangle_right(@size);
._triangle_right(@size, @color);
 
._triangle_right_top();
._triangle_right_top(@size);
._triangle_right_top(@size, @color);
 
._triangle_right_bottom();
._triangle_right_bottom(@size);
._triangle_right_bottom(@size, @color);
 
._triangle_left_top();
._triangle_left_top(@size);
._triangle_left_top(@size, @color);
 
._triangle_left_bottom();
._triangle_left_bottom(@size);
._triangle_left_bottom(@size, @color);
 
 
 
 
// STYLES 
._square-pattern-bg (@bgColor: white, @squareColor: rgba(0,0,0,0.1), @squareSize: 10px);
 
 
 
// TEXT ELEMENTS 
._selection_disabled(@color: #444);
 
._placeholder(@color, @font_style: italic);
 
 
 
 
// CSS3_shim  
 
._rotate_ie(@deg);
 
._grad_h_ie(@startColor, @endColor);
 
._grad_v_ie(@startColor, @endColor);
 
._opacity_ie(@rate);

Similar and additional projects

You can use this library with another less libraries without name conflicts. This is good idea.

• less-elements
• lesshat
• animate.less
• less-mixins

Thank you for usage

License

MIT

Support

If you have any problems, catch the bug or have any suggestion - please find an existing issue or create new

Contributing

Do that! How to contribute open-source projects

Together we can change the world!