Working with Sitecore Experience Accelerator (SXA) as a Front-End Developer

Posted 6 June 2018 12:00 AM by Clara Rodriguez, Front-End Developer @ ClearPeople

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. 

 

Share:

Add your comment

 
 

 

Archive

Tagcloud

intranet Modern SharePoint teamwork employee engagement digital workspace SharePoint JavaScript Windows Azure Digital Transformation staff satisfaction productivity Microsoft Teams Office 365 Yammer cms content management system agile GDPR Microsoft Graph collaboration Microsoft sharepoint 2016 upgrade migration SharePoint Online 2016 Tech Trends Digital Disruption Context marketing marketing SharePoint 2010 SharePoint 2013 TFS Git security kentico Analytics jquery QA Quality Assurance testing content management websites Sitecore sitecore marketplace sitecore module cloud Microsoft Cloud Storage digital strategy technical consulting sitecore modules Experience database Sitecore 7 Sitecore 8 support account management customer experience Data Storage cms integration front end front end development prototype Cloud Storage StorSimple Front-end Development Layout SharePoint 2013 colour palette UI design website design log viewer sitecore cms website Azure big data business-critical sharepoint accessibility android apple chrome clear people clearpeople debug emulator ios mobile testing opera resize adobe desktop flash ie10 internet explorer 10 metro windows 8 bcsp Advanced System Reporter reporting framework ControlMode form control master page placeholder publishing console SharePoint 2007 SharePoint error search search results search values software testing testing scenario audit content information architecture retention schedules PowerShell QuickLaunch scripts SharePoint server 2010 business solutions metalogix replication replicator storagepoint stena technet UK Technet picture library slideshow web part RTM released to manufacturing caml caml query MOSS 2007 query infopath