Sitecore tip 46: satisfy your content editors with predefined grid column components in SXA

It is no secret that I love Sitecore Experience Accelerator (SXA) because it enables me to create almost anything a content-driven site requires. At the same time, if there is one thing I see content editors struggling with, it is configuring responsive behavior with the grid settings. They simply don’t have the knowledge about a 12 column grid, the CSS classes it uses and the effect in behaviour.

Still this is how SXA works OOTB. So what now? One best practice I have learned over time is to create predefined column layouts. Why? For a number of reasons:

  • There is hardly any design that requires all 12 individual columns to setup usable pages. It can always be downsized to a couple of page layouts;
  • I haven’t met a content editor yet who is able to create responsive pages by using all the grid settings, because it requires extensive HTML and grid knowledge;
  • Often content editors simply don’t have time to think about responsive behaviour. It is the job of the UX and Frontend experts. The content editors are busy enough writing and adding content to a site;
  • Predefined column layouts will speed up the work of your content editors as well so they can focus on what matters most to them: creating content;
  • Predefined column layouts reduce mistakes in responsive behaviour. Due to the lack of knowledge it can frustrate your content editors and will not help in adoption the platform;

SXA to the rescue

So, now we know why using predefined column layouts is such a good idea, let’s look at how SXA can help you. There are a couple of ways but in general this is what I do.

Design the column layouts

First, you have to determine which column layouts you want to support. The obvious ones are for example:

  • Full width: this is a col-12 configuration
  • 2 equal columns: this is a double col-6 configuration
  • 3 equal columns: this is a triple col-4 configuration
  • 2rd and 1rd: this is a col-8 and col-4 configuration

Try to use meaningful names that your content editors understand. They should describe the layout.

Next, choose a solution to create your predefined column layouts.

Using the Container component

1. Clone the Container component with the clone rendering wizard and choose to create a copy of the razor view file.

2. Open the razor view file and modify it. This is where the magic happens. Below you will find an example of the razor view with 3 columns and placeholders. Note: I have used CSS classes of a custom grid system a colleague of mine wrote. Don’t get confused now!

@using Sitecore.XA.Foundation.DynamicPlaceholders.Models
@using Sitecore.XA.Foundation.MarkupDecorator.Extensions
@using Sitecore.XA.Foundation.SitecoreExtensions.Extensions
@using Sitecore.Mvc
@using Sitecore.XA.Foundation.Presentation.Services

@model DynamicPlaceholdersRenderingModel

    const string placeholderKeyPrefix = "col-left";
    var key = string.Format("{0}-{1}", placeholderKeyPrefix, Model.Id);
	const string placeholderKeyPrefix2 = "col-middle";
    var key2 = string.Format("{0}-{1}", placeholderKeyPrefix2, Model.Id);
	const string placeholderKeyPrefix3 = "col-right";
    var key3 = string.Format("{0}-{1}", placeholderKeyPrefix3, Model.Id);

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "col", Model.Attributes)>
	<div class="m-grid__M4">
		<div class="placeholder__container">
			@using (PlaceholderDatasourceContext.EnterContext(Model.Rendering.Item)) 
			{ @Html.Sitecore().Placeholder(key) }
	<div class="m-grid__M4">
		<div class="placeholder__container">
			@using (PlaceholderDatasourceContext.EnterContext(Model.Rendering.Item)) 
			{ @Html.Sitecore().Placeholder(key2) }
	<div class="m-grid__M4">
		<div class="placeholder__container">
			@using (PlaceholderDatasourceContext.EnterContext(Model.Rendering.Item)) 
			{ @Html.Sitecore().Placeholder(key3) }

The trick is to create multiple keys for your placeholders so you ensure unique placeholder keys. There is one downside though: if you use the container component a lot on one page your placeholder keys will add up. You will get something like col-middle-35.

In the video below you will see an example of this configuration where I did a small PoC with a custom grid system of one of my colleagues.

Using the Page Layout component

Another option is to use rendering variants. The advantage is that you have one component where your content editor can choose the desired layout from the rendering variant dropdown. Here is what I did:

1 . Clone the Page content component and choose to create a copy of the view file.

2. Change the view file to something like in the example below:

@using Sitecore.XA.Foundation.MarkupDecorator.Extensions
@using Sitecore.XA.Foundation.RenderingVariants.Extensions
@using Sitecore.XA.Foundation.RenderingVariants.Fields
@using Sitecore.XA.Foundation.SitecoreExtensions.Extensions
@using Sitecore.XA.Foundation.Variants.Abstractions.Fields

@model Sitecore.XA.Foundation.Variants.Abstractions.Models.VariantsRenderingModel

@if (Model.Item != null)
	foreach (BaseVariantField variantField in Model.VariantFields)
		@Html.RenderingVariants().RenderVariant(variantField, Model.Item, Model.RenderingWebEditingParams, Model)

As you can see I stripped all HTML. I know, this is not really allowed and you need the <div class=”component-content”> for Creative Exchange. But since I’m not using it at all I can do this :).

Note that I have also removed the outer div where the CSS classes and other rendering parameters are set! So in this example you cannot use the styles and grid settings anymore.

3. Create the rendering variants for each desired predefined column layout. If you don’t have the Scriban item available you can use the old way, otherwise use Scriban.

Your rendering variants should like something like follows:

Or if you use Scriban like follows:

And when the content editor is using the component in the Experience Editor he will see something like the following:

Remember to add icons for each rendering variant so it makes it easier for the content editor to recognize the layouts.

Final words

All right, I hear you think: that is not good because you will mess up the HTML, the rows and column CSS classes, etc. Yeah you are absolutely right. But this is just a quick setup to inspire you. You are able to create a correct setup. If you create a custom implementation of the Bootstrap grid (or any other grid system), tweak the assignment of the row class you will be able to create a cleaner nicer Bootstrap implementation and help your content editors at the same time.

In the video I showed above I have implemented a custom grid and created custom component with predefined column layouts. It works perfectly and creates the desired HTML structure to ensure a correct responsive grid.

So take some time to talk to your content editors, create a setup with HTML you like and you are good to go. Everybody’s happy :).