Sitecore Experience Accelerator

Create a custom grid

Abstract

Add your own CSS framework.

By default, SXA comes with three grid systems. If you do not want to use the bootstrap, foundation, or Grid960 grid system, you can add your own custom CSS framework.

Grid systems are stored as a feature in Sitecore and include:

  • The grid theme – includes the css file with all grid classes.

  • The grid definition item – includes all grid-system specific items (the devices and their classes).

  • The grid setup item – the scaffolding item to include the grid in the drop-down list of the site creation wizard.

    3214FB86C3EF413B915AFDE25E4AF3E9.png

This topic describes how to:

Your custom grid must have a grid theme assigned. SXA comes with a base grid theme that contains scripts and styles. You can use this base theme for your custom grid theme.

To create a grid theme:

  1. Navigate to sitecore/Media Library/Feature and create a new folder for your grid. The default grids are saved in the Experience Accelerator folder (sitecore/Media Library/Feature/Experience Accelerator). Because SXA overwrites the standard SXA sections with SXA updates, we recommend that you create a separate folder for your grids.

  2. Right-click the new folder and click Insert from template.

  3. In the Insert from template dialog box, navigate to sitecore/templates/Foundation/Experience Accelerator/Grid/ and click Grid Theme.

  4. Right-click the new grid theme and click Insert, Styles. Upload all your styles here.

    C5C262E7CDC0492A9C7CB9452759900D.png

Your custom theme needs a grid definition item that includes all grid-system specific items (the devices and their classes).

To create the grid definition item:

  1. Navigate to sitecore/System/settings/Feature/ and create a new folder for your grid.

    5C82FC41C24A49F5974C909BF7A569A8.png
  2. Right-click the new folder and click Insert from template.

  3. In the Insert from template dialog box, navigate to /sitecore/templates/Foundation/Experience Accelerator/Grid/ and click Grid Definition.

  4. Fill in the following fields:

    • Name - The name of the grid system as you want it to display in the site creation wizard.

    • Rendering parameters field type - Determines the way the grid parameters are rendered. If you do not want to customize, use the default field renderer: Sitecore.XA.Foundation.Grid.Fields.FieldRenderers.GridRenderingParametersFieldRenderer

    • Default component layout - Sets the default column size for renderings that you drag on the page.

    • Grid theme - Links to the theme used for the grid.

    • Grid field parser type - Determines the parser type to parse the grid fields. If you do not need customization, use the default: Sitecore.XA.Foundation.Grid.Parser.GridFieldParser,Sitecore.XA.Foundation.Grid

    • Grid body view path - Path to your cshtml file that defines the body layout of a page. You must include all necessary placeholders such as header, main, and footer.

To add the new grid as one of the grid options in the site creation wizard, you must add the grid setup.

To add the grid setup:

  1. Right-click the new grid and click Insert from template.

  2. In the Insert from template dialog box, navigate to sitecore/Templates/Foundation/Experience Accelerator/Scaffolding/Roots and click Grid Setup.

  3. Fill in the following fields:

    • Name - The name of the grid system as you want it to display in the site creation wizard.

    • Dependencies - Specify the order to install the modules.

    • GridDefinition - Refers to the grid definition item. For example, for the custom grid in this example: Settings/Feature/My custom grid/My custom grid definition

  4. You can now select your custom grid when creating a site.

    select custom grid