Tickster Styleguide

Appearance

v2.24.1

Grid ​

When to use it ​

The Grid object (see About Components for the semantic difference between Objects and Components) is used to create a flexible and responsive layout for your components. It allows you to define columns that adjust based on the screen size (not container width), providing a consistent and organized structure.

TIP

If column widths are not so important but alignment is, take a look at Flex as well.

Variants ​

  • Auto: Use the .o-grid--auto modifier to make the whole grid fluid, with consistent column widths, allowing columns to wrap as needed without specifying column classes. The column sizes in this case can be set using the --grid-min-item-size variable (default value is a "span" between 14 and 18 rem, using the clamp function: clamp(14rem, 25%, 18rem))
  • Gap None: Use the .o-grid--bleed, or the utility .u-gap--none to reset all column gaps.
  • Gap Sizes: Use the utilities .u-gap--[xs|s|m|l|xl|xxl] to add extra gutter space between columns.
  • Column Widths: Use the .o-grid__col-[xs|sm|md|lg|xl]-N classes to define column widths for different screen sizes, where N is a number from 1 to 12. Note: These variants does not work in auto grids.
  • Alignments: Use .o-grid--align-[start|center|end|space-between] and similar to align child elements along the cross axis. Dito classes for the main axis is .o-grid--justify-[…].
  • Self alignments: Use .o-grid--align-self-[start|center|end|space-between] and similar to align the grid element itself along the cross axis. Dito classes for the main axis is .o-grid--justify-self-[…].
  • Order: Use .o-grid--order-N-[xs|sm|md|lg|xl] to change the visual order on screens matching the [xs|sm|md|lg|xl] modifiers, where N is a sort order number from 0 to 3 (0 being the default).

Centering a narrower column

o-grid--justify-center affects alignment, but since .o-grid uses a full-width 12-column template, it does not move the columns themselves. To horizontally center a narrower column on its row, add o-grid--justify-self-center to the column.

Main vs Cross axis

In CSS Flexbox, the main axis is the primary axis along which flex items are laid out. It is defined by the flex-direction property. The cross axis is perpendicular to the main axis and is used for alignment and spacing in the perpendicular direction. For example, if flex-direction is set to row, the main axis is horizontal, and the cross axis is vertical.

What it looks like ​

Code examples ​

html
<div class="o-grid o-grid--auto">
    <div class="c-box c-box--info">
        Cell 1
    </div>
    <div class="c-box c-box--info">
        Cell 2
    </div>
</div>
<div class="o-grid o-grid--auto o-grid--gap-none">
    <div class="c-box c-box--info">
        Cell 1
    </div>
    <div class="c-box c-box--info">
        Cell 2
    </div>
    <div class="c-box c-box--info">
        Cell 3
    </div>
</div>
<div class="o-grid o-grid--auto u-gap--xl">
    <div class="c-box c-box--info">
        XL gap 1
    </div>
    <div class="c-box c-box--info">
        XL gap 2
    </div>
    <div class="c-box c-box--info">
        XL gap 3
    </div>
    <div class="c-box c-box--info">
        XL gap 4
    </div>
    <div class="c-box c-box--info">
        XL gap 5
    </div>
    <div class="c-box c-box--info">
        XL gap 6
    </div>
</div>
html
<div class="o-grid o-grid--auto" style="--grid-min-item-size:4rem">
    <div class="c-box c-box--info">
        Cell 1
    </div>
    <div class="c-box c-box--info">
        Cell 2
    </div>
    <div class="c-box c-box--info">
        Cell 3
    </div>
    <div class="c-box c-box--info">
        Cell 4
    </div>
    <div class="c-box c-box--info">
        Cell 5
    </div>
    <div class="c-box c-box--info">
        Cell 6
    </div>
</div>
html
<div class="o-grid">
    <div class="o-grid__col-4">
        <div class="c-box c-box--info">
            Cell 1
        </div>
    </div>
    <div class="o-grid__col-8">
        <div class="c-box c-box--info">
            Cell 2
        </div>
    </div>
    <div class="o-grid__col-12">
        <div class="c-box c-box--info">
            Cell 3
        </div>
    </div>
</div>
html
<div class="o-grid">
    <div class="o-grid__col-12 o-grid__col-xs-8 o-grid--justify-self-center">
        <div class="c-box c-box--info">
            Centered column (responsive)
        </div>
    </div>
    <div class="o-grid__col-12">
        <div class="c-box c-box--info">
            Next row
        </div>
    </div>
</div>

Accessibility notes ​

Although this component support visual reordering of content (using o-grid--order- attributes), please try to match the visual order of elements with the DOM order. Screen readers and keyboard navigation typically follow the DOM order, so placing elements in a logical sequence can be crucial for users relying on assistive technologies.

However, the order of content in a sequence is not always meaningful – providing a particular linear order is only required where it affects meaning. There may even be more than one order that is "correct" (according to the WCAG 2.0 definition).