Sitecore Experience

Accelerator (SXA)

Ruud van Falier

Co-founder & Senior Consultant @ ParTech

Sitecore MVP 2012-2016

2

Who am I?

Ruud van FalierCo-founder ParTech (2011)

Sitecore MVP (2012 – 2016)

E-mail: ruud@partech.nl

Twitter: @BrruuD

3

• What is SXA?

• Building a page

• Page & partial designs

• Themes

• Creative exchange

• HTML structure

• SXA renderings

Overview

What is SXA?

“It’s Sex’ay!”

- Reinoud van Dalen

5

• 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

What is SXA?

6

Working in parallel

7

Working in parallel

Building a page in SXA

9

Building a page in SXA

Page & partial designs

11

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)

Page & partial designs

12

Page & partial designs

13

Page & partial designs

Themes

15

• Consists of custom CSS, JS and Media

• Stored in the Media Library

• Don’t forget to check ‘Create new theme’ duringsite creation

Themes

Creative exchange

17

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.

Creative exchange

18

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

Creative exchange

HTML structure

20

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

HTML structure

21

HTML structure

22

HTML structure

Grid system

960 pixels wide

Divided over max12 columns

23

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>

HTML structure

24

SXA renderings

<div class='component component-name'>

<div class='component-content'>

<!-- component html -->

</div>

</div>

HTML structure

25

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

HTML structure

SXA renderings

27

• Tag cloud

• Search (with facets,

sorting, paging)

• RSS feed

• Share buttons

• Login

• Carousel

SXA renderings

• Image gallery

• Video player

• Maps (Google, Bing)

• WFFM wrapper

• Event calendar

• Language selector

• Site selector

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

• Social login

• Simple content (Rich-Text, Title, Promo)

• Navigation (link list)

• Breadcrumb

• Splitters (layout structures)

• Accordion

28

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

Thanks!

Contact me:

@BrruuD

ruud@partech.nl