Skip to main content
eleventeen v9.2.20-alpha.17 🎈 Sustain 11ty

About eleventeen 🌈📓

Eleventeen is an evolving variation of Eleventy Base Blog, a blueprint to start a blog with Eleventy (11ty), the award-winning open source site generator created and maintained by Zach Leatherman, who blogs about Eleventy often.

Ricky de Laveaga builds eleventeen on GitHub for web projects by Famebot and Artist Activist. Famebot is the micro movie studio Ricky runs with Laramie Dennis, and Artist Activist is a creative agency advocating for positive change Ricky co-founded with Clifford J. Tasner.

The name eleventeen is an homage to the Daisy Chainsaw album 👩🏻‍🎤🎶

Rainbow Mode™

Eleventy Base Blog is:

A starter repository showing how to build a blog with the Eleventy site generator (using the v2.0 release).

In addition to Base Blog’s killer features and our upgraded (alpha release) Eleventy v3 canary’s bundler-free ESM support, eleventeen sports a novel new visual experience we call Rainbow Mode, powered by Chromagen, the color scheme generator we publish on GitHub under the Famebot organization. Our homegrown Rainbow Mode is wholly distinct from and not to be confused with Emacs rainbow-mode, which “sets background color to strings that match color names.”

prefers-color-scheme: rainbow

We posit a third color scheme preference in addition to light and dark “modes,” rainbow. And here in the world of eleventeen, rainbow is the default. But we acknowledge not all sites are a match for Rainbow Mode, and still want those sites to enjoy the rest of what eleventeen has to offer.

Mono Mode 📓🏁

v9.2.3-alpha.5 added a mono option to _data/metadata.js that disables Rainbow Mode if you set it to true. mono is false by default, on purpose, because it beats making people set an option called rainbow to false.

Show Me the Mono

You can see Mono Mode enabled at mono.eleventeen.blog

Try toggling light and dark mode using devtools, there are links to how at the bottom to chromagen.io

The rainbow eleventeen demo still lives (happily ever after) at eleventeen.blog

Get Started

  1. Edit _data/metadata.js with the information for your site.
  2. (Optional) Review eleventy.config.js build configuration.

Other Eleventy Resources

Star Power ⭐️⚡️

Please remember to star eleventeen on GitHub ⭐️🐙