In addition to the
zuix-web-starer base options, the following options are available.
Front matter data
a simple splash screen used for the main page (
./source/index.liquid) and that redirects to the home page (
a page with a responsive navigation drawer layout, like the one used by this very page.
use Material Design Light styles.
include Prims code highlighter.
open external links in a new window
do not include page title
do not include common footer
mdl style, also the
theme variable can be added to the front matter for specifying the material theme to be used (e.g.
Icon associated to the page. This icon is currently shown next to the page name in the side drawer's menu of the
A 256x256 preview image to be used in cards list, like the ones used in the home page.
web-app template is a component based application that takes advantages of zuix.js library, a very versatile and fast library for creating components.
The following components are used:
- Side Drawer with adaptive layout, that works both on mobile and desktop devices, supporting touch gestures
- Auto-hiding header, to allow a full immersive experience while reading pages on small screens
- Menu overlay, that can be used to quickly navigate within a page content, and that auto hides when the page is scrolled
- Scroll helper, used in some of the above components to handle page scroll events, and that can eventually
be used to "watch" elements position and trigger events as they become visible on screen
- Gesture detector, used in various components to detect gestures
- Material Design buttons, menu and cards, that can be also rendered using liquid tags
Files structure in brief
Template engine folders:
./source/_data # data folder ./source/_filters # filters ./source/_inc # includes and layouts ./templates/tags/ # user-defined components liquid tags
zuix.js components folders:
./source/app # user-defined components
Global asset files and folders:
./source/css ./source/images ./source/js ./browserconfig.xml ./favico.ico ./humans.txt ./manifest.json
Site search index and SEO:
./source/search-index.json.njk # search-index builder script ./source/robots.njk ./source/sitemap.njk # sitemap generator script
./source/home.liquid # home page ./source/index.liquid # landing page