Walkthrough: Setting up a custom grid

Abstract

How to set up the grid when configuring the Horizon editor experience for SXA sites.

The Horizon editor uses the SXA grid to determine the look and feel of the editor. In the Horizon editor, the grid specifies the breakpoints for displaying components. You select a grid during site creation, and you cannot change the grid later. You can either use one of the standard SXA grids or a custom grid.

If you choose a custom grid during site creation, you must define the breakpoints for it. If you want, you can also change the display types away from the defaults. If you do so, you might have to specify icons for certain display types.

This walkthrough describes how to:

  • Define grid breakpoints

  • Change the display types

  • Specify Horizon icons for buttons

The breakpoints determine the visual position of elements on your site when displayed in a browser. These breakpoints do not always align with the sizes defined in the Horizon device switcher. If you use a custom grid, you must define the breakpoints for your grid.

To define the breakpoints for your custom grid:

  1. Navigate to /sitecore/system/Settings/Feature/<My project>/<My grid>.

  2. Open a device folder, for example, Small.

  3. In the Grid Breakpoints section, enter the Min and Max values.

    You must set the min and max values for breakpoints for every device size in your grid.
  4. Repeat this for every device.

Note

By default, the breakpoint values are pixels. You can also specify em units. If you leave the fields empty, SXA assumes Min to be -Infinity, and Max to be +Infinity pixels.

The SXA grids have default display types configured. If you want, you can change the look and feel for your editors. To do so, you can specify other display types for each set of grid-specific CSS classes. This affects how the style displays for the user in the Horizon editor. These CSS classes are usually grouped in sets, for example, Size, Order, Offest, Float, and Visibility. The available sets depend on your selected grid system.

To set the display type for your grid:

  1. Navigate to a device that you have set breakpoints for, and click a CSS class folder.

  2. In the Data section, click the Type drop-down menu, and then click the display type that you want.

  3. Repeat steps 1 and 2 for any class folders that you want to change the display types for.

If you change a grid-specific display type to one that uses buttons, you must specify the Horizon icon for each button. If you do not do this, your editors will only see blank buttons.

To specify a Horizon icon:

  1. Navigate to your grid, select a device size, and expand on a CSS class folder that you have set to use an icon display type.

  2. Click the value you want to set the icon for.

  3. In the Data section, in the Icon field, enter a CSS class for the icon. The following screenshot shows the align-left class specified for the Left value.

    Under Icon, you can specify a CSS class for the icon for each value in your CSS style.
  4. Repeat step 3 for every value in the class folder.