Sitecore Experience Accelerator (SXA) offers content authors an elevated experience with an intuitive drag-and-drop WYSIWYG. Authors can also apply customized component layouts to create highly-visual pages. SXA uses grid systems that give the ability to section pages into columns and rows in varying widths.
A grid system is a library of structured HTML/CSS components that allow webpages to be created easily. Grid systems allow content authors to create responsive sites that ensure designs are maintained across different browsers and devices.
When setting up a new SXA site, there are three grid options available: Bootstrap, Foundation, and Grid 360. The Bootstrap grid is applied by default if a grid isn’t selected when creating a new SXA site.
Bootstrap is a responsive, mobile-first grid system with a 12-column layout that has predefined classes. Its configured to support:
Foundation is a responsive, mobile-first grid system with a 12-column flexible grid that can scale to any size. The default sizes are:
Grid 960 is a 12-column grid system that’s based on a 960 pixels width. The default settings are:
The Basic component layout tab shows the different rendering options for the grid system of the enabled SXA instance. The example below shows rendering options for different devices (compact phones, phones, tablets, laptops, and desktops) using a Bootstrap grid.
In this instance, a content author can select the grid width (1-12) for a Bootstrap-configured grid.
Bootstrap Brush Up
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. The Bootstrap grid is made up of 12 columns that are easily divided into, twelves, sixths, thirds, quarters, and halves. To learn more about Bootstrap, click here.
The Advanced component layout tab has additional configuration options to further customize the layouts of different renderings. A content author can apply the following layout options to a Bootstrap-configured grid:
Order
Use Order when there are multiple components across a single grid system and the components are to appear in different orders on different devices.
Offset
Use Offset when a component needs to move a number of columns to the right. An example would be if you want to centre a Rich Text component that’s 6 columns wide. In Basic, the width is set to 6. In Advanced, Offset would be set to 3. This put 3 columns on each side of the 6-column width component to total 12 (3 [offset] + 6 [component] + 3 [empty]= 12 columns).
Float
Use Float when a component needs to be on the far left or right side of its grid, allowing text and inline components to wrap around it.
Visibility
Use Visibility to determine when and how that component appears on different devices. For example:
It’s best practice to change the grid settings of a component over using additional column or row splitter components to change the layout of a page.
This limits the number of components on the page, making your page more responsive, and can improve the speed of the Experience Editor.
Happy Content Authoring!
Sitecore Experience Accelerator (SXA) is a module you can add to your Sitecore stack. It comes with ready-made templates and renderings you can use to build your site.
Sitecore SXA's main features include:
Sitecore SXA moves the focus away from building basic components and offers content authors more customization options with an easy-to-use WYSIWYG. SXA comes with ready-made components that are easy to use in the Experience Editor.
SXA gives Sitecore marketers more time to concentrate on their clients' unique problems/challenges.
Fishtank is a Sitecore SXA expert. Send us a message to [email protected] to learn more about Sitecore SXA and how you can unlock the full potential of Sitecore.
Sign up to our bi-weekly newsletter for a bite-sized curation of valuable insight from the Sitecore community.