Difference between revisions of "Designing Character Sheet Layout"
From Roll20 Wiki
Andreas J. (Talk | contribs) m (→Sheet Templates) |
Andreas J. (Talk | contribs) m (→See Also) |
||
| (5 intermediate revisions by one user not shown) | |||
| Line 3: | Line 3: | ||
This is a general guide to different approaches/methods you can use to create the general layout of your custom character sheets. | This is a general guide to different approaches/methods you can use to create the general layout of your custom character sheets. | ||
| − | + | = 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. | Good for basic layouts, but if you aim for a more complex layout/design, CSS Grid and CSS Flexbox is recommended. | ||
| Line 12: | Line 12: | ||
<pre data-language="html"> | <pre data-language="html"> | ||
<div class='3colrow'> | <div class='3colrow'> | ||
| − | <div class='col'> | + | <div class='col'> |
| − | <!-- Put the content for the first column here --> | + | <!-- Put the content for the first column here --> |
| − | </div> | + | </div> |
| − | <div class='col'> | + | |
| − | <!-- Second column --> | + | <div class='col'> |
| − | </div> | + | <!-- Second column --> |
| − | <div class='col'> | + | </div> |
| − | <!-- Third column --> | + | |
| − | </div> | + | <div class='col'> |
| + | <!-- Third column --> | ||
| + | </div> | ||
</div> | </div> | ||
</pre> | </pre> | ||
| − | + | == CSS Grid == | |
| − | + | ||
[https://css-tricks.com/snippets/css/complete-guide-grid/ CSS Grid guide] | [https://css-tricks.com/snippets/css/complete-guide-grid/ CSS Grid guide] | ||
Many newer character sheet use CSS Grid for their layout, and is recommended as a | Many newer character sheet use CSS Grid for their layout, and is recommended as a | ||
| − | + | == CSS Flexbox == | |
[https://css-tricks.com/snippets/css/a-guide-to-flexbox/ CSS Flexbox guide] | [https://css-tricks.com/snippets/css/a-guide-to-flexbox/ CSS Flexbox guide] | ||
| − | + | == HTML Table == | |
[https://html.com/tables/ HTML table guide] | [https://html.com/tables/ 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. | 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. | 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. | ||
| − | == Sheet Templates | + | Article: [https://www.lifewire.com/dont-use-tables-for-layout-3468941 Why you shouldn't use HTML tabels for layout] |
| + | |||
| + | =Pages = | ||
| + | ''Example:'' '''[[CSS_Wizardry#Tabs|Tabs]]''' | ||
| + | |||
| + | When trying to mimic the paper-version of the sheet, or the sheet starts to become too long, it's a good idea to split up content into separate tabs/pages, see [[CSS_Wizardry#Tabs|Tabs]]. | ||
| + | |||
| + | The section above also show how you can hide areas with checkboxes, useful for temporally hiding/expanding some section for displaying more info. | ||
| + | |||
| + | =Images= | ||
| + | ''Main Article:'' '''[[Image use in character sheets]] ''' | ||
| + | |||
| + | You'll likely want to use images to improve the looks of a sheet, and there are a few example of how to do so, like displaying a logo or having a nice background. | ||
| + | |||
| + | = 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 | + | * [https://github.com/Roll20/roll20-character-sheets/tree/master/kitchensink Roll20's character sheet template] |
| − | * [https://github.com/clevett/SheetTemplate Cassie's sheet template] - | + | * [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] - | + | * [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 | ||
| − | + | = See Also = | |
| − | * [[CSS Wizardry]] | + | * [[CSS Wizardry]] - List of Tips & Tricks on how to create a variety of effects on your character sheet |
| − | * [[Roll Templates|Roll Template Creation]] | + | * [[Image use in character sheets]] - How to include images on your character sheets |
| − | + | * [[Roll Templates|Roll Template Creation]] - How to design Roll templates, and info on how the default rolltemplate works | |
* [[Building_Character_Sheets#Best_Practices | Sheet Design Best Practices]] | * [[Building_Character_Sheets#Best_Practices | Sheet Design Best Practices]] | ||
| + | * '''[[:Category:Character Sheet Creation|List of all pages related to "Character Sheet Creation"]]''' | ||
| + | * [https://github.com/Roll20/roll20-character-sheets Roll20 GitHub repository] | ||
| + | |||
<br> | <br> | ||
[[Category:Character Sheet Creation]] | [[Category:Character Sheet Creation]] | ||
Revision as of 12:32, 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
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
Pages
Example: Tabs
When trying to mimic the paper-version of the sheet, or the sheet starts to become too long, it's a good idea to split up content into separate tabs/pages, see Tabs.
The section above also show how you can hide areas with checkboxes, useful for temporally hiding/expanding some section for displaying more info.
Images
Main Article: Image use in character sheets
You'll likely want to use images to improve the looks of a sheet, and there are a few example of how to do so, like displaying a logo or having a nice background.
Sheet Templates
There exist a couple of character sheet templates that are intended as a starting point for character sheet creations.
- Roll20's character sheet template
- Cassie's sheet template - A character sheet skeleton, not recommended for beginners as it uses PUG & SCSS
- Anduh's sheet template - Simple character sheet skeleton, using CSS Grid for layout
- Sheet template based on Blades in the Dark by Jakob
See Also
- CSS Wizardry - List of Tips & Tricks on how to create a variety of effects on your character sheet
- Image use in character sheets - How to include images on your character sheets
- Roll Template Creation - How to design Roll templates, and info on how the default rolltemplate works
- Sheet Design Best Practices
- List of all pages related to "Character Sheet Creation"
- Roll20 GitHub repository
