Sitecore Experience

Accelerator (SXA)

Ruud van Falier

Co-founder & Senior Consultant @ ParTech
Sitecore MVP 2012-2016
Who am I?

Ruud van Falier

Co-founder ParTech (2011)
Sitecore MVP (2012 – 2016)

E-mail: ruud@partech.nl
Twitter: @BrruuD
2
Overview

• What is SXA?
• Building a page
• Page & partial designs
• Themes
• Creative exchange
• HTML structure
• SXA renderings

3
What is SXA?

“It’s Sex’ay!”
- Reinoud van Dalen
What is SXA?

• Out-of-the-box component library

• Out-of-the-box local datasource support
• Extended Experience Editor (drag & drop!)
• Wireframe design
• Helix-based architecture
• Increase productivity by working in parallel

5
Working in parallel

6
Working in parallel

7
Building a page in SXA
Building a page in SXA

9
Page & partial designs
Page & partial designs

Partial design:
- Presentation template that pre-populates placeholders with
components

Page design:
- Merge several partial designs into one design
- Can be assigned to content items (page items)

11
Page & partial designs

12
Page & partial designs

13
Themes
Themes

• Consists of custom CSS, JS and Media

• Stored in the Media Library
• Don’t forget to check ‘Create new theme’ during
site creation

15
Creative exchange
Creative exchange

1. Export a theme to HTML, CSS, JS & Media (images, fonts)

2. Modify the styling (not the HTML)
3. Import the modified theme

Allows front-end developers without any knowledge of Sitecore to apply

styling to your website.

17
Creative exchange

Design process with out-of-the-box components:

• Create site with new theme

• Create partial designs (wireframe)
• Create page designs (wireframe)
• Create page item for each page design
• Export theme using creative exchange
• In parallel:
• Front-end developer applies styling to the theme
• Content editor creates pages and content

• Import theme using creative exchange

18
HTML structure
HTML structure

All regular renderings can be placed in the following containers:

• header
• content
• footer

Meta renderings can be placed on Meta Partial Designs in the following

containers:
• head
• body-top
• body-bottom

20
HTML structure

21
HTML structure

Grid system

960 pixels wide

Divided over max

12 columns

22
HTML structure

Grid system
Row splitters
<div class='row'></div>
<div class='row'></div>

Column splitters
<div class='row'>
<div class='grid-6'></div>
<div class='grid-6'></div>
</div>
23
HTML structure

SXA renderings
<div class='component component-name'>
<div class='component-content'>
<!-- component html -->
</div>
</div>

24
HTML structure

More details at https://doc.sitecore.net

25
SXA renderings
SXA renderings

Just to get an idea of what comes out-of-the-box…

• Tag cloud • Social login • Image gallery
• Search (with facets, • Simple content (Rich- • Video player
sorting, paging) Text, Title, Promo) • Maps (Google,
• RSS feed • Navigation (link list) Bing)
• Breadcrumb • WFFM wrapper
• Share buttons
• Splitters (layout • Event calendar
• Login structures) • Language selector
• Carousel • Accordion • Site selector
27
Conclusion

• Improved Experience Editor experience (drag & drop, finally)

• Save back-end development time (out-of-the-box components)
• Shorten the development cycle in general by working in parallel
• Front-end developers require no Sitecore knowledge and less support
from back-end developers

28
Thanks!

Contact me:
@BrruuD
ruud@partech.nl