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)
(Subgrid mention)
Line 5: Line 5:
  
 
= Layout Types =
 
= Layout Types =
 
+
The four main approaches/frameworks that people use for designing layouts on Roll20 character sheets.
  
 
== CSS Grid ==
 
== CSS Grid ==
Line 13: Line 13:
 
'''[https://cssgridgarden.com/ CSS Grid Garden]''' is a great training game for learning about CSS Grid.
 
'''[https://cssgridgarden.com/ CSS Grid Garden]''' is a great training game for learning about CSS Grid.
  
[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas grid-template-areas] can be used for naming sheet sections and then easily display in a human-readable way how each section is positioned in the grid. The drawback is that you can't have sections that overlap with each-other using this.
 
  
 
<pre data-language="html">
 
<pre data-language="html">
Line 30: Line 29:
 
   grid-template-columns: 600px 300px;
 
   grid-template-columns: 600px 300px;
 
   grid-template-rows: 150px 150px 150px;
 
   grid-template-rows: 150px 150px 150px;
 +
}
 +
</pre>
 +
 +
[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas grid-template-areas] can be used for naming sheet sections and then easily display in a human-readable way how each section is positioned in the grid. The drawback is that you can't have sections that overlap with each-other using this.
 +
 +
===Subgrid===
 +
