1.1.0 • Published 3 years ago

@organicss/styled-components v1.1.0

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

Styled Components

npm version

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';
PropTypeCSS Property (Fallback)
borderstring | 0border
borderColorstringborder-color
borderStyleSee MDN Docsborder-style
borderWidthstring | 0border-width
blockstring | 0border-block-start/end (border-top/bottom)
blockColorstringborder-block-start/end-color (border-top/bottom-color)
blockStyleSee MDN Docsborder-block-start/end-style (border-top/bottom-style)
blockWidthstring | 0border-block-start/end-width (border-top/bottom-width)
blockEndstring | 0border-block-end (border-bottom)
blockEndColorstringborder-block-end-color (border-bottom-color)
blockEndStyleSee MDN Docsborder-block-end-style (border-bottom-style)
blockEndWidthstring | 0border-block-end-width (border-bottom-width)
blockStartstring | 0border-block-start (border-top)
blockStartColorstringborder-block-start-color (border-top-color)
blockStartStyleSee MDN Docsborder-block-start-style (border-top-style)
blockStartWidthstring | 0border-block-start-width (border-top-width)
inlinestring | 0border-inline-start/end (border-left/right)
inlineColorstringborder-inline-start/end-color (border-left/right-color)
inlineStyleSee MDN Docsborder-inline-start/end-style (border-left/right-style)
inlineWidthstring | 0border-inline-start/end-width (border-left/right-width)
inlineEndstring | 0border-inline-end (border-right)
inlineEndColorstringborder-inline-end-color (border-right-color)
inlineEndStyleSee MDN Docsborder-inline-end-style (border-right-style)
inlineEndWidthstring | 0border-inline-end-width (border-right-width)
inlineStartstring | 0border-inline-start (border-left)
inlineStartColorstringborder-inline-start-color (border-left-color)
inlineStartStyleSee MDN Docsborder-inline-start-style (border-left-style)
inlineStartWidthstring | 0border-inline-start-width (border-left-width)

Border Radius

import { BorderRadius } from '@organicss/styled-components';
PropTypeCSS Property (Fallback)
bottomLeftstring | 0border-end-start-radius (border-bottom-left-radius)
bottomRightstring | 0border-end-end-radius (border-bottom-right-radius)
radiusstring | 0border-radius
topLeftstring | 0border-start-start-radius (border-top-left-radius)
topRightstring | 0border-start-end-radius (border-top-right-radius)

Layout

import { Layout } from '@organicss/styled-components';
PropTypeCSS Property (Fallback)
blockSizestring | 0block-size (height)
captionSideSee MDN Docscaption-side
clearSee MDN Docsclear
maxBlockSizestring | 0max-block-size (max-height)
minBlockSizestring | 0min-block-size (min-height)
inlineSizestring | 0inline-size (width)
maxInlineSizestring | 0max-inline-size (max-width)
minInlineSizestring | 0min-inline-size (min-width)
overflowSee MDN Docsoverflow
overflowBlockSee MDN Docsoverflow-block (overflow-x)
overflowInlineSee MDN Docsoverflow-inline (overflow-y)
overscrollBehaviorSee MDN Docsoverscroll-behavior
overscrollBehaviorBlockSee MDN Docsoverscroll-behavior-block (overscroll-behavior-x)
overscrollBehaviorInlineSee MDN Docsoverscroll-behavior-inline (overscroll-behavior-y)
resizeSee MDN Docsresize
textAlignSee MDN Docstext-align
textAlignLastSee MDN Docstext-align-last

Margin

import { Margin } from '@organicss/styled-components';
PropTypeCSS Property (Fallback)
blockstring | 0margin-block-start/end (margin-bottom/top)
blockEndstring | 0margin-block-end (margin-bottom)
blockStartstring | 0margin-block-start (margin-top)
inlinestring | 0margin-inline-start/end (margin-left/right)
inlineEndstring | 0margin-inline-end (margin-right)
inlineStartstring | 0margin-inline-start (margin-left)
marginstring | 0margin
scrollSee MDN Docsscroll-margin
scrollBlockSee MDN Docsscroll-margin-block-start/end (scroll-margin-top/bottom)
scrollBlockEndSee MDN Docsscroll-margin-block-end (scroll-margin-bottom)
scrollBlockStartSee MDN Docsscroll-margin-block-start (scroll-margin-top)
scrollInlineSee MDN Docsscroll-margin-inline-start/end (scroll-margin-left/right)
scrollInlineEndSee MDN Docsscroll-margin-inline-end (scroll-margin-right)
scrollInlineStartSee MDN Docsscroll-margin-inline-start (scroll-margin-left)

Padding

import { Padding } from '@organicss/styled-components';
PropTypeCSS Property (Fallback)
blockstring | 0padding-block-start/end (padding-top/bottom)
blockEndstring | 0padding-block-end (padding-bottom)
blockStartstring | 0padding-block-start (padding-top)
inlinestring | 0padding-inline-start/end (padding-left/right)
inlineEndstring | 0padding-inline-end (padding-right)
inlineStartstring | 0padding-inline-start (padding-left)
paddingstring | 0padding
scrollSee MDN Docsscroll-padding
scrollBlockSee MDN Docsscroll-padding-block-start/end (scroll-padding-top/bottom)
scrollBlockEndSee MDN Docsscroll-padding-block-end (scroll-padding-bottom)
scrollBlockStartSee MDN Docsscroll-padding-block-start (scroll-padding-top)
scrollInlineSee MDN Docsscroll-padding-inline-start/end (scroll-padding-left/right)
scrollInlineEndSee MDN Docsscroll-padding-inline-end (scroll-padding-right)
scrollInlineStartSee MDN Docsscroll-padding-inline-start (scroll-padding-left)

Position

import { Position } from '@organicss/styled-components';
PropTypeCSS Property (Fallback)
blockSee MDN Docsinset-block (top/bottom)
blockEnd-inset-block-end (bottom)
blockStart-inset-block-start (top)
floatSee MDN Docsfloat
inlineSee MDN Docsinset-inline (left/right)
inlineEnd-inset-inline-end (right)
inlineStart-inset-inline-start (left)
insetSee MDN Docsinset (top/right/bottom/left)