PUGjs
From Roll20 Wiki
(Redirected from Pugjs)
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 |
Character Sheet Development
Getting Started
- Using Custom Sheets
- Building Sheets
(Main Page) - Glossary
- Code Restrictions
- Best Practice
- Common Mistakes
- Tutorials
- Examples, Templates
- Pattern Libraries
- HTML & storing data
- CSS & Styling
General
- Updates & Changelog
- Known Bugs
- Character Sheet Enhancement(CSE)
- Custom Roll Parsing
- Legacy Sheet(LCS)
- (upcoming) Beacon SDK
Reference
- Buttons
- Repeating Sections
- Sheetworkers
- Roll Templates
- sheet.json
- Translation
- Auto-Calc
- Advanced
- All SheetDev Pages
Tools & Tips
Other
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>
- 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.
- 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