ICAEW.com works better with JavaScript enabled.
Your current browser is not capable of using this site without JavaScript. Please use an updated browser or enable JavaScript to continue.

Grunt-stencil templating

What is Stencil?

Stencil is a Grunt plugin for templating that generates static HTML files from given components. Stencil provides the following:

  • A way to modularise your HTML source files: each file can include an arbitrary number of partial files, or be wrapped with a template file.
  • Built in support for the doT.js templating language, which allows passing of arbitrary variables to your HTML files.
  • Built in support for markdown
  • Meta data headers in the beginning of each file to specify variables that should be used in the file (that are accessible from partials included in the file, and templates the file is injected into).

App-tb2 contains src html files which are setup as Stencil templates, this allows partials to be compiled into a single output html, in other words any constants throughout your site can be stored in a single html file such as the header and navigation which is simply imported.

default.dot.html

The skeleton html, contains the doctype and html tags

partials.dot.html

Partials are called in by default.dot.html and construct all html other than the main. App components are also stored within partials which contain optional breadcrumbs and a progess tracker.

pages.dot.html

Pages are unique elements for varying page content, this is simply a main tag which will nest within default.dot.html, pages are compiled into production.