Stylus

The OrganiCSS SCSS package provides a collection of Sass (Syntactically Awesome Style Sheets) 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 Stylus, first install the package into a Stylus project.

npm i @organicss/stylus

yarn add @organicss/stylus

:rocket: Getting Started

To use the different OrganiCSS Stylus mixins, first import them into an existing .styl file.

// Import all mixins at once

@import '/node_modules/@organicss/stylus'

// Or import a specific mixin at a time.

@import '/node_modules/@organicss/stylus/margin'

Using with CSS Custom Properties

@import '/node_modules/@organicss/stylus/margin'

.container
    margin()

Using with Stylus Variables

@import '/node_modules/@organicss/stylus/margin'

space = var(--space-large)

.container
    margin()

:book: Documentation

Border

@import "/node_modules/@organicss/stylus/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/stylus/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/stylus/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/stylus/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/stylus/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/stylus/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) |