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

Base themes contain scripts and styles that deliver more complicated functionalities. For example, shared functionalities such as the Bing/Google maps connector, Core Libraries (jquery, lo-dash), and scripts that influence the editing experience (sticky notes, editing themes, drag and drop, and partial designs highlighting).

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

The Analytics base theme adds analytic scripts for your site (Google analytics). It is dependent on XA.js (XA API theme).

It includes the following scripts:

Script

Description

trackinginit.js

Adds a tracking method to SXA's XAContext variable. After calling this function on document ready, an event will initialize tracking of video components.

tracking.js

Adds Google Analytics scripts. After calling this function on document ready, it will store the methods and setups for these scripts to run.

trackingmovie.js

Adds the Tracking.Movies method to SXA's XAContext variable. Stores the method for mejs and YouTube player analytics.

trackingmoviesplayer.js

Describes the method of the video player. Used in trackmoviesmejsplayer.js.

trackingmoviesplayermanager.js

Extends SXA's XAContext variable with the Tracking.Movies.PlayerManager script and stores methods for the video player.

trackingmoviesyoutubeplayer.js

Extends SXA's XAContext variable with the Tracking.Movies.YouTubePlayer script. Stores list of YouTube player methods.

trackingmoviesyoutubeplayerhandlers.js

Extends SXA's XAContext variable with Tracking.Movies.YouTubePlayer.Handlers. Stores YouTube player handlers.

Add the Bing Maps JS Connector theme if you use Bing maps. It is dependent on the XA.js (XA API theme).

It includes the following script:

  • bing-maps-connector.js - injects functionality for Bing maps.

Add the Google Maps JS Connector theme if you use Google maps. It is dependent on the XA.js (XA API theme).

It includes the following script:

  • google-maps-connector.js - injects functionality for Google maps.

The Grid theme is used during content editing. It lets you show components that are hidden by the grid and includes the following script:

  • gridhiddencomponents.js – show or hide components that are hidden by the grid.

The Grid theme includes the following style:

  • gridhiddencompontents.css

The JSON theme is used when a current device selects JSON. It adds markup and styles to highlight JSON and it includes the following script:

  • jsonhighlighter.js - formatting and syntax highlighting to make JSON more readable.

The JSON theme includes the following styles:

  • prism.css – styles for highlighting JSON

  • Json.css – sets default styles for JSON page

The Main theme contains scripts and styles that are part of the platform (except for the rendering scripts). The Main theme has a dependency on the Core libraries theme, so if you are inheriting from it, you must also inherit from Core libraries first. It is dependent on the XA.js (XA API theme)

The Main theme includes the following scripts:

Script

Description

observer.js

Calls the XA.init method on Chrome reset.

partial-design-highlight.js

Highlights the partial design when you hover over different designs from the drop-down menu in edit mode.

The Main theme includes the following styles:

Style

Description

core.css

Grid specific fixes.

file-type-icon.css

Styles for extension icons.

grayscale-mode.css

Styles for Gray Scale mode.

reset.css

Reset default browser styles.

You must use the Maps theme if you use the Maps.Dependent script in the XA.js (XA API theme).

The Maps theme includes the following style:

  • component-location-service.js – location service for the map component.

The Meta partial design theme stores scripts and styles for meta partial designs.

It includes the following scripts:

  • beautify-html.js – calls the beautifier method for html.

  • meta-partial-design.js – selects all components in the meta partial design view and calls the beautify method.

It includes the following styles:

  • meta-styles.css - styles for the meta partial design page.

The Search theme contains js logic for each separate search component.

SXA-base-theme-search-scripts.PNG

The Sticky notes theme provides the possibility to add sticky notes in Edit mode.

It includes the following script:

  • stickynotes.js - js logic for sticky node functionality

It includes the following styles:

  • stickynotes.css - styles for sticky nodes functionality

The Variants theme provides the possibility to change rendering variants for components in Edit mode.

It includes the following script:

  • variantswitcher.js - provides functionality for changing rendering variants in the Experience Editor.

The XA API theme registers components.

It includes the following script:

  • xa.js - injects special SXA objects that include the method for working with components and additional helpers.

The Core libraries theme includes the third-party libraries used in projects such as jquery, jquery UI, lo-dash, mediaelement, modernizr, and so on.

The Core libraries theme includes the following scripts:

Script

Description

Ie-origin-fix.js

Adds a fix for IE to have location.origin.

xaquery.js

Initializes jQuery and jQuery UI and puts them into window.$xa.

moment.js

The momentjs.com library to work with date/time functionality.

lo-dash

Adds the lo-dash library.

modernizr.js

Adds the modernizr library.

galleria-157.js

Adds the galleria library.

fullcalendar.js

Adds the full calendar library.

gcal.js

Adds the Google calendar.

jqueryuitouch-punchmin.js

Adds touch events for jQuery UI.

hammer.js

Adds the hammerjs library.

backbone-min.js

Used in search components and the maps component.

typeahead.js

Used in search components.

jquerymCustomScrollbar.js

Adds a custom scrollbar for the SXA toolbox.

flash-polyfill.js

Adds polyfill for the flash component.

mediaelement-and-player.js

Adds a library for the video component.

facebook.js

Adds a connector for Facebook video.

soundcloud.js

Adds a connector for SoundCloud.

twitch.js

Adds a connector for Twitch.

vimeo.js

Adds a connector for Vimeo.

The Core libraries theme includes the following styles:

Style

Description

mediaelementplayer.css

Media element styles.

mediaelementplayer-legacy.css

Legacy styles for the media element.

font-awesomemin.css

Styles for the font-awesome library.

mejs-controls.css

Styles for the mejs control elements.

fullcalendar.css

Styles for the calendar component.

querymCustomScrollbar.css

Styles for the custom scrollbar (SXA toolbox).

jquery-ui.css

Styles for the jquery UI components.

The Editing theme adds logic that is used to edit components in the Experience Editor.

The Editing theme includes the following scripts:

Script

Description

xamover.js

Drag and drop helpers. Provides methods that help to work with placeholders.

initializer.js

Initializes xamover functionality.

draganddrop.js

SXA drag and drop functionality,

gridlines.js

Visualization of grid columns.

toolbox.js

SXA toolbox logic.

treeview.js

Extends Sitecore.Treeview with a method that returns data context.

popupsGecko toolbox.js

Extends scBrowser for Gecko.

The Editing theme contains the following styles:

Style

Description

edit-here-hint.css

Fixes behavior for the edit-here-hint element.

sx82fonts.css

Exports open Sans fonts from Google.

toolbox.css

Styles for the SXA toolbox.

xamover.css

Styles for drag and drop functionality.

partialdesignhighlight.css

Highlight partial design placeholders.

The Editing Components base theme stores logic for components that have special behavior in editing mode.

The Editing Components theme includes the following scripts:

Script

Description

component-accordion-edit.js

Logic for the accordion component in editing mode.

component-tabs-edit.js

Logic for the tabs component in editing mode.

component-galleria-edit.js

Logic for the galleria component in editing mode.

component-overlay-edit.js

Logic for the overlay component in editing mode.

component-carousel-edit.js

Logic for the carousel component in editing mode.

component-flip-edit.js

Logic for the flip component in editing mode.

component-snippet-edit.js

Logic for the snippet component in editing mode.

The Resolve conflicts theme resolves conflicts when you open the Experience Editor within the Content Editor window.

The Resolve conflicts theme includes the following script:

  • Resolveconflicts.js - resolves conflict between JQuery and prototype.js.

The Components theme stores the js logic for all SXA components:

SXA-base-theme-component-scripts.PNG