Product Selector

Fusion 5.12
    Fusion 5.12

    Grid

    Grid System

    API Device width when breakpoint overrides default

    default

    Sets default layout direction unless overridden by another breakpoint.

    @xs-width

    width < 35.5 em

    @sm-width

    600 em ⇐ width < 35.5 em

    @md-width

    35.5 em ⇐ width < 48 em

    @lg-width

    48 em ⇐ width < 64 em

    @xl-width

    width >= 80 em

    Twigkit uses a response 24 column grid system. The column widths are specified using a ratio of 24ths.

    For example at the attribute sm="1-3" to the layout:block tag to set the width to 1/3 of the container width on small screens.

    By default layout:blocks will be 100% width.

    Example

    <layout:grid styling="text-white">
    <layout:block xs="1"><layout:box styling="bg-raspberry-dark">1 (Default)</layout:box></layout:block>
    <layout:block xs="23-24"><layout:box styling="bg-raspberry">23-24</layout:box></layout:block>
    <layout:block xs="7-8"><layout:box styling="bg-raspberry-light">7-8</layout:box></layout:block>
    <layout:block xs="5-6"><layout:box styling="bg-strawberry-light">5-6</layout:box></layout:block>
    <layout:block xs="4-5"><layout:box styling="bg-strawberry">4-5</layout:box></layout:block>
    <layout:block xs="3-4"><layout:box styling="bg-strawberry-dark">3-4</layout:box></layout:block>
    <layout:block xs="2-3"><layout:box styling="bg-carrot">2-3</layout:box></layout:block>
    <layout:block xs="1-2"><layout:box styling="bg-carrot-light">1-2</layout:box></layout:block>
</layout:grid>

    Grid Breakpoints

    Widths can be specified for each of the xs, sm, md, lg, and xl breakpoints individually.

    lg

    Example

    md

    Example

    sm

    Example

    <layout:grid styling="text-white">
    <layout:block xs="1">
        <layout:box styling="bg-sunflower">Always full width</layout:box>
    </layout:block>
    <layout:grid>
        <layout:block xl="1-3" md="1-2">
            <layout:box styling="bg-pumpkin-light">xl=1-3, md=1-2</layout:box>
        </layout:block>
        <layout:block xl="1-3" md="1-2">
            <layout:box styling="bg-pumpkin">xl=1-3, md=1-2</layout:box>
        </layout:block>
        <layout:block xl="1-3" md="1">
            <layout:box styling="bg-pumpkin-dark">xl=1-3, md=1</layout:box>
        </layout:block>
    </layout:grid>
</layout:grid>

    Grid Offsets

    An offset attribute can be used to push the layout:block to the right, leaving an empty space

    Example

    <layout:grid styling="text-white">
    <layout:block xs="1">
        <layout:box styling="bg-mint">Always full width</layout:box>
    </layout:block>
    <layout:grid>
        <layout:block xl="1-3" md="1-2">
            <layout:box styling="bg-mint-light">xl=1-3, md=1-2</layout:box>
        </layout:block>
        <layout:block xl="1-3" md="1-2" xl-offset="1-3">
            <layout:box styling="bg-mint">xl=1-3 xl-offset=1-3, md=1-2</layout:box>
        </layout:block>
    </layout:grid>
    <layout:grid>
        <layout:block xs="1-2" xs-offset="1-4" sm-offset="1-2" md-offset="0">
            <layout:box styling="bg-aqua">No offset md and above</layout:box>
        </layout:block>
    </layout:grid>
    <layout:grid>
        <layout:block xs="1-2" sm-offset="1-4">
            <layout:box styling="bg-aqua-dark">Offset at sm and above</layout:box>
        </layout:block>
    </layout:grid>
</layout:grid>

    Nested

    Standard Button

    Example

    <layout:grid styling="text-white">
    <layout:block xs="1-1" sm="1-2" md="1-4">
        <layout:box styling="bg-aqua-light">
            .tk-rgrid-u-1 <br>
            .tk-rgrid-u-sm-1-2 <br>
            .tk-rgrid-u-md-1-4 <br>
        </layout:box>
    </layout:block>
    <layout:block xs="1-1" sm="1-2" md="1-4">
        <layout:box styling="bg-sky-light">
            .tk-rgrid-u-1 <br>
            .tk-rgrid-u-sm-1-2 <br>
            .tk-rgrid-u-md-1-4 <br>
        </layout:box>
    </layout:block>
    <layout:block xs="1-1" sm="1-2" md="1-4">
        <layout:box styling="bg-sky">
            .tk-rgrid-u-1 <br>
            .tk-rgrid-u-sm-1-2 <br>
            .tk-rgrid-u-md-1-4 <br>
        </layout:box>
    </layout:block>
    <layout:block xs="1-1" sm="1-2" md="1-4">
        <layout:box styling="bg-sky-dark">
            .tk-rgrid-u-1 <br>
            .tk-rgrid-u-sm-1-2 <br>
            .tk-rgrid-u-md-1-4 <br>
        </layout:box>
    </layout:block>
