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.
🤖 Installation
To use OrganiCSS Stylus, first install the package into a Stylus project.
yarn add @organicss/stylus
🚀 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()
📖 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) |