Responsive Grid¶

Layout tab [[]]¶

• Main Axis: Determines how to align the Responsive Grid divisions.

  Note

  The Ink Responsive Grid has a variety of values to represent the relationships of divisions within the grid. The easiest place to start? Try:

  • Main Axis: Row
  • Justify content: Left
  • Align items: Top

  • Row: Aligns divisions in a row.

    • Justify Divisions: Determines how the row of grid divisions will justify along a left-right axis.

      Note

      Useful to locate the divisions within the grid when they have both maximum and minimum width set.

      • Left (default): Divisions are justified with the left margin of the grid.
      • Center: Divisions are justified in the center of the grid.
      • Right: Divisions are justified with the right margin of the grid.
      • Space Between: Divisions are evenly spaced within the grid, with the first division justified to the left margin and the last division justified to the right margin.
      • Space Around: Divisions are evenly spaced within the grid. There is spacing between the first division and the left margin, and between the last division and the right margin.
      • Stretch: Stretches the division’s contents to fit the division’s full width.

    • Align Divisions: Determines where divisions sit within the grid, positioning them along a top-to-bottom axis.

      • Top (default): Divisions are aligned with the top of the grid.
      • Middle: Divisions are aligned along a center left-right axis of the grid.
      • Bottom: Divisions are aligned with the bottom of the grid.
      • Stretch: Stretches the division’s contents to fit the division’s full height.

  • Column: Stacks division on top of one another.

    • Justify Divisions: Determines how the stacked grid divisions will justify along a top-to-bottom axis.

      Note

      Useful to locate the divisions within the grid when they have both maximum and minimum width set.

      • Top (default): Divisions are justified along the top of the grid.
      • Middle: Divisions are justified in the center of the grid.
      • Bottom: Divisions are justified along the bottom of the grid.
      • Space Between: Divisions are evenly spaced within the grid, with the first division justified to the top margin and the last division justified to the bottom margin.
      • Space Around: Divisions are evenly spaced within the grid. There is spacing between the first division and the top margin, and between the last division and the bottom margin.
      • Stretch: Stretches the division’s contents to fit the division’s full height.

    • Align Divisions: Determines where divisions sit within the grid, positioning them along a left-right axis.

      • Left (default): Divisions are aligned with the left margin of the grid.
      • Center: Divisions are aligned along the center top-to-bottom axis of the grid.
      • Right: Divisions are aligned with the right margin of the grid.
      • Stretch: Stretches the division’s contents to fit the division’s full width.

• Column Gutter Size (optional): The distance between divisions when they are displayed as columns, side-by-side. (Typically affects devices with larger screens, such as desktops.)

  • None
  • Extra Small
  • Small
  • Reduced
  • Regular
  • Increased
  • Large
  • Extra Large
  • Huge

• Row Gutter Size (optional): The distance between divisions when they are stacked as rows atop one another. (Typically affects smaller screen sizes or mobile devices.)

  • None
  • Extra Small
  • Small
  • Reduced
  • Regular
  • Increased
  • Large
  • Extra Large
  • Huge

• Full Width: If checked, the rightmost and leftmost components will ignore margins and instead sit immediately adjacent to the right and left edges of the page (respectively).

Advanced tab [[]]¶

• Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.

Interactions tab [[]]¶

Add interactions to the grid. Click add Add Interaction and then select:

• Action Type: To initialize the action, choose from three possible interactions:
  • Click: Best for desktop, as well as mobile.
  • Swipe: Best for mobile. Direction options include:
    • Either (direction)
    • Left
    • Right
  • Press: Best for mobile.

Then, click add Add action to the selected interaction and configure.

• Action Types: Use the Action Framework to launch actions from the Queue.

Styles tab [[]]¶

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

• Style Variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid Builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

• Spacing: Sets the spacing of the Header relative to other components on the page. Spacing can be managed for Top Margin, Bottom Margin, Left Margin, Right Margin. All margins can be set to one of the following:

  • None

  • Extra Small

  • Small

  • Reduced

  • Regular

  • Increased

  • Large

  • Extra Large

  • Huge

  • Note

    These sizes are relative to one another; the baseline is determined by Design System settings.

Display Logic tab [[]]¶

Standard display logic options are available.