Front-End Development

SXA Styles and Variants

A technology developer working with code

This is an overview on Sitecore’s SXA Styles and Variants. This is Sitecore’s way of styling components. SXA comes preloaded with out-of-the-box components that include Variants and Styles. You’ll probably need to customize some of these existing SXA assets, and add some of your own.

*NOTE: Going forward, when I mention “styles” I’ll be referring to Sitecore’s “Style Ticks”, not CSS Styles.

Styles vs Variants

In a nutshell, if you want to change the look without changing the markup, use a Style. If you need to change the markup, use a Variant. One extra benefit of Variants, is that you can load a screenshot of the Variant into the Variant drop-down in the Experience Editor. This allows Content Authors to get a visual representation of the component before they put it on the page. In some instances, I’ve seen a site build completely with Variants, and very little Styles. After all, as a Sitecore developer, the Content Author is your primary customer.

Styles

Styles apply a unique class to the parent element of a component. This allows you to adjust the component and any elements within, using CSS specificity.

You can supply a custom class name in the Value field on the Style node in the Content Editor.

*TIP: Apply which renderings you want the styles to appear under. Otherwise, a Content Author could apply styles that don’t belong on specific components.

Styles settings

Styles settings

Styles are created in Sitecore at this location.
sitecore/Content/{tenent}/{site}/Presentation/Styles/{component}/{style}

Styles location

Styles location

Apply the style to the component using the paint bucket icon in the Experience Editor.

Styles application

Styles application

Variants

Variants allow you to load different markup for a specific component. You can use Sitecore node structure, or Scriban Templates. Scriban is highly recommended.

Variants are created in Sitecore at this location.
sitecore/Content/{tenent}/{site}/Presentation/Styles/{component}/{variant}

Variant location

Variant location

When adding a new Variant, make sure you add a custom class name to the parent node in the Content Editor. This will allow you to style the variant using CSS specificity.

Variant class name

Variant class name

For Scriban templates, you can input the exact markup you want in the Template Field.

Variant Scriban

Variant Scriban

Learn all about Scriban on Sitecore’s documentation site.
https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/scriban-templates.html

Apply the Variant to the component using the Variant drop-down on the component in the Experience Editor.

Variant application

Variant application

File Structure and Code Patterns

SXA comes with a pattern already in place. It is recommended to follow the existing patterns to maintain readability across your entire dev team, and for developers who haven’t yet joined your dev team.

CSS files are organized with ‘component files’ loading ‘sub-files’. The Component files are in the ‘{theme}/sass’ folder and are named component-{component}.scss coinciding with the name of the component.

File Structure component location

File Structure component location

Sub-files are located in ‘styles’ and ‘variants’ folders in the same ‘sass’ folder, and are named by the class name used in Sitecore.

File Structure sub-file location

File Structure sub-file location

Within these component files are @includes that load the Sub-files.

*TIP: It is recommended to call these imports within the root class name, to strengthen CSS specificity.

File Structure input

File Structure input

So that’s it! Knowing how these systems work will help with estimations, and future enhancements.

Go forth and add Styles and Variants to your Sitecore instance, with the Content Author in mind.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Jerry Kellar

Jerry has been developing for the web for over 15 years, focusing on Front-End technologies, and has been working with Sitecore since 2014. In his spare time, he enjoys time with his growing family as well as tennis, running, and coordinating local music events and festivals.

More from this Author

Subscribe to the Weekly Blog Digest:

Sign Up
Follow Us
TwitterLinkedinFacebookYoutubeInstagram