At ClearPeople we are always trying to use the latest technologies, so it was just a matter of time for us to start working with SXA. In fact, we are using it to build our own brand-new website!
We have a lot of experience working with Sitecore, where the Back-End and Front-End developers used to work separately doing our different tasks, which are not always easy to join up. Now, with SXA, we can work in parallel and coordinate more closely.
SXA uses Creative Exchange for this, allowing us to work at the same time and synchronise our changes with Sitecore without the help of a backend developer.
But the most useful feature is that it also includes gulp, that will speed up development process by compiling the Sass files into CSS files, and then, synchronising these CSS files with the correspondent Sitecore items.
To start working with this, we just need to create a new theme with SXA, based on the Basic2 theme, and this will include all the necessary files. Once done, export it with CE to a local folder, and configure the gulp settings file to point to the right paths, and you’re good to go.
All the required process is well documented at the Sitecore Doc site.
Once everything is set up, we recommend using the preview mode in Sitecore, so that we can directly see our changes as we make them, otherwise we would need to publish the files every time to see the changes.
This is a big improvement compared to the way we usually work with Sitecore and it saves us a lot of time and problems.
The grid system
By default, SXA comes with three grid systems: Bootstrap, Foundation and Grid 960.
Once you have chosen one of these grids, you can go to a page and use the row and column splitter components that comes with SXA to easily create responsive layouts.
Rendering variants and styles
SXA comes with a set of components with a default rendering. In addition, we can create different rendering variants, which can be seen as different layouts for the same component.
Imagine that we have to build two different versions for a “call to action” component, one with an image and text and the other one with text only. First, we need to choose the SXA component that fits more closely to our requirements, which, in this case, will be the “promo” component.
So now, we can adapt the default rendering variant (or create a new one, up to you) for the promo component with the Image and text. Then we will create a second variant to display the text only version. We can add any specific CSS class that we may need in the variant properties, for each field or the whole component.
Now we can add a promo component to a page and easily change the layout of our CTA component.
In addition to the rendering variants, SXA allows us to dynamically apply generic CSS classes to any component, that we can define separately.
This allows editors to apply generic styles to the same variant without needing to duplicate them, for example, to change the background colour or to center the text on a component.
As a rule of thumb, we may use rendering variants when the versions of the components have different layouts (like the CTAs example above). If the versions use the same structure, we can use styles to change look and feel.
SXA will help to speed up the frontend tasks and it’s the recommended way to go for Sitecore development. The automation added with Gulp is a big improvement and working with pre-existing components and the rendering variants/styles engine makes a big difference in the way we work as FE developers.