Sitecore Experience Accelerator (SXA) is a Sitecore accelerator framework built upon Helix principles and conventions, often referred to as component-based or modular architecture. In addition to adhering to clean coding concepts, SXA delivers with built-in front end frameworks, implementation-ready themes for rapid prototyping, modular and reusable page layout conventions, 68 out-of-the-box configurable renderings, and Creative Exchange – a design process that allows for designers or creative agencies to work in parallel production with development teams. Here's why an FED should love SXA:
Built-in Front End Frameworks
SXA provides built-in front end frameworks for Bootstrap 3, Foundation, and Grid960. Simply select the desired framework when you create a new site. You can also build your own framework if one of these doesn’t match your project requirements, but keep in mind that SXA is updated frequently. Word on the street is that version 1.8 will ship with Bootstrap 4 – this is very exciting.
Rapid Prototyping: Wireframe Theme
The default wireframe theme provides a basis for a developer to plan and prototype page layouts and focus on structure and functionality without getting mired down in the design aspects. This is key to the SXA modular architecture approach in separating content and presentation layers.
Page Layout: Partial Designs and Page Designs
In SXA, any given page’s layout is driven by its assigned Page Design. A page design can be any combination of Partial Designs. This allows a front-end developer to segment re-usable pieces of content and layout, providing the ability for flexible page layouts to be created with ease.
Let’s say for example, we have two layouts for a General Content page – one that has a full-width content area and one that has a content area and a sidebar. These pages would share common elements, such as a header and footer, and potentially other elements such as a breadcrumb and Page Title.
How do we make up these page design variations? In SXA, we create partial designs: a header, page header (title and breadcrumb), footer, content, and content with sidebar. Then we create the page designs: a general content and general content with sidebar. We assign our common elements (metadata, header, page header, and footer) to both layouts and then assign the partial design variations individually. Voila ~ wow, that was easy.
Page Design General Content General Content Sidebar Partial Design(s) Metadata Metadata Header Header Page Header Page Header Content Content Sidebar Footer Footer
Renderings: Toolbox & Rendering Variants
As of version 1.6, SXA boasts 68+ out-of-the-box renderings – many of which are configurable via Rendering Variants. This is truly the magic of SXA to a front-end Sitecore developer. The ability to configure many of the renderings allows for a developer to customize specific variations (fields, styles, layout) of existing renderings to achieve functional and design requirements without having to rely on a Sitecore developer to develop what typically is a highly specific component with limited functionality.
Renderings also have grid options and classes that can be applied to the rendering in Sitecore without requiring additional styling or the manual addition of classes. This means that multiple renderings can be placed on a partial design, but the design will only show various renderings at different breakpoints using just the default SXA settings. This eliminates the need for additional partial designs and potential code bloat.
Let’s use an example of a main navigation and how styling and functionality vary widely from mobile to desktop. In SXA, we can layout two navigation components within the same partial design – header. One rendering has settings and styles applied for mobile and the other with settings and styles for desktop. Since both the mobile and desktop navigation areas include a grouping of renderings in addition to a navigation rendering (such as logo image, search, etc.), each set is grouped in a parent container.
Using the grid options that are available for all components, we can set the column sizing for the rendering for various breakpoints.
Additionally, we can set the rendering to only show for mobile (notice the rendering set shows a gray overlay within Experience Editor). Responsive adjustments in one click!
Design: Creative Exchange
Lastly, let’s talk about Creative Exchange and Creative Exchange Live. In SXA, design updates to the presentation layer happen within the site’s theme, which is managed outside of Sitecore. Adhering to the concepts of modular architecting, the core set of files are specific to each rendering and SASS based. Additional SASS files for specific variants can be added and compiled into the master SASS file for each rendering.
With Creative Exchange, an export of your site can be provided to a front-end developer or creative agency that can then work on the project locally. Once the designs have been updated, the package is imported back into Sitecore. This can help to decrease the development cycle by allowing teams to work in parallel.
Creative Exchange Live introduces the concept of pushing locally updated design files directly into your Sitecore instance using GULP. This method is highly recommended for developers who are tasked with both Sitecore configuration and design updates to streamline the process and see changes in real-time. Read more about how to setup Creative Exchange Live.
As you can see, there are many exciting things about SXA for Sitecore that an FED should be excited about, especially when it can add so much value for a marketer or content editor.
Do you have more questions about SXA or its capabilities? Give us a shout!