Less

The OrganiCSS 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 OrganiCSS Less, first install the package into a Less project.

npm i @organicss/less

yarn add @organicss/less

:rocket: Getting Started

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

// Import all mixins at once
@import '/node_modules/@organicss/less';

// Or import a specific mixin at a time.
@import '/node_modules/@organicss/less/margin';

Using with CSS Custom Properties

@import "/node_modules/@organicss/less/margin";

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

Using with Less Variables

@import '/node_modules/@organicss/less/margin';

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

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

:book: Documentation

Border

@import '/node_modules/@organicss/less/border';

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

| Prop | Type | CSS Property (Fallback) | | ----------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------- | | @border | - | border | | @borderColor | - | border-color | | @borderStyle | See MDN Docs | border-style | | @borderWidth | - | border-width | | @block | - | border-block-start/end (border-top/bottom) | | @blockColor | - | border-block-start/end-color (border-top/bottom-color) | | @blockStyle | See MDN Docs | border-block-start/end-style (border-top/bottom-style) | | @blockWidth | - | border-block-start/end-width (border-top/bottom-width) | | @blockEnd | - | border-block-end (border-bottom) | | @blockEndColor | - | border-block-end-color (border-bottom-color) | | @blockEndStyle | See MDN Docs | border-block-end-style (border-bottom-style) | | @blockEndWidth | - | border-block-end-width (border-bottom-width) | | @blockStart | - | border-block-start (border-top) | | @blockStartColor | - | border-block-start-color (border-top-color) | | @blockStartStyle | See MDN Docs | border-block-start-style (border-top-style) | | @blockStartWidth | - | border-block-start-width (border-top-width) | | @inline | - | border-inline-start/end (border-left/right) | | @inlineColor | - | border-inline-start/end-color (border-left/right-color) | | @inlineStyle | See MDN Docs | border-inline-start/end-style (border-left/right-style) | | @inlineWidth | - | border-inline-start/end-width (border-left/right-width) | | @inlineEnd | - | border-inline-end (border-right) | | @inlineEndColor | - | border-inline-end-color (border-right-color) | | @inlineEndStyle | See MDN Docs | border-inline-end-style (border-right-style) | | @inlineEndWidth | - | border-inline-end-width (border-right-width) | | @inlineStart | - | border-inline-start (border-left) | | @inlineStartColor | - | border-inline-start-color (border-left-color) | | @inlineStartStyle | See MDN Docs | border-inline-start-style (border-left-style) | | @inlineStartWidth | - | border-inline-start-width (border-left-width) |

Border Radius

@import '/node_modules/@organicss/less/borderRadius';

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

| Prop | Type | CSS Property (Fallback) | | ------------ | ---- | ----------------------------------------------------- | | @bottomLeft | - | border-end-start-radius (border-bottom-left-radius) | | @bottomRight | - | border-end-end-radius (border-bottom-right-radius) | | @radius | - | border-radius | | @topLeft | - | border-start-start-radius (border-top-left-radius) | | @topRight | - | border-start-end-radius (border-top-right-radius) |

Layout

@import '/node_modules/@organicss/less/layout';

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

| Prop | Type | CSS Property (Fallback) | | ------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------- | | @blockSize | - | block-size (height) | | @captionSide | See MDN Docs | caption-side | | @clear | See MDN Docs | clear | | @maxBlockSize | - | max-block-size (max-height) | | @minBlockSize | - | min-block-size (min-height) | | @inlineSize | - | inline-size (width) | | @maxInlineSize | - | max-inline-size (max-width) | | @minInlineSize | - | min-inline-size (min-width) | | @overflow | See MDN Docs | overflow | | @overflowBlock | See MDN Docs | overflow-block (overflow-x) | | @overflowInline | See MDN Docs | overflow-inline (overflow-y) | | @overscrollBehavior | See MDN Docs | overscroll-behavior | | @overscrollBehaviorBlock | See MDN Docs | overscroll-behavior-block (overscroll-behavior-x) | | @overscrollBehaviorInline | See MDN Docs | overscroll-behavior-inline (overscroll-behavior-y) | | @resize | See MDN Docs | resize | | @textAlign | See MDN Docs | text-align | | @textAlignLast | See MDN Docs | text-align-last |

Margin

@import '/node_modules/@organicss/less/margin';

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

| Prop | Type | CSS Property (Fallback) | | ------------------ | ------------------------------------------------------------------------------------- | ----------------------------------------------------------- | | @block | - | margin-block-start/end (margin-bottom/top) | | @blockEnd | - | margin-block-end (margin-bottom) | | @blockStart | - | margin-block-start (margin-top) | | @inline | - | margin-inline-start/end (margin-left/right) | | @inlineEnd | - | margin-inline-end (margin-right) | | @inlineStart | - | margin-inline-start (margin-left) | | @margin | - | margin | | @scroll | See MDN Docs | scroll-margin | | @scrollBlock | See MDN Docs | scroll-margin-block-start/end (scroll-margin-top/bottom) | | @scrollBlockEnd | See MDN Docs | scroll-margin-block-end (scroll-margin-bottom) | | @scrollBlockStart | See MDN Docs | scroll-margin-block-start (scroll-margin-top) | | @scrollInline | See MDN Docs | scroll-margin-inline-start/end (scroll-margin-left/right) | | @scrollInlineEnd | See MDN Docs | scroll-margin-inline-end (scroll-margin-right) | | @scrollInlineStart | See MDN Docs | scroll-margin-inline-start (scroll-margin-left) |

Padding

@import '/node_modules/@organicss/less/padding';

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

| Prop | Type | CSS Property (Fallback) | | ------------------ | -------------------------------------------------------------------------------------- | ------------------------------------------------------------- | | @block | - | padding-block-start/end (padding-top/bottom) | | @blockEnd | - | padding-block-end (padding-bottom) | | @blockStart | - | padding-block-start (padding-top) | | @inline | - | padding-inline-start/end (padding-left/right) | | @inlineEnd | - | padding-inline-end (padding-right) | | @inlineStart | - | padding-inline-start (padding-left) | | @padding | - | padding | | @scroll | See MDN Docs | scroll-padding | | @scrollBlock | See MDN Docs | scroll-padding-block-start/end (scroll-padding-top/bottom) | | @scrollBlockEnd | See MDN Docs | scroll-padding-block-end (scroll-padding-bottom) | | @scrollBlockStart | See MDN Docs | scroll-padding-block-start (scroll-padding-top) | | @scrollInline | See MDN Docs | scroll-padding-inline-start/end (scroll-padding-left/right) | | @scrollInlineEnd | See MDN Docs | scroll-padding-inline-end (scroll-padding-right) | | @scrollInlineStart | See MDN Docs | scroll-padding-inline-start (scroll-padding-left) |

Position

@import '/node_modules/@organicss/less/position';

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

| Prop | Type | CSS Property (Fallback) | | ------------ | ------------------------------------------------------------------------------------ | ------------------------------- | | @block | See MDN Docs | inset-block (top/bottom) | | @blockEnd | - | inset-block-end (bottom) | | @blockStart | - | inset-block-start (top) | | @float | See MDN Docs | float | | @inline | See MDN Docs | inset-inline (left/right) | | @inlineEnd | - | inset-inline-end (right) | | @inlineStart | - | inset-inline-start (left) | | @inset | See MDN Docs | inset (top/right/bottom/left) |