X
Closing this message and/or accessing our website tells us you are happy to receive all cookies on the ClearPeople website.
However, if you would like to, you can change your cookies settings at any time.
How the Sitecore Experience Accelerator (SXA) can help Front-end development

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. 

 

Creative Exchange

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.

 

In order to work with Creative Exchange, we need to use the Basic2 theme that comes with SXA. This theme comes with base styles and JavaScript code for all the existing components in SXA. It uses a nice set of Sass files that facilitates a lot our work to style the site and components.

 

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.

 

grid1grid2

 

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.

 

promo1promo2

 

Styles

In addition to the rendering variants, SXA allows us to dynamically apply generic CSS classes to any component, that we can define separately.

 

 

style1  

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.

 

style2 

style3
 
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.

 

Conclusion

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. 

Author bio

Clara Rodríguez
Clara Rodriguez
UX Developer
I develop the visual part of the website, everything that the user sees and interacts with, trying to recreate the coolest designs by my colleagues. In my free time I like to watch TV shows and hang out with my friends, but if it’s summer you will find me at the beach.

Comments


comments powered by Disqus

Related Articles

Sign up to our Newsletter

Every now and then, we'd like to send you information that delivers, develops and promotes our products and services that are relevant to you. Submitting your details tells us that you're OK with this and you also agree to our Privacy & Cookies policy. You can, of course, opt out of these communications at any time.