Page Updated:   2022-02-21

This is related to Editing(coding) Character Sheets, which require Pro info to be able to use. Main Page: Building Character Sheets

Main Page: Sheet Author Tips#Frameworks

PUG is a template engine for generating HTML, where you can use various features & tool to write code more efficiently, such as using variables and loops, and has a simpler syntax.

//- Comment that only appears in PUG
- var pages = ["character", "skills", "inventory", "magic", "familiar", "background", "campaign", "vehicle", "settings"];
div
  span Page selection
  select(name="attr_sheetTab")
    each tab in pages
      option(value=`${tab}`)= tab[0].toUpperCase() + tab.slice(1)

Result HTML:

<div>
     <span>Page selection</span><select name="attr_sheetTab">
        <option value="character">Character</option>
        <option value="skills">Skills</option>
        <option value="inventory">Inventory</option>
        <option value="magic">Magic</option>
        <option value="familiar">Familiar</option>
        <option value="background">Background</option>
        <option value="campaign">Campaign</option>
        <option value="vehicle">Vehicle</option>
        <option value="settings">Settings</option>
    </select>
</div>

PUGjs.org

• PUG - Getting Started
• PUG -> HTML online converter
• codingshala PUG tutorial
• A Sheet Author's Journey(Part 2) - Do the PUG!^(Forum) Feb 2022

Examples, Sheets, & Sheet template made with PUG:

• Example snippets of SCSS & PUG, by Andreas J.
• The K-Scaffold - by Scott C.
• SheetTemplate by Cassie
• Aureyia's Roll20 Sheet Boilerplate - Uses PUG, Stylus(CSS) & Gulp
• Stargate RPG active sheet using some PUG & SCSS, by Andreas J.
• Genefunk 2090 sheet createed with PUG, by Scott C.
• there are several sheets in the sheet repository made using either or both, you can search through it to find more examples

See Also

• SASS
• Sheet Author's Journey
• Sheet Development: Examples, Templates & Pattern Libraries