The SXA themes

Last updated Tuesday, October 10, 2017 in Sitecore Experience Accelerator for Content Author, Designer, Developer
Keywords: Design

Themes define the look and feel of a site and can be created separately from the site functionality and content. There are two types of themes: base themes and site themes.

SXA comes with the default site theme named Wireframe to help you set up your site quickly. A site can be put together using the wireframe theme, while in the meantime the base theme is sent to a creative agency using Creative Exchange. When imported back, the site can be re-skinned using the new theme. You can create a new theme by copying the base theme and adding your own classes, applying a style to a particular rendering on a particular page, and adding assets, such as images, fonts, and files.

This topic describes:

Base themes

Base themes are prototype themes that predetermine the layout of a website. You can have several base themes to support different design philosophies or specific functionality.

Note

Do not change base themes because these are part of the platform. If the base themes do not suit your needs, it is better to create a new base theme to inherit from.

The base themes are saved in the Media Library: /sitecore/Media Library/Base Themes.

lefttopThe base themes are saved in the Media Library.

The Base Themes folder contains:

  • Core Libraries – the third-party libraries used in projects such as: jquery, jquery UI, lo-dash, mediaelement, modernizr, and so on.
  • Main Theme – the scripts and styles that are part of the platform (except for the rendering scripts). Main Theme has a dependency on Core Libraries, so if you are inheriting from it, you must also inherit from Core Libraries first.
  • Grid themes – grid CSS generated by a sass grid generator.

Site themes

Site themes are extensions of base themes and can be applied to specific sites. Site themes usually have dependency on base themes and contain scripts and styles for all renderings used in a site.

A theme is a set of assets (style sheets, scripts, and images) that can be selected on a per-site basis. By default, a theme contains folders for fonts, images, scripts, and styles:

Structure of a theme.

Folder

Required

Description

fonts

Not required

An example of how you could organize your fonts assets. This folder is optional and can be named differently.

images

Required

An example of how you could organize your images assets. Although not directly required by SXA, some CSS may use image references to a set path.

scripts

Required

Use to add your scripts or to delete unused scripts. Elements nearer to the top are loaded faster.

styles

Required

Use to add or delete styles.

The Asset Optimizer uses the scripts and styles folders of the site theme to prepare minified source code (optimized.min.js and optimized.min.css) to save bandwidth during a page request:

minified source code.

If you have disabled the Asset Optimizer, instead of optimized.min files, you will see uncompressed scripts from the Media Library:

Uncompressed scripts.

Note

You must not add folders under the styles and scripts folders. You can place your scripts and styles directly in the folders, without nested structure.

Site themes contain CSS styles, theme images, and JavaScript libraries used to provide your site branding. Site themes often contain Sass sources, compass config, used to generate CSS styles. In this case, front-end developers should not modify the CSS files directly but rather work within the Sass workflow.

The CSS and JavaScript files in themes are divided into chunks that deal with one rendering at a time.

styles for renderings.

For each site theme, you must select a base theme to define the basic characteristics and properties of the theme. Every theme also needs a grid theme. SXA themes support multiple inheritance. This means that you can define multiple parent themes for every single theme. For example, in the following, the Holiday theme inherits from several other themes:

You can inherit from several other themes.

The order of selected base themes is important. Be careful when you add a new theme or change the order. For example, if the SearchTheme relies on jquery library that is located in Core Libraries, you must make sure that the SearchTheme is loaded after the other themes.Order of base themes is important.

Every theme needs a base theme and a grid theme.

The Wireframe theme

The standard SXA Wireframe theme that comes with core CSS and JavaScript is always the starting point for a new site. You can swap the Wireframe theme with a site theme once it has been prepared by your front-end developers.

Standard SXA theme to start your site with. Can be replaced with site theme once ready.

The Basic2 theme

You need the Basic2 theme to be able to work with Creative Exchange Live. Creative Exchange Live is an SXA feature that enables front-end developers to modify themes and other site content without having to import the files back into the site. The Basic2 theme allows you to work with gulp.

folder structure of the Basic2 theme

Folder

Required

Description

gulp

Required

To use Creative Exchange Live, your site must use the Basic2 theme. This theme contains the Gulp folder. Gulp tasks that enable you to make changes to themes and other content and synchronize to the Sitecore environment immediately.

sass

Required

Folder that contains all Sass files: scripts and styles.

fonts

Not required

An example of how you could organize your fonts assets. This folder is optional and can be named differently.

images

Required

An example of how you could organize your images assets. Although not directly required by SXA, some CSS may use image references to a set path.

scripts

Required

Use to add your scripts or to delete unused scripts. Elements nearer to the top are loaded faster.

styles

Required

All CSS styles for renderings that will be created as a result of compiling Sass files.