README

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.

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

hless

Usage no npm install needed!