Commentary

The stack element provides vertical layout of children using flexbox. Children can be start, centered or end justified. The .stack element is the companion to the .level element and can also be a child of .level.

Normally stack would not have other .stack children, but may have .level children.

Background and text colors can be set for each stack element using the color element classes such as .is-secondary, .is-secondary-light etc.

Usage

Classes:
.stack Provides a flexbox element that vertically aligns children items to the left edge. --col-row is the default spacing.
.stack-right Provides a flexbox element that right aligns children items.
.stack-centered Provides a flexbox element with center aligned children items.
.stack-gap-small Modifier that increases the row gap to 0.5 times default gap.
.stack-gap-medium Modifier that increases the row gap to 3 times default gap.
.stack-gap-large Modifier that increases the row gap to 5 times default gap.
Dependencies:
File: stack.css
Variables: --gap-col, --gap-row

Examples

.stack default

Lorem Ipsum 1

item one

Lorem Ipsum 2

item two

Lorem Ipsum 3

item three

Lorem Ipsum 4

item four


                <div class="stack is-grey">
                    <div class="is-secondary">
                        <p>Lorem Ipsum 1</p>
                        <p>item one</p>
                    </div>
                    <div class="is-secondary">
                        <p>Lorem Ipsum 2</p>
                        <p>item two</p>
                    </div>
                    <div class="is-secondary">
                        <p>Lorem Ipsum 3</p>
                        <p>item three</p>
                    </div>
                    <div class="is-secondary">
                        <p>Lorem Ipsum 4</p>
                        <p>item four</p>
                    </div>
                </div>

.stack-right

Lorem Ipsum 1

item one

Lorem Ipsum 2

item two

Lorem Ipsum 3

item three

Lorem Ipsum 4

item four


                <div class="stack-right is-grey">
                    <div class="is-secondary">
                        <p>Lorem Ipsum 1</p>
                        <p>item one</p>
                    </div>
                    <div class="is-secondary">
                        <p>Lorem Ipsum 2</p>
                        <p>item two</p>
                    </div>
                    <div class="is-secondary">
                        <p>Lorem Ipsum 3</p>
                        <p>item three</p>
                    </div>
                    <div class="is-secondary">
                        <p>Lorem Ipsum 4</p>
                        <p>item four</p>
                    </div>
                </div>

.stack-centered with .level children

Lorem Ipsum 1
item one
Lorem Ipsum 2
item two
Lorem Ipsum 3
item three
Lorem Ipsum 4
item four

                <div class="stack-centered is-grey">
                    <div class="level is-secondary">
                        <div>Lorem Ipsum 1</div>
                        <div>item one</div>
                    </div>
                    <div class="level is-secondary">
                        <div>Lorem Ipsum 2</div>
                        <div>item two</div>
                    </div>
                    <div class="level is-secondary">
                        <div>Lorem Ipsum 3</div>
                        <div>item three</div>
                    </div>
                    <div class="level is-secondary">
                        <div>Lorem Ipsum 4</div>
                        <div>item four</div>
                    </div>
                </div>