Styled Components

The OrganiCSS Styled Components package provides a collection of TypeScript-ready functions to support writing progressively-enhanced logical CSS with Styled Components. The mixins will generate logical CSS properties first, with fallbacks to catch when not supported.

:robot: Installation

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

npm i @organicss/styled-components

yarn add @organicss/styled-components

:rocket: Getting Started

Get started using OrganiCSS Styled Components by importing a mixin and calling it from inside of a Styled Components style block.

import { Margin, Padding } from '@organicss/styled-components';

const Container = styled.section`
    ${Margin({ inline: 'auto' })};
    ${Padding({ block: 'var(--custom-property-value)' })};
    // ...any addition styles
`;

Using with CSS Custom Properties

import { Margin } from '@organicss/styled-components';

const Container = styled.section`
    ${Margin({ block: 'var(--space-lg)', inline: 'calc(var(--space-lg) * 2)' })};
`;

Using with Styled Components Props

import { Margin } from '@organicss/styled-components';

return <Container $margin="var(--space-lg)">...</Container>;

const Container = styled.section`
    ${({ $margin }) => Margin({ all: $margin })};
`;

:book: Documentation

Border

import { Border } from '@organicss/styled-components';

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

Border Radius

import { BorderRadius } from '@organicss/styled-components';

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

Layout

import { Layout } from '@organicss/styled-components';

| Prop | Type | CSS Property (Fallback) | | ------------------------ | ------------------------------------------------------------------------------------------- | ---------------------------------------------------- | | blockSize | string | 0 | block-size (height) | | captionSide | See MDN Docs | caption-side | | clear | See MDN Docs | clear | | maxBlockSize | string | 0 | max-block-size (max-height) | | minBlockSize | string | 0 | min-block-size (min-height) | | inlineSize | string | 0 | inline-size (width) | | maxInlineSize | string | 0 | max-inline-size (max-width) | | minInlineSize | string | 0 | 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 { Margin } from '@organicss/styled-components';

| Prop | Type | CSS Property (Fallback) | | ----------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------- | | block | string | 0 | margin-block-start/end (margin-bottom/top) | | blockEnd | string | 0 | margin-block-end (margin-bottom) | | blockStart | string | 0 | margin-block-start (margin-top) | | inline | string | 0 | margin-inline-start/end (margin-left/right) | | inlineEnd | string | 0 | margin-inline-end (margin-right) | | inlineStart | string | 0 | margin-inline-start (margin-left) | | margin | string | 0 | 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 { Padding } from '@organicss/styled-components';

| Prop | Type | CSS Property (Fallback) | | ----------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------- | | block | string | 0 | padding-block-start/end (padding-top/bottom) | | blockEnd | string | 0 | padding-block-end (padding-bottom) | | blockStart | string | 0 | padding-block-start (padding-top) | | inline | string | 0 | padding-inline-start/end (padding-left/right) | | inlineEnd | string | 0 | padding-inline-end (padding-right) | | inlineStart | string | 0 | padding-inline-start (padding-left) | | padding | string | 0 | 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 { Position } from '@organicss/styled-components';

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