The web site of wyrmbabies

Personally speaking, I have a few different projects with their own casts of characters. I have a blog where I have all my characters in one character page, but I also have character pages for the projects themselves..! The card template that I use on my main oc blog is different to the one that I use for the projects themselves, since the context has changed...

So, my intent with releasing this code is not to lock you into a specific template design that likely doesn't suit your own projects, but instead to give you a framework you can use to build your own unique cards!

However! If you're not comfortable writing HTML and CSS, you may not know where to start or how to do that, so below are some templates you're free to use and edit as needed. I recommend the MDN intro to web development, and w3schools for picking up HTML & CSS!

Basic Template

A super simple template with no real styling to it, just the basic structure.

HTML

    <div class="grid-item inactive ${data[i].Filters}">
       <div class="card-container">
          <div class="name"> ${data[i].Name} </div>
          <img class="portrait click-me" src="${data[i].Portrait}">
          <div class="tagline">${data[i].Tagline}<br></div>
       </div>
       <div class="dropdown">
       ${data[i].Description}
       </div>
    </div>

CSS

    /* ------------------------ Character Cards ------------------------ */
    .grid {
        margin: 40px 0 100px 340px;
        min-height: 800px;
        height:100vh;
        text-align: justify;
        line-height: 100%;
    }
    
    .grid-item, .grid-sizer {
        width: 250px;
        margin: 5px;
        position: relative;
    }
    
    .click-me:hover {opacity:0.9}
    .click-me:active {filter:brightness(1.3);}
    .click-me {transition:all 0.3s}
    
    .grid-item.inactive .dropdown {display:none;}
    
    .card-container {
      background: #fff;
      border-radius: 15px;
    }
    .portrait {
      width: 100%;
    }
    .name {
      font-size: 2em;
      padding: 15px;
      text-align: center;
    }
    .tagline {
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 15px;
    }
    
    .dropdown {
      background: #fff;
      z-index: 2;
      position: absolute;
      padding: 15px;
      width: calc(100% - 30px);
      box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.2);
      margin-top: 5px;
      border-radius: 5px;
    }

View Sample Spreadsheet

Spreadsheet notes: You'll notice that after most of the portrait urls is appended " style="filter: hue-rotate(##deg");, all this is doing is applying a css filter to the same image to make it different colours, so that I didn't need to make more... LOL.

You can just ignore it, but it does also show you one of many ways you can use the spreadsheet to control not only the contents but also the styling of the cards!

RPG Template

Live example

A more advanced template that shows how you can use spreadsheet formulae to control the content of the template. The stats and inventory are dynamically generated in the spreadsheet!

HTML

      <div class="grid-item inactive ${data[i].Filters}">
         <div class="card-container click-me">
            <div class="stats-section">
              <header>
                <div><img class="portrait" src='${data[i].Portrait}'></div>
                <div class="name"> ${data[i].Name} </div>
              </header>
              <section>
                ${data[i].Stats}
            </section>
            <div class="tagline">${data[i].Tagline}<br></div>
         </div>
         <div class="dropdown">
           <div class="inventory show-hide-container display-one">
           <h2>Items</h2>
             ${data[i].Inventory}
           </div>
         </div>
      </div>
    </div>

CSS

/* ------------------------ Character Cards ------------------------ */
.grid {
    margin: 40px 0 100px 340px;
    min-height: 800px;
    height:100vh;
    text-align: justify;
    line-height: 100%;
}

.grid-item, .grid-sizer {
    width: 250px;
    margin: 5px;
    position: relative;
}

.click-me:hover {opacity:0.9}
.click-me:active {filter:brightness(1.3);}
.click-me {transition:all 0.3s}

.grid-item.inactive .dropdown {display:none;}

.card-container {
  background: #fff;
  border-radius: 15px;
}

.portrait {
  margin-left:15px
}

.name {
  font-size: 2em;
  padding: 15px;
  text-align: center;
}

.stat-bar-container {
  height: 5px;
  background: #eee;
  flex-grow: 1;
  margin: 0 15px;
}

.stat-container {
  display: flex;
  align-items: center;
  width:100%;
  flex-wrap:wrap;
}

.stat-label {
  width: 30px;
  margin-left: 15px;
}
.card-container header {
  display: flex;
  align-items: center;
}
.stat-bar-progress {
  background: #d9bec1;
  height: 100%;
}

.tagline {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 15px;
}

.dropdown {
  background: #fff;
  z-index: 2;
  position: absolute;
  padding: 15px;
  width: calc(100% - 30px);
  box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.2);
  margin-top: 5px;
  border-radius: 5px;
}

.slot {
    width: 18px;
    height: 18px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #d9d9d9;
    margin: 2px;
    padding: 6px;
}

.inventory .sprite {transition:filter 0.3s}

.inventory .slot:hover .sprite {
  filter: grayscale(0.5);
}
.inventory .slot:hover {background:#eeeeee87;}

.inventory .slot:active .sprite {
  filter: brightness(1.1);
}

.slot.current {
    background: #fff;
    border-color: #eee;
    position:relative;
}

.slot.current::after {
    content: '';
    position: absolute;
    bottom: -4px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: #eee;
    border-top: 0;
    z-index: 9;
}

.slot.current[data-is-empty=""]::after{content:none;}

.inventory {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.inventory div {
  width:32px;
  margin-right:2px;
}
.item-description {
    position: absolute;
    background: #eee;
    padding: 10px 15px;
    left: 0;
    font-style: italic;
    width: calc(100% - 30px);
    z-index: 9;
    border-radius: 0 0 5px 5px;
    box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.2);
}
.inventory h2 {
    width: 100%;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: center;
    margin: 0 0 10px;
}

.item-description[data-is-empty=""] {visibility:hidden;}

View Sample Spreadsheet

Spreadsheet notes: So there's a lot going on in this one.

The first thing you should note is that if you click on a cell from Inventory or from Stats, what's written in there is not actually the html string you see, but a simple little formula of =CONCATENATE(SheetName!$Cell#:#)

What's going on there is it's glueing together all the values in that cell range, such as Items!B4:4

Now why might you want to do this, as opposed to just adding the inventory slots to your template directly like?:

${data[i].ItemDescription}

Well, this way you can control how many slots there are on a per-character basis, and if you add more slots (by inserting new columns to the items sheet), you don't need to edit the template at all! If you take a look at the live example, you'll see that the item slots vary between characters.

It helps, I think, to think of the JS template as a static template, and the spreadsheet as a dynamic template.

With the spreadsheet, you can take advantage of its formulae to do anything from simple calculations (see the stats sheet - converting dnd stats into percentages to control the stat bar), to stringing together the values of multiple cells into one variable html string for you to insert into your static template.