3.1.0 • Published 10 months ago

@rsm-hcd/scss-grid v3.1.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
10 months ago

Scss-Grid (RSM HCD)

Getting Started

#npm
npm install --save-dev @rsm-hcd/scss-grid

# yarn
yarn add @rsm-hcd/scss-grid --dev
@import @rsm-hcd/scss-grid;

Usage

<div class="o-grid__container">
    <div class="o-grid__row -space-above"></div>
    <div class="o-grid__row -space-between"></div>
    <div class="o-grid__row -border-bottom"></div>
    <div class="o-grid__row">... More to come</div>
    <div class="o-grid__row">
        <div class="o-grid__col -span-one"></div>
        <div class="o-grid__col -span-two"></div>
        <div class="o-grid__col -span-twelve"></div>
    </div>
    <div class="o-grid__row">
        <div class="o-grid__col -push-one"></div>
        <div class="o-grid__col -push-eleven"></div>
    </div>
    <div class="o-grid__row">
        <div class="o-grid__col -span-one -y-align-top"></div>
        <div class="o-grid__col -span-one -y-align-center"></div>
        <div class="o-grid__col -span-one -y-align-bottom"></div>
        <div class="o-grid__col -span-one -justify-right"></div>
        <div class="o-grid__col -span-one -justify-center"></div>
    </div>
</div>

Add a Custom grid!

$my-custom-grid: (
        columns: 12,
        gutter: 20px
    )
    .c-row-of-stuff {
    &__column {
        @include span-col(8, $my-custom-grid);
    }
}

Add your own breakpoints

$breakpoints: (
        "phone": 480px,
        "tablet": 768px,
        "desktop": 1180px
    )
    .c-row-of-stuff {
    &__column {
        @include span-col(8, $my-custom-grid);

        @include respond-to("phone") {
            @include span-col(12, $my-custom-grid);
        }
    }
}

Development

npm install
npm run watch # automatically builds as changes are made

Documentation

Full documentation

Contributing

Information on contributing to this repo is in the Contributing Guide

3.1.0

10 months ago

3.0.2

10 months ago

3.0.1

10 months ago