@rhubarb-css/less v1.0.0

The Rhubarb Less package provides a collection of Less CSS) mixins to support writing progressively-enhanced logical CSS with. The mixins will generate logical CSS properties first, with fallbacks to catch when not supported.

:robot: Installation

To use Rhubarb Less, first install the package into a Less project.

npm i @rhubarb-css/less

yarn add @rhubarb-css/less

:rocket: Getting Started

To use the different Rhubarb Less mixins, first import them into an existing .less file.

// Import all mixins at once
@import "/node_modules/@rhubarb-css/less";

// Or import a specific mixin at a time.
@import "/node_modules/@rhubarb-css/less/margin";

Using with CSS Custom Properties

@import "/node_modules/@rhubarb-css/less/margin";

.container {
  .margin("blockStart: var(--space-lg));
}

Using with Less Variables

@import "/node_modules/@rhubarb-css/less/margin";

@space: var(--space-large);

.container {
  .margin(@blockStart: @space);
}

:book: Documentation

Border

@import "/node_modules/@rhubarb-css/less/border";

.container {
  .border(...);
}

Border Radius

@import "/node_modules/@rhubarb-css/less/borderRadius";

.container {
  .border-radius(...);
}

Layout

@import "/node_modules/@rhubarb-css/less/layout";

.container {
  .layout(...);
}

Margin

@import "/node_modules/@rhubarb-css/less/margin";

.container {
  .margin(...);
}

Padding

@import "/node_modules/@rhubarb-css/less/padding";

.container {
  .padding(...);
}

Position

@import "/node_modules/@rhubarb-css/less/position";

.container {
  .position(...);
}