@organicss/styled-components

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.

🤖 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

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

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