kernveld.com

Web Eleventy CSS Customization

I made this site to be a place where I share some projects. It is a static site generated with Eleventy. I could have left it at that, but while working on the CSS I decided to make most of the styling customizable.

The first area of the customizer tool allows selection of color, typography, and layout PRESETS. They are the fastest way to see the site styling shift. For more fine grained changes color, typography, and layout can be changed in the section below. You can even save your customizations to presets.

The header image of this post is an svg composed of shapes colored directly through the css variables, so that when the color settings for the site change, the svg changes too.

I'm launching this in production on this site, as it is a fun novelty here. However, especially for simple static sites, adding something similar to this could really speed up refinement of style changes or allow someone other than the developer to propose exactly what they want before a site goes live.