Small powerfull mixin library for less and styled-components.
Css utils and css hacks kit.
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
// 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);
You can use this library with another less libraries without name conflicts. This is good idea.
MIT
If you have any problems, catch the bug or have any suggestion - please find an existing issue or create new