</layout:grid>

    Image

    Standard Button

    Example

    <layout:grid>
    <layout:block xs="1-1" sm="1-2" md="1-4">
        <layout:box styling="bg-paper">
            <p>
                .tk-rgrid-u-1 <br>
                .tk-rgrid-u-sm-1-2 <br>
                .tk-rgrid-u-md-1-4 <br>
            </p>
        </layout:box>
    </layout:block>
    <layout:block xs="1-1" sm="1-2" md="1-4">
        <layout:box styling="bg-paper-dark">
            <p>
                .tk-rgrid-u-1 <br>
                .tk-rgrid-u-sm-1-2 <br>
                .tk-rgrid-u-md-1-4 <br>
            </p>
        </layout:box>
    </layout:block>
    <layout:block xs="1-1" sm="1-2" md="2-4">
        <layout:box styling="bg-paper">
            <p>
                .tk-rgrid-u-sm-1-2 <br>
                .tk-rgrid-u-md-2-4 <br>
            </p>
            <layout:grid>
                <layout:block sm="1-1" md="1-2">
                    <layout:box styling="bg-paper-light">
                        <p>
                            .tk-rgrid-u-1 <br>
                            .tk-rgrid-u-md-1-2 <br>
                        </p>
                    </layout:box>
                </layout:block>
                <layout:block sm="1-1" md="1-2">
                    <layout:box styling="bg-paper-dark">
                        <p>
                            .tk-rgrid-u-1 <br>
                            .tk-rgrid-u-md-1-2 <br>
                        </p>
                    </layout:box>
                </layout:block>
            </layout:grid>
        </layout:box>
    </layout:block>
</layout:grid>

    Justify Content

    Example

    <layout:grid>
    <layout:block styling="center-content bg-raspberry text-white" md="1-2">
        <p>Long content</p>
        <br><br><br><br><br><br><br>
    </layout:block>
    <layout:block md="1-2">
        <div styling="stretch-content">
            <layout:block styling="center-content bg-strawberry text-white" md="1-2">item 1</layout:block>
            <layout:block styling="center-content bg-carrot text-white" md="1-2">item2</layout:block>
            <layout:block styling="center-content bg-pumpkin text-white full-width">item 3</layout:block>
        </div>
    </layout:block>
</layout:grid>

    Hide

    You can hide the layout by using hide or show at your desire size point styling="hide-xs"

    xl

    Example

    md

    Example

    xs

    Example

    <layout:grid>
    <layout:block md="1-5" styling="hide-xs bg-concrete-light">
        <layout:box>hide @xs-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="hide-sm bg-concrete">
        <layout:box>hide @sm-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="hide-md bg-concrete-dark">
        <layout:box>hide @md-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="hide-lg bg-asphalt-light">
        <layout:box>hide @lg-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="hide-xl bg-asphalt">
        <layout:box>hide @xl-width</layout:box>
    </layout:block>
</layout:grid>

<layout:grid>
    <layout:block md="1-5" styling="show-xs bg-pink-light">
        <layout:box>show @xs-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="show-sm bg-pink">
        <layout:box>show @sm-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="show-md bg-pink-dark">
        <layout:box>show @md-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="show-lg bg-lavender">
        <layout:box>show @lg-width</layout:box>
    </layout:block>
    <layout:block md="1-5" styling="show-xl bg-lavender-dark">
        <layout:box>show @xl-width</layout:box>
    </layout:block>
</layout:grid>

    Alignments

    Default (Stretch)

    Example

    Align All Items Top (.tk-rgrid-align-top)

    Example

    Align All Items Bottom (.tk-rgrid-align-bottom)

    Example

    Align All Items Middle (.tk-rgrid-align-middle)

    Example

    Stretch All Items (.tk-rgrid-align-stretch)

    Example

    Item Alignment Overrides

    Example

    Justify Items

    Default, Align items to the start (.tk-rgrid-justify-start)

    Example

    Align items to the end of the container (.tk-rgrid-justify-end)

    Example

    Center items (.tk-rgrid-justify-center)

    Example

    Even spacing around items (.tk-rgrid-justify-around)

    Example

    Even spacing between items (.tk-rgrid-justify-between)

    Example

    Combination

    Example

    Container Direction

    Row - Default (.tk-rgrid-direction-row)

    Example

    Row Reverse (.tk-rgrid-direction-row-reverse)

    Example

    Column (.tk-rgrid-direction-col)

    Example

    Column Reverse (.tk-rgrid-direction-col-reverse)

    Example

    Offsets

    Example