1.0.1 • Published 2 years ago
Share package
The Rhubarb 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.
:robot: Installation To use Rhubarb SCSS, first install the package into a SCSS project.
npm i @rhubarb-css/scss
yarn add @rhubarb-css/scss
:rocket: Getting Started To use the different Rhubarb SCSS mixins, first import them into an existing .scss
file.
// Import all mixins at once
@import "/node_modules/@rhubarb-css/scss";
// Or import a specific mixin at a time.
@import "/node_modules/@rhubarb-css/scss/margin";
Using with CSS Custom Properties @import "/node_modules/@rhubarb-css/scss/margin";
.container {
@include margin($blockStart: var(--space-lg));
}
Using with SCSS Variables @import "/node_modules/@rhubarb-css/scss/margin";
.container {
$space: var(--space-large);
@include margin($blockStart: $space);
}
:book: Documentation Border @import "/node_modules/@rhubarb-css/scss/border";
.container {
@include 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/scss/borderRadius";
.container {
@include 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/scss/layout";
.container {
@include 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/scss/margin";
.container {
@include 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/scss/padding";
.container {
@include 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/scss/position";
.container {
@include 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 )