SiteGUI is an open platform where templates can be created by anyone and sold to other users through SiteGUI Appstore. To make it easier for template designers, SiteGUI utilizes Bootstrap - a popular design framework as the base design system, Bootstrap can be customized in many different ways, the only limitation is the designers' imagination.
SiteGUI includes several default templates which can be used as the base for your customization. The source of those templates are available on Github at https://github.com/SiteGUI-platform/sitegui-templates. Feel free to download them and customize to fit your site. Once the customization has been completed, you can upload your template to your site's template folder and set your site to use the new template.
├── layouts
| ├── default.tpl
| └── blank.tpl
├── header.tpl
├── footer.tpl
├── page.tpl
├── page_collection.tpl
├── product.tpl
├── product_collection.tpl
├── app_page.tpl
├── app_collection.tpl
├── blog_page.tpl
├── blog_collection.tpl
├── mails
| ├── base.tpl
| ├── fr
| | └── base.tpl
| └── es
| └── base.tpl
├── assets
| ├── js
| └── css
| | └── style.css
| └── img
| └── logo.png
| └── favicon.png
├── lang
| ├── en.json
| └── vi.json
└── snippets
├── index.html
├── index.json
└── pricing_table.html
A SiteGUI template provides common style and sections for the whole website using layout. A layout contains a set of blocks/sections such as header (logo, menu), content area, footer arranged in a beautiful and efficient layout inspired by the template designer's design philosophy. With SiteGUI, a page can use a specific layout available in the layout folder, if no layout is chosen, the default one (layouts/default.tpl) is used. Besides the default layout, another layout named blank is often used to display content without the page header and footer.
As a layout focuses more on the structure of a page, it should contain mostly BlockHolders to help moving them around easier using SiteGUI Layout editor. We can provide content (HTML/CSS) for those BlockHolders staticly through header.tpl and footer.tpl or dynamically through ViewBlocks defined in each app. Please note that using header.tpl/footer.tpl is not mandatory, HTML can be present in the layout file by wrapping around BlockHolders or being placed inside BlockHolders but the advantage of using header.tpl/footer.tpl is that they can provide content for different layout files, making designing a new layout a lot easier.
SiteGUI is a powerful CMS, it can be used for different types of web pages. A website may contain general information web pages, product pages or blogs, they are all different types of content. While they can share the same common header and footer, the content area of a product page and a blog page should be displayed differently. Each type of content have their own template files, a page of type Page uses page.tpl to render its content and page_collection.tpl to render its collections while a page of type Product uses product.tpl and product_collection.tpl respectively. That goes the same for other types of content such as Blog or other Apps developed by App Developers, they will have their own template files (blog_page.tpl or app_page.tpl) to render their content and may opt to use their own layout or a common layout shared with other types of content.
Static files such as images, CSS and Javascript file should be kept in their own folder under the assets folder. They can be accessible via CDN.
Email templates can be customized to override the default email templates. The email template files must be named exactly like the default ones.
Different language files can be stored in lang folder to provide translation for the website and frontend. The language file should be named using ISO 639-1 code for the language i.e: en for English and contains a JSON document where attributes are English texts and values are translated equivalents. The English language file (en.json) is not required to provide English language if English is already used inside the application and template.
Although not required, snippet is a great feature of SiteGUI that allows template designers to provide pre-made content such as pricing table, portfolios, image gallery etc. SiteGUI users purchasing the template will be able to add those snippets to any page on their website using SiteGUI editor's drag 'n drop feature. Template designers are recommended to provide beautifully designed snippets as that is one of the best selling points for their template. Learn more how to make snippets for your template here.