Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

Difference between revisions of "Designing Character Sheet Layout"

From Roll20 Wiki

Jump to: navigation, search
m (HTML Table)
m (Add section for "Tabs", linking to the CSS Wizardry-article)
Line 39: Line 39:
  
 
Article: [https://www.lifewire.com/dont-use-tables-for-layout-3468941 Why you shouldn't use HTML tabels for layout]
 
Article: [https://www.lifewire.com/dont-use-tables-for-layout-3468941 Why you shouldn't use HTML tabels for layout]
 +
 +
== Tabs/Pages ==
 +
[[CSS_Wizardry#Tabs|Tabs]]
 +
 +
There are two examples on how to implement multiple tabs/pages for character sheet, found in the [[CSS_Wizardry#Tabs|Tabs]]-section of the CSS Wizardy-article. This useful when trying to mimic the paper-version of the sheet of then a character sheet starts to become too long.
 +
 +
The section above also show how you can hide areas with checkboxes, useful for temporally hiding/expanding some section for displaying more info.
  
 
== Sheet Templates ==
 
== Sheet Templates ==
 
There exist a couple of character sheet templates that are intended as a starting point for character sheet creations.
 
There exist a couple of character sheet templates that are intended as a starting point for character sheet creations.
  
* [https://github.com/Roll20/roll20-character-sheets/tree/master/kitchensink Roll20's character sheet] template
+
* [https://github.com/Roll20/roll20-character-sheets/tree/master/kitchensink Roll20's character sheet template]
* [https://github.com/clevett/SheetTemplate Cassie's sheet template] - Uses PUG/SCSS so not recommended for beginners
+
* [https://github.com/clevett/SheetTemplate Cassie's sheet template] - A character sheet skeleton, not recommended for beginners as it uses PUG & SCSS
* [https://github.com/Anduh/Roll20-grid-template Anduh's sheet template] - uses CSS Grid  
+
* [https://github.com/Anduh/Roll20-grid-template Anduh's sheet template] - Simple character sheet skeleton, using CSS Grid for layout
 
* [https://github.com/joesinghaus/Blades-template Sheet template based on Blades in the Dark] by Jakob
 
* [https://github.com/joesinghaus/Blades-template Sheet template based on Blades in the Dark] by Jakob
  

Revision as of 10:05, 4 April 2020

Main Article: Building Character Sheets

This is a general guide to different approaches/methods you can use to create the general layout of your custom character sheets.

Contents

Layout Types

Roll20 columns/rows

Good for basic layouts, but if you aim for a more complex layout/design, CSS Grid and CSS Flexbox is recommended.

Roll20 provides a few basic classes you can use to organize things into a simple column-based layout. To use them, just create a div with a class of '3colrow', '2colrow', or 'row'. Then inside of that div, create a div for each column with a class of 'col'. For example, to create a 3-column layout, you would could:

<div class='3colrow'>
  <div class='col'>
    <!-- Put the content for the first column here -->
  </div>

  <div class='col'>
    <!-- Second column -->
  </div>

  <div class='col'>
    <!-- Third column -->
  </div>
</div>

CSS Grid

CSS Grid guide Many newer character sheet use CSS Grid for their layout, and is recommended as a

CSS Flexbox

CSS Flexbox guide

HTML Table

HTML table guide Many older sheet use HTML tables for layout, but it's harder to customize and adjust to looks of it compared to other methods, so it's generally not seen as a good idea for sheet layout. Roll20 don't accept new sheet submissions that rely on HTML tables for design, so this option shouldn't be used if you want your sheet published. Old sheet using tables do exist int the Roll20 character sheet repository, but they shouldn't be used as templates for your own designs.

Article: Why you shouldn't use HTML tabels for layout

Tabs/Pages

Tabs

There are two examples on how to implement multiple tabs/pages for character sheet, found in the Tabs-section of the CSS Wizardy-article. This useful when trying to mimic the paper-version of the sheet of then a character sheet starts to become too long.

The section above also show how you can hide areas with checkboxes, useful for temporally hiding/expanding some section for displaying more info.

Sheet Templates

There exist a couple of character sheet templates that are intended as a starting point for character sheet creations.

See Also