While preparing a front-end web development lesson on PrePros, I decided to check out Pug, the template engine. I typically only showcase SASS for an intro-level lesson on how to setup a local dev environment and workflow using a GUI-based build tool, but this year I wanted to go further and demo a markup-related build tool as well.

In previous years, in a totally separate lesson offered later in the semester, I introduced the concept of templating using CodeKit’s Kit files because PrePros supports .kit files right out of the box and is specifically designed to extend HTML by adding two key new features: variables and imports. This is well suited for my students, who are primarily visual graphic designers & UX/UI web designers learning front-end web development and are more inclined to use a GUI app rather han a CLI workflow. It also works well because it matches two features that I highlight when introducing SASS: variables and partials.

This year, however, I wanted to use a templating language that is more flexible and scalable (e.g. capable of being compiled in both a GUI and CLI-based workflow and build environment, such as Gulp). With this in mind, I initially considered Markdown, HAML, and Slim, but ultimately ended up going with Pug for the its ease in implementing variables and includes.