The Twine® Grimoire is an unofficial guide to using CSS (Cascading Style Sheets) and HTML (Hypertext Markup Language) to customize projects made in Twine 2.0. The Grimoire demonstrates how CSS and HTML can be used in a variety of Twine 2.0 Story Formats as a method of fine-tuning a game’s appearance and behavior, allowing users to develop new skills and create visually and mechanically unique text-based games. These tutorials are suitable for beginner to intermediate users.
The Grimoire (vol. 1) was included in itch.io's Bundle for Racial Justice and Equality
in June 2020 and the Indie Bundle for Palestinian Aid in June 2021.
Both volumes were included in the 2022 Queer Games Bundle.

Volume I.

The first volume of the Twine® Grimoire is geared toward common features that many first-time users are interested in working into their projects, including text styling, link styling, and passage backgrounds.

Features:

  • 84 pages
  • 8 sections, including 6 detailed tutorials
  • 100% free to download
  • Discusses both Harlowe and SugarCube Story Formats
  • Covers topics like using the Story Stylesheet, tag-based styling, how to organize files, and more
  • Screenshots and examples of code are provided with each tutorial
  • Sets of exercises to try yourself are suggested at the end of every section
The information in these tutorials is not compatible with previous versions of Twine such as Twine 1.4.2. These tutorials are suitable for beginner to intermediate users who are interested in experimenting with CSS and HTML. Users do not need previous experience with web development, programming, or Twine.

Volume II. ✨ NEW

The second volume of the Twine Grimoire® focuses on more intermediate and advanced ways to customize a project's stylesheet. These tutorials are suitable for intermediate users who are familiar and confident with topics and skills introduced in Volume 1.

Features:

  • 63 pages
  • 6 detailed tutorials
  • 100% free to download
  • Discusses both Harlowe and SugarCube Story Formats
  • Covers topics like creating custom buttons and CSS-based animations, using cycling links, customizing SugarCube's UI bar, and more
  • Screenshots and examples of code are provided throughout the volume
  • Sets of exercises to try yourself are suggested at the end of every tutorial

Other Helpful Resources

More resources, including links to Story Format documentation, can be found in the Vol. 1 PDF.

About Twine®

Twine® is an “an open-source tool for telling interactive, non-linear stories” originally created by Chris Kilmas in 2009; it is now maintained by “a whole bunch of people at several different repositories,” per Twinery.org. I am in no way affiliated with its development process.

Twine is a registered trademark of the Interactive Fiction Technology Foundation (IFTF), which “helps ensure the ongoing maintenance, improvement, and preservation of the tools and services crucial to the creation and distribution of interactive fiction, as well as the development of new projects to foster the continued growth of this art form.”

Supporting the Grimoire

The Twine® Grimoire project is made possible by the support of my patrons on Patreon, who enable me to take the time to write these tutorials, revise them, and compile them into free PDFs. All patrons pledging $2 or more gain early access to the first draft of each tutorial as I write it, and also have the opportunity to make tutorial requests every month.

In the interest of making this resource as accessible as possible to many users, the Grimoire will NEVER have a minimum donation required to download. However, if you would like to support my work, you can do so by either donating on itch, or pledging on Patreon.