Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Import HTML CSS & Basic JS Character sheet (bootstrap)

I was wondering if anyone knew if I could build a character sheet using "Bootstrap Studio" and import it into Roll20.  It does use Bootstrap framework 5.2 so not sure if that is an issue.  Will it require adapting the bootstrap component's?  And what do i need to change?

October 06 (2 years ago)

Edited October 06 (2 years ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

You will likely run into many issues where it does not work. There are several pieces of the Roll20 sheet environment that do not work with generic html. Off the top of my headI'd assume that you'd run into issues with:

  • Repeating sections
    Repeating sections are coded as fieldset elements, but the roll20 environment hides the actual fieldset and displays a generated div that holds repeating items using the contents of the fieldset as a template for each item.
  • Roll templates
    The rolltemplate element does not exist in actual html, and all style rules used for the roll template have to be prepended with .sheet-rolltemplate-templatename. Additionally, all classes used in the css have to have sheet- prepended to them; e.g. .my-class becomes .sheet-my-class.
  • CSS Security violations
    Not sure if this will be a problem, but the css sanitizer for roll templates (which checks your entire css) will throw out all css for roll templates if it finds certain suspicious words/characters anywhere in your code, even if they're in the middle of another word, e.g. medieval causes CSS to be thrown out because it contains eval.
  • Numerous areas where you'd need to increase the specificity of the default bootstrap components to override default Roll20 styling.
  • You can't include the bootstrap framework using a CDN, so you'd need to put the entire CSS code for bootstrap in your sheet's code, which is going to bloat your code massively.

And, a personal note, but in my opinion the components that bootstrap has for creating a website are rarely what you want for a good looking character sheet. The form components may be mildly useful, but you are frequently going to want more styling options than bootstrap provides and anything outside of the form components is going to be much less useful. A very simple example of this is that a hero element has no place on a character sheet, which means that all of the css rules in bootstrap for hero elements are just useless code that will bloat your css file, and increase the load time of your sheet.

The layout utilities could be useful, but see the issues above and I personally think bootstrap is a little heavy to include just for the layout.