HTML Breakdown

Default Classes

 flexrow - lays everything out in a row
 flexcolumn - lays everything out in a column
 flex - stretches to fill a flexrow or flexcolumn
 flex2 - "
 flex3 - "
 flexmiddle - places all elements as close to the center as possible
 flexaround - spaces out all elements around the center
 flexbetween - spaces out all elements as far away from one another
 flexwrap - allows elements to drop wrap around if too large

 scroll-y - allows vertical scroll bars
 scroll-x - allows horizontal scroll bars
 scroll-xy - allows both scroll bars

 hover - green highlight
 hover2 - red highlight
 hover3 - orange highlight

 highlight - deep red highlight

 lightoutline
 outline 
 hardoutline
 smooth
 rounded
 round 

 spadding
 padding
 lpadding

 smargin
 margin
 lmargin

Custom Global Attributes

Cond

You can use macros to conditionally display any element.

cond='Macro'

Inputs

 <input target='[path to target]' mod='[Modifier to Edit]' value='[Override the Value]'>

Selects

 <select target='[path to target]'>
  <option value='[optional]'>Option Title</option>
 </select>

Checkboxes

 <input type='checkbox' target='[path to target]' check='[Save Value]' unCheck='[Value When unchecked]' isChecked='[Macro to check if checked]'>

Custom Elements

Banks

 <bank target='[path to target]' ignore='[dual,pool,...]'>

A Bank is a way of storing "Key'd" values. What this means is that you can store things like skills with an abbreviation such as "dual" for "Dual Wielding", then reference it with "@c.skills.dual"

Banks are the equivalent of Objects in Javascript.

Example

<bank target='info' ignore="name,img,notes,aptitudes,conditions">
  <div class='flexrow flexbetween'>
    <b> eval{@%path%.name} </b>
    <input class='line lrmargin middle' target='info.%index%'></input>
  </div>
</bank>

Lists

 <list target='[path to target]'>

Loops

 <loop count='[number of times]'>

Click Commands

 <click>
  <change>
  <chat>
  <create>
  <delete>
  <display>
  <effect>
  <setAttr>
  <popout>
  <prompt>
 </click>

You can make any dom element clickable by adding a child 'click' element to it.

 <button>
  Click Me!
  <click>
   <chat text="Haha, you've clicked me!">
  </click>
 </button>

In the example above a chat message would be printed with the text "Haha, you've clicked me!"

change

To change an element in a bank or list, use the 'change' element

<span class='glyphicon glyphicon-edit link'>
  <click>
    <change target="inventory.%index%"></change>
  </click>
</span>

chat

  <button>
    Chat Message
    <click>
      <chat text='[Text goes Here]' flavor='[Flavor Text]' roll='[Roll Equation Here]' />
    </click>
  </button>

var

allows you to define variables that can be referenced by macros within the context of the click command

  <button>
    Chat Message
    <click>
      <chat text='[Text goes Here]' flavor='[Flavor Text]' roll='[Roll Equation Here]'>
        <var myvariable='@Strength * @Dexterity' mysecondvariable='@Dexterity/@Strength'/>
      </chat>
    </click>
  </button>

You can reference these variables in later context with '@myvariable' or '@mysecondvariable'

save

You can save variables to the "click" context, meaning you can use

  <button>
    Chat Message
    <click>
      <chat text='[Text goes Here]' flavor='[Flavor Text]' roll='[Roll Equation Here]'>
        <save savedDiceRoll='@total'/>
      </chat>
      <chat text='Last roll @savedDiceRoll'/>
    </click>
  </button> 

This is very useful for saving the results of dice rolls, from '<chat>' to '<chat>' rolls, and lets you make decisions based on the result of a previous roll

create

Create an element into either a bank or list using the 'create' element and specifying the type. It isn't case sensitive

<b class='create link'>
  Add
  <click>
    <create type='ITEM' target="inventory"/>
  </click>
</b>

delete

<span class='glyphicon glyphicon-trash link destroy'>
  <click>
    <delete target="inventory.%index%"></delete>
  </click>
</span>

effect

Effects are effects that are 'Applied' to things you have targeted. This means if you target something on the board, you could do things like damage or heal that target using an effect element. They are identical to 'setAttr' elements (see below)

  <button>
    Apply Damage
    <click>
      <effect target='counters.health' eq='@health - 3' cond='@type=="Zombie"'/>
    </click>
  </button>

setAttr

This allows you to make changes to your data, and lets you make interactive stuff like heal or damage buttons built into the sheet directly

   <button>
    Heal Damage
    <click>
      <setAttr target='counters.health' value='@health + 3' cond='@type=="Human"'/>
    </click>
  </button>

popout

If you want to make a popout window, you can do so using the popout element

   <button>
    Popout
    <click>
     <popout width='auto' height='400px' title='new Popout (Change Name)' align='top left'>
      <input target='info.name'/>
     </popout>
    </click>
  </button>

prompt

Prompts are a unique case when you want to use the data a user inputs into the prompt. This is only really used for allowing the user to enter data that can be used in combination with the 'chat' element

   <button>
    Int Test
    <click>
      <prompt>
        <b>Modifier</b>
        <var threshold="@Int"/>
        <userinput class='middle' varname="modifier" value='0'/>
      </prompt>
      <chat roll="d100 - @modifier" flavor='Intelligence' roll-ui='ui_statTest'/>
    </click>
  </button>

var

allows you to define variables that can be referenced by macros within the context of the click command. Unlike normal "var" fields, these ones are saved for future use in the 'click' context.

 <var myvariable='@Strength * @Dexterity' mysecondvariable='@Dexterity/@Strength'/>

You can reference these variables in later context with '@myvariable' or '@mysecondvariable'

In-line Evaluation/Data lookup

Sometimes you just want to display attributes directly from your actors/elements

traverse{}

If you want to inject saved HTML that exists on your actor/element, use

traverse{info.notes.current}

to navigate to the attribute data directly.

Note : This is much faster than using 'eval' and it won't evaluate it as a macro, meaning any 'in-line' dice rolling will not be changed!

eval{}

If you want to evaluate a macro, you can simply wrap the macro in

eval{<macro here>}

This can be used throughout the HTML sheet. If you are working with an actor, reference using long paths '@c.info.name' and with an element (previously know as items) with '@i.info.name'.