1.0.0 • Published 2 years ago
Share package
The Rhubarb Stylus package provides a collection of Stylus 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 Rhubarb Stylus, first install the package into a Stylus project.
npm i @rhubarb-css/stylusyarn add @rhubarb-css/stylus:rocket: Getting Started To use the different Rhubarb Stylus mixins, first import them into an existing .styl file.
// Import all mixins at once
@import "/node_modules/@rhubarb-css/stylus";
// Or import a specific mixin at a time.
@import "/node_modules/@rhubarb-css/stylus/margin";Using with CSS Custom Properties @import "/node_modules/@rhubarb-css/stylus/margin";
.container {
margin(blockStart: var(--space-lg));
}Using with Stylus Variables @import "/node_modules/@rhubarb-css/stylus/margin";
space = var(--space-large);
.container {
margin(blockStart: space);
}:book: Documentation Border @import "/node_modules/@rhubarb-css/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/@rhubarb-css/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/@rhubarb-css/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
Margin @import "/node_modules/@rhubarb-css/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/@rhubarb-css/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/@rhubarb-css/stylus/position";
.container {
position(...);
}Prop Type CSS Property (Fallback ) blockEnd - inset-block-end (bottom ) blockStart - inset-block-start (top ) float See MDN Docs float inlineEnd - inset-inline-end (right ) inlineStart - inset-inline-start (left ) inset See MDN Docs inset (top/right/bottom/left )
