What I used for this character sheet:
Latest version is built using Node.js and webpack. If you don`t know Node.js, you can make your own sheet in simple HTML, CSS and JS.
Version of this sheet without node.js can be found here. You are free to fork this repository, make pull requests and make new character sheets - of cause, those will be added to web site.
Extracting useful images from pdf
If you want to use cool images and backgrounds from other character sheets, that's easy:
yum install poppler-utils pdfimages ./some.pdf yum install ImageMagick convert *.ppm *.png
Contents of the project:
/srccontains source code and css of th project
/distcontains built and minified version of code (after you build it)
data- folder for json files which contain data for this sheet - for example, list of traits, attributes or skills. Also contains
mock.json- mock sheet data for testing.
img- self described folders.
custom- CSS files for this character sheet.
charlist.css- global css.
dots.css- css for displaying dots. Suddenly, yeah?
list2.css, etc - css, grouped by the number of the list.
print.css- special styles for printing - hide elements, make font smaller, etc.
images.js- used for handling images - uploading, removing.
jquery.barrating.js- JQuery bar rating, modified for printing.
index.js- combines all js above.
Of cause, for saving and loading your character sheet data you will need to publish your repository on Charsheet.su and use it's api - but you will be able to develop without it.
- Clone \ Fork this project
npm installto install all dependencies
npm run build-devto build JS and CSS
index.htmlbrowser (it will use mocked sheet data)
- Edit any HTML, JS and CSS from
- Please send me new versions :)
Please use ESLint with configuration in
Q: Why do you use images instead of backgrounds?
A: Because otherwise browsers don't allow to print background.