[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid Subgrid] is only available for [[Browser#Firefox|Firefox]], but when it's released for [[Browser#Chrome|Chrome]] sheet design will get more easy as you can use the main grid lines in children, making it easier to align sub-components with main components of the sheet.
 +
 +
You can implement subgrid in sheets, and then create a fallback design, in case the browser doesn't support CSS Subgrid.
 +
 +
<pre data-language="html">
 +
<div class="grid">
 +
  <div class="item">
 +
    <div class="subitem"></div>
 +
  </div>
 +
</div>
 +
</pre>   
 +
 +
<pre data-language="css">
 +
.grid {
 +
  display: grid;
 +
  grid-template-columns: repeat(9, 1fr);
 +
  grid-template-rows: repeat(4, minmax(100px, auto));
 +
}
 +
 +
.item {
 +
  display: grid;
 +
  grid-column: 2 / 7;
 +
  grid-row: 2 / 4;
 +
  grid-template-columns: subgrid;
 +
  grid-template-rows: repeat(3, 80px);
 +
}
 +
 +
.subitem {
 +
  grid-column: 3 / 6;
 +
  grid-row: 1 / 3;
 
}
 
}
 
</pre>
 
</pre>
Line 36: Line 71:
 
[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]
  
Flexbox is a good way to align elements in rows or columns that flex and wraps around to new rows depending on the elements. Better than using the old <code>float: right;</code> method of aligning things.
+
Flexbox is a good way to align elements in rows or columns that flex and wraps around to new rows depending on the elements. Better than using the old <code>float: right;</code> method of aligning things. Some [[Sheet Author|sheet authors]] use CSS Grid for bigger elements and gid-like sections of a sheet, while using Flexbox for smaller components in the sheet.
  
 
'''[https://flexboxfroggy.com/ Flexbox Froggy]''' is a great training game for learning about Flexbox.
 
'''[https://flexboxfroggy.com/ Flexbox Froggy]''' is a great training game for learning about Flexbox.
Line 84: Line 119:
 
[https://html.com/tables/ HTML table guide] - [https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables Tables - MDN Web docs]
 
[https://html.com/tables/ HTML table guide] - [https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables Tables - MDN Web docs]
 
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 in the Roll20 character sheet repository, but they shouldn't be used as templates for your own designs.
 
  
Article: [https://www.lifewire.com/dont-use-tables-for-layout-3468941 Why you shouldn't use HTML tabels for 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 in the Roll20 character sheet repository, but they where created before the rule was set in place. These older sheets shouldn't be used as templates for your own designs.
 +
 
 +
* Article: [https://www.lifewire.com/dont-use-tables-for-layout-3468941 Why you shouldn't use HTML tabels for layout]
  
 
=Pages =
 
=Pages =
Line 110: Line 146:
 
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]
+
* {{repo|Roll20/roll20-character-sheets/tree/master/kitchensink Roll20's character sheet template}}
* [https://github.com/clevett/SheetTemplate Cassie's sheet template] - A character sheet skeleton, not recommended for beginners as it uses PUG & SCSS  
+
* {{repo|clevett/SheetTemplate Cassie's sheet template}} - A character sheet skeleton, not recommended for beginners as it uses PUG & SCSS, by [[Cassie]]
* [https://github.com/Anduh/Roll20-grid-template Anduh's sheet template] - Simple character sheet skeleton, using CSS Grid for layout
+
* {{repo|Anduh/Roll20-grid-template Anduh's sheet template}} - Simple character sheet skeleton, using CSS Grid for layout, by [[Anduh]]
* [https://github.com/joesinghaus/Blades-template Sheet template based on Blades in the Dark] by Jakob
+
* {{repo|joesinghaus/Blades-template Sheet template based on Blades in the Dark}} by [[Jakob]]
  
 
= See Also =
 
= See Also =
 
* '''[[Building Character Sheets]]''' – main article
 
* '''[[Building Character Sheets]]''' – main article
 +
**
 
** [[CSS Wizardry]] - List of Tips & Tricks on how to create a variety of effects on your character sheet
 
** [[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
 
** [[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
+
** [[Creating Roll Templates]] - 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"]]'''
 
** '''[[:Category:Character Sheet Creation|List of all pages related to "Character Sheet Creation"]]'''

Revision as of 11:42, 1 April 2021

Character Sheet Creation
Getting Started


Reference


Tools


Git/GitHub GitHubLogo.png


Other

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

The four main approaches/frameworks that people use for designing layouts on Roll20 character sheets.

CSS Grid

CSS Grid guide Many newer character sheet use CSS Grid for their layout, and is the recommended method doing the general layout of sections on a sheet. Aligning things in grid, columns is great, and you can create grids inside other grids.

CSS Grid Garden is a great training game for learning about CSS Grid.


<div class="grid-section">
  <span>1st span</span>
  <span>2nd</span>
  <span>3rd</span>
  <span>4th, stuff</span>
  <span>5th, other</span>
  <span>6th</span>
</div>
.sheet-grid-section{
  display: grid;
  grid-template-columns: 600px 300px;
  grid-template-rows: 150px 150px 150px;
}

grid-template-areas can be used for naming sheet sections and then easily display in a human-readable way how each section is positioned in the grid. The drawback is that you can't have sections that overlap with each-other using this.

Subgrid

Subgrid is only available for Firefox, but when it's released for Chrome sheet design will get more easy as you can use the main grid lines in children, making it easier to align sub-components with main components of the sheet.

You can implement subgrid in sheets, and then create a fallback design, in case the browser doesn't support CSS Subgrid.

<div class="grid">
  <div class="item">
    <div class="subitem"></div>
  </div>
</div>
.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(3, 80px);
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

CSS Flexbox

CSS Flexbox guide

Flexbox is a good way to align elements in rows or columns that flex and wraps around to new rows depending on the elements. Better than using the old float: right; method of aligning things. Some sheet authors use CSS Grid for bigger elements and gid-like sections of a sheet, while using Flexbox for smaller components in the sheet.

Flexbox Froggy is a great training game for learning about Flexbox.

<div class="flex-section">
  <span>1st</span>
  <span>2nd</span>
  <span>3rd</span>
  <span>4th</span>
  <span>5th</span>
  <span>6th</span>
</div>
.sheet-flex-section{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

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>

HTML Table

HTML table guide - Tables - MDN Web docs 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 in the Roll20 character sheet repository, but they where created before the rule was set in place. These older sheets shouldn't be used as templates for your own designs.

Pages

sheet with multiple pages/tabs

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.

See Also