chaestli

Dreipol scss grid system

Documentation

• API
• Demo

Available mixins

Chaestli exports only 3 mixins (chaestli.container, chaestli.grid, chaestli.column) that combined together should be enough to scaffold your grid setup. For example:

@use 'node_modules/@dreipol/chaestli';

.grid {
    .grid__container {
        // a container having a max-with of 1024px with 16px lateral padding
        @include chaestli.container(( width: 1024px, edge: 16px ));
    }
   
    .grid__row {
        // a grid made of 12 columns with 8px lateral gutter
        @include chaestli.grid(( gutter: 8px, num-cols: 12 ));
    }

    .grid__small-col {
        // two columns over 12
        @include chaestli.column(2 span, 12 span);
    }

    .grid__medium-col {
        // for columns over 12
        @include chaestli.column(4 span, 12 span);
    }

    .grid__big-col {
        // eight columns over 12
        @include chaestli.column(8 span, 12 span);
    }
}

Usage

Installation

npm i chaestli -S