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!