Bibliodex is a webpage template inspired by old-school library catalog cards, intended for creating a filterable index of stories, reviews, recipes, or anything else of your choice. Bibliodex was created by Coyote with the help of Solaria's CSS Filter Guide and is free for personal use.
You are viewing a default version of Bibliodex in grayscale. For an indication of what Bibliodex can look like in color, see Bibliodex Cobalt or Bibliodex Vellum.
For examples of Bibliodex in use, see Bookscorpion's Link Directory, J's Recipes Page, or The Desert Links Compendium.
To use, view the source code for this page or simply download the page file:
For more guidance, see You Can Make A Website, a beginner guide.
To add your own filterable category, you will need to add an input, a class that only displays when the input is checked,
and at least one section with the corresponding class name (plus a class of "card").
For example, to add a murder mystery category, you would need these:
See Solaria's tutorial for more instructions.
You can set any category to automatically be paired with any emoji, symbol, or image of your choosing.
To add one, put it in the content property of For example, you could add a magnifying glass to all murder mystery card headers like this:
Browse emojis & icons:
A work of fiction.
A made-up tale.
A book review.
A book review.
A recipe from Smitten Kitchen.
A recipe from Smitten Kitchen.
Template Features
Custom Filters
.collection:has(#murder-mystery:checked) .murder-mystery {display: inline-block;}
<label><input type="radio" id="murder-mystery" name="category"> Murder Mysteries </label>
<section class="card murder-mystery"> Example Card </section>
Custom Header Icons
h2::before for a particular class.
.murder-mystery h2::before {content: '🔍 ';}
Spectrum's Grace
The Baker's Bones
Case of the Cursed Cards
One Last Graph
Banana Bread
Pumpkin Bread