Skip to main content
eleventeen v9.4.0 🎨 Artist Activist

About eleventeen 🌈📓

Eleventeen is an evolving variation of Eleventy Base Blog, a starter repository showing how to build a blog with Eleventy, the open source site generator created by Zach Leatherman, who writes 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 studio advocating for positive change Ricky co-founded with Clifford J. Tasner.

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

Rainbow Mode™

Jump to section titled: Rainbow Mode™

One of the things eleventeen adds to Eleventy Base Blog is Rainbow Mode, powered by Chromagen, the color scheme generator we publish on GitHub under the Famebot organization. Eleventeen’s 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

Jump to section titled: 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 📓🏁

Jump to section titled: Mono Mode 📓🏁

Setting the mono option in _data/metadata.js to true disables Rainbow Mode. mono is false by default, on purpose, because it beats making people set an option called rainbow to false.

Show Me the Mono

Jump to section titled: 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

Jump to section titled: Get Started
  1. Edit _data/metadata.js with the information for your site.
  2. (Optional) Review eleventy.config.js build configuration.

Other Eleventy Resources

Jump to section titled: Other Eleventy Resources