The K-Scaffold Framework

PUG, HTML, and Javascript

What is it?

Building character sheets is difficult. There's thousands of lines of html, CSS, and Javascript to write and keep track of. The sheet author community has switched to using PUG to write the majority of html code because it simplifies the HTML coding part of creating a sheet. PUG allows us to do many powerful things, including creating reusable bits of code for things that we need frequently.

The K-Scaffold provides a comprehensive library of PUG mixins for frequently used generic HTML constructions. It also provides a powerful link between your PUG code and the javascript sheetworkers that will power your sheet by allowing you to link attributes to functions directly in the PUG that creates them.

Getting Started

To get started with the K-scaffold, follow the steps below

  1. Download the most recent version of the scaffold from the releases page.
  2. Copy the `scaffold` directory into the same directory as your main pug file.
  3. Add
    include scaffold/_kpug.pug
    to the top of your primary PUG file.
  4. Start coding!

Using the Scaffold

The K-scaffold has two primary components; PUG mixins and functions, and Javascript functions.

K-Scaffold PUG

To use the K-scaffold to write the html of your sheet, you will write normal PUG, but using a comprehensive library of components that are frequently used on character sheets. These range from simple mixin versions of standard html elements inputs, textareas, and selects to more complex constructions that generate Roll20 elements or workarounds for limitations of Roll20 character sheets. See the K-scaffold PUG documentation for full details on the mixins and functions available.

K-Scaffold Javascript

To use the K-scaffold to write your sheetworkers, you will write normal sheetworkers, but using a library of utility functions and sheetworker aliases supercharge the standard sheetworkers. See the K-scaffold Javascript documentation for full details on the functions and variables available.