Hi Jesse,
My strong advice for converting sheets that are using tables (and honestly for most sheet conversion these days) would be to use CSS Grid. Grid makes it super easy to make reasonably responsive layouts using CSS and divs.
Here's a little bit of an example how you might use CSS Grid to refactor the AFMBE sheet:
If we take the following example of code:
<h3 class="sheet-center">Primary Attributes</h3>
<table class="sheet-center sheet-black">
<tr>
<td>Simple</td>
<td>Trait</td>
<td>Modifier</td>
</tr>
<tr>
<td><button type='roll' class="sheet-trait_roll" value="/e rolls Strength [[(@{base-Strength}*2) + @{mod-Strength} + 1d10]]">Strength</button></td>
<td><input type="number" class="sheet-trait" name="attr_base-Strength" value="0"/></td>
<td><input type="number" class="sheet-trait" name="attr_mod-Strength" value="0"/></td>
<td><button type='roll' class="sheet-trait_roll" value="/e rolls Strength [[@{base-Strength} + @{mod-Strength} + 1d10]]">Difficult</button></td>
</tr>
<tr>
<td><button type='roll' class="sheet-trait_roll" value="/e rolls Dexterity [[(@{base-Dexterity}*2) + @{mod-Dexterity} + 1d10]]">Dexterity</button></td>
<td><input type="number" class="sheet-trait" name="attr_base-Dexterity" value="0"/></td>
<td><input type="number" class="sheet-trait" name="attr_mod-Dexterity" value="0"/></td>
<td><button type='roll' class="sheet-trait_roll" value="/e rolls Dexterity [[@{base-Dexterity} + @{mod-Dexterity} + 1d10]]">Difficult</button></td>
</tr>
<tr>
<td><button type='roll' class="sheet-trait_roll" value="/e rolls Constitution [[(@{base-Constitution}*2) + @{mod-Constitution} + 1d10]]">Constitution</button></td>
<td><input type="number" class="sheet-trait" name="attr_base-Constitution" value="0"/></td>
<td><input type="number" class="sheet-trait" name="attr_mod-Constitution" value="0"/></td>
<td><button type='roll' class="sheet-trait_roll" value="/e rolls Constitution [[@{base-Constitution} + @{mod-Constitution} + 1d10]]">Difficult</button></td>
</tr>
<tr>
<td><button type='roll' class="sheet-trait_roll" value="/e rolls Intelligence [[(@{base-Intelligence}*2) + @{mod-Intelligence} + 1d10]]">Intelligence</button></td>
<td><input type="number" class="sheet-trait" name="attr_base-Intelligence" value="0"/></td>
<td><input type="number" class="sheet-trait" name="attr_mod-Intelligence" value="0"/></td>
<td><button type='roll' class="sheet-trait_roll" value="/e rolls Intelligence [[@{base-Intelligence} + @{mod-Intelligence} + 1d10]]">Difficult</button></td>
</tr>
<tr>
<td><button type='roll' class="sheet-trait_roll" value="/e rolls Perception [[(@{base-Perception}*2) + @{mod-Perception} + 1d10]]">Perception</button></td>
<td><input type="number" class="sheet-trait" name="attr_base-Perception" value="0"/></td>
<td><input type="number" class="sheet-trait" name="attr_mod-Perception" value="0"/></td>
<td><button type='roll' class="sheet-trait_roll" value="/e rolls Perception [[@{base-Perception} + @{mod-Perception} + 1d10]]">Difficult</button></td>
</tr>
<tr>
<td><button type='roll' class="sheet-trait_roll" value="/e rolls Willpower [[(@{base-Willpower}*2) + @{mod-Willpower} + 1d10]]">Willpower</button></td>
<td><input type="number" class="sheet-trait" name="attr_base-Willpower" value="0"/></td>
<td><input type="number" class="sheet-trait" name="attr_mod-Willpower" value="0"/></td>
<td><button type='roll' class="sheet-trait_roll" value="/e rolls Willpower [[@{base-Willpower} + @{mod-Willpower} + 1d10]]">Difficult</button></td>
</tr>
</table>
We can actually keep much of the existing code, albeit, replacing <table>, <tr>, and <td> tags with divs. A good tip with something like this, is to provide some classes at the same time, just to allow us to come back and style these at a later date if we want.
<h3 class="sheet-center">Primary Attributes</h3>
<div class="sheet-center sheet-black">
<div class="sheet-table__row">
<div class="sheet-table__cell">Simple</div>
<div class="sheet-table__cell">Trait</div>
<div class="sheet-table__cell">Modifier</div>
</div>
<div class="sheet-table__row">
<div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Strength [[(@{base-Strength}*2) + @{mod-Strength} + 1d10]]">Strength</button></div>
<div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_base-Strength" value="0"/></div>
<div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_mod-Strength" value="0"/></div>
<div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Strength [[@{base-Strength} + @{mod-Strength} + 1d10]]">Difficult</button></div>
</div>
<div class="sheet-table__row">
<div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Dexterity [[(@{base-Dexterity}*2) + @{mod-Dexterity} + 1d10]]">Dexterity</button></div>
<div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_base-Dexterity" value="0"/></div>
<div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_mod-Dexterity" value="0"/></div>
<div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Dexterity [[@{base-Dexterity} + @{mod-Dexterity} + 1d10]]">Difficult</button></div>
</div>
<div class="sheet-table__row">
<div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Constitution [[(@{base-Constitution}*2) + @{mod-Constitution} + 1d10]]">Constitution</button></div>
<div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_base-Constitution" value="0"/></div>
<div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_mod-Constitution" value="0"/></div>
<div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Constitution [[@{base-Constitution} + @{mod-Constitution} + 1d10]]">Difficult</button></div>
</div>
<div class="sheet-table__row">
<div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Intelligence [[(@{base-Intelligence}*2) + @{mod-Intelligence} + 1d10]]">Intelligence</button></div>
<div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_base-Intelligence" value="0"/></div>
<div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_mod-Intelligence" value="0"/></div>
<div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Intelligence [[@{base-Intelligence} + @{mod-Intelligence} + 1d10]]">Difficult</button></div>
</div>
<div class="sheet-table__row">
<div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Perception [[(@{base-Perception}*2) + @{mod-Perception} + 1d10]]">Perception</button></div>
<div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_base-Perception" value="0"/></div>
<div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_mod-Perception" value="0"/></div>
<div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Perception [[@{base-Perception} + @{mod-Perception} + 1d10]]">Difficult</button></div>
</div>
<div class="sheet-table__row">
<div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Willpower [[(@{base-Willpower}*2) + @{mod-Willpower} + 1d10]]">Willpower</button></div>
<div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_base-Willpower" value="0"/></div>
<div class="sheet-table__cell"><input type="number" class="sheet-trait" name="attr_mod-Willpower" value="0"/></div>
<div class="sheet-table__cell"><button type='roll' class="sheet-trait_roll" value="/e rolls Willpower [[@{base-Willpower} + @{mod-Willpower} + 1d10]]">Difficult</button></div>
</div>
</div>
If we put this into our sheet sandbox, we'll see that the divs are all positioned stacked on top of each other:
Obviously, this isn't what we want! So, the next thing to do is add some CSS styling to the row element, in order to get the fields back in order. This is where those classes we added earlier come in handy. We only need a very small amount of CSS here to get them back in line!
div.sheet-table__row {
display: grid; // This div's children should be displayed in a grid layout
grid-template-columns: 1fr .5fr .5fr 1fr; // This defines the column widths
}
Adding this to our sheet sandbox puts us back in better stead!
Side Note: The 'fr' unit in CSS is a really nifty feature. It's a fractional unit, which allows you to end up with very neat ratios. This article does a super good job of explaining it. But you could also use percentages, pixels, or any other kind of unit that suits your cause.
Hope this helps, and shows that it can be quite easy! Please check back in and let us know how you're doing and if you need any more assistance.