HLESS

Small powerfull mixin library for less and styled-components.

Css utils and css hacks kit.

Setup

To install hless from npm, run:

``shell
$ npm install hless --save


or


$ bower install hless --save
`

Finally, use in your js file:
`js
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:
`css
@import "hless/lib/index.less";

// do something usefull
`

$3


`less
// 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);
``

$3

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

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

$3

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

$3