Tickster Styleguide

Appearance

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 and rows that adjust based on the screen size, providing a consistent and organized structure.

Variants ​

  • Auto: Use the .o-grid--auto modifier to make the whole grid fluid, 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--gap-none or .o-grid--bleed modifier to reset all column gaps.
  • Gap Sizes: Use the .o-grid--gap-[s|m|l|xl] modifiers to add extra gutter space between columns.
  • Column Widths: Use the .o-grid__col-[xs|sm|md|lg]-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.
  • Auto Column Width: Use the .o-grid__col-[xs|sm|md|lg]-auto class for columns that should have a fixed size while others adjust. 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] to change the visual order on screens matching the [xs|sm|md|lg] modifiers, where N is a sort order number from 0 to 5 (0 being the default).

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>
html
<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>
html
<div class="o-grid o-grid--auto u-margin-top--large" 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-auto">
        <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>

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).