A SiteGUI template should accommodate many different types of website, by providing pre-made snippets it will offer a great flexibility for template users to build their websites using the SiteGUI Visual Editor. Snippets are stored in the snippets folder, each snippet should be a .html file. Snippets of the active template are loaded automatically by the Visual Editor and can be dragged and dropped by users to create page content.

Snippets are categorized and listed using json format in index.json file. Each category has a name, an icon (using icon font in HTML syntax) and an array containing snippets for that category. There is a special property named smarty, which is used to indicate whether Smarty syntax support is required. Currently only SiteGUI Layout Editor supports Smarty syntax, thus the category will be visible for SiteGUI Layout Editor while it will be hidden for SiteGUI Visual Editor.

Each snippet has an id which is also its file name (without the ending .html), a display name and an icon in HTML syntax. Like category, snippet requiring Smarty syntax support should have 'smarty' property set to 1.

SiteGUI templates are Bootstrap based which means Bootstrap resources files (bootstrap.min.css, bootstrap.bundle.min.js) are already loaded into SiteGUI editors. If your snippets rely on other CSS or Javascript files, they should be added to index.html file so that the resources can be loaded by SiteGUI editors to style your snippets properly. They also need to be added to the header.tpl file so they can be loaded for every pages using the template and snippets. 

The following resource file contains a different Bootstrap style, this template will override the default Bootstrap style.