Neolithic Populous Metropolis

    @organicss/scss

    1.2.0 • Public • Published

    OrganiCSS standard logo with icon and name

    SCSS

    npm version

    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 SCSS, first install the package into a SCSS project.

    npm i @organicss/scss
    yarn add @organicss/scss

    🚀 Getting Started

    To use the different OrganiCSS SCSS mixins, first import them into an existing .scss file.

    // Import all mixins at once
    @import '/node_modules/@organicss/scss';
    
    // Or import a specific mixin at a time.
    @import '/node_modules/@organicss/scss/margin';

    Using with CSS Custom Properties

    @import '/node_modules/@organicss/scss/margin';
    
    .container {
        @include margin($blockStart: var(--space-lg));
    }

    Using with SCSS Variables

    @import '/node_modules/@organicss/scss/margin';
    
    .container {
        $space: var(--space-large);
        @include margin($blockStart: $space);
    }

    📖 Documentation

    Border

    @import '/node_modules/@organicss/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/@organicss/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/@organicss/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
    $textAlignLast See MDN Docs text-align-last

    Margin

    @import '/node_modules/@organicss/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/@organicss/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/@organicss/scss/position';
    
    .container {
        @include 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)

    Install

    npm i @organicss/scss

    DownloadsWeekly Downloads

    23

    Version

    1.2.0

    License

    ISC

    Unpacked Size

    36 kB

    Total Files

    10

    Last publish

    Collaborators

    • yuschick