1.1.0 • Public • Published

OrganiCSS standard logo with icon and name


npm version

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.

🤖 Installation

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

npm i @organicss/less
yarn add @organicss/less

🚀 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);

📖 Documentation


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

.container {
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 {
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)


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

.container {
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


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

.container {
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)


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

.container {
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)


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

.container {
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)


npm i @organicss/less

DownloadsWeekly Downloads






Unpacked Size

47.1 kB

Total Files


Last publish


  • yuschick