Eleventy Excellent 4.0

A new version is here! This includes a bunch of breaking changes.
Again I am changing the body font for this update, this time it’s Atkinson Hyperlegible.

New Image handling

I have been clinging to my image shortcode for too long. With the latest major version of Eleventy Image I decided it’s finally time to also include the transform method, because it is awesome.

That alone would not be a breaking change, but I decided to change the existing Nunjucks image shortcode a bit. If you use the shortcode beyond the container class, you must adjust your code to these changes:

( src,
  alt = '',
  caption = '',
  loading = 'lazy',
  containerClass,
  imageClass,
  widths = [650, 960, 1200],
  sizes = 'auto',
  formats = ['avif', 'webp', 'jpeg']
) => { ...
  • Breaking: widths is now passed in before sizes (because I change this value much more often).
  • Breaking: imageClass is a new paramteter dedicated to the <img> element, while containerClass is for the container (<figure> or <picture>), as before.
  • also new: for all images you can start the path relative to the input folder (drop ./src in the path, though it is compatible with ./src being present)

Using the transform comes with the great advantage, that you can now use co-located images with the HTML and Markdown sytnax. 🎉

For a detailed overview of the new image possibilities see the dedicated blog post.

Cascade layers

Inspired by Mayank’s post, I’ve transitioned to using cascade layers, instead of using the :where() pseudo-class to create low-specificity selectors for resets and compositions.

  • The global CSS bundle is now organized with cascade layers.
  • The local CSS bundle, used for per-page or component-specific styles, does not utilize cascade layers. As a result, all CSS blocks included have a higher specificity than global styles, regardless of the selector specificity in the global CSS bundle.

Breaking: The “inline” bundle is now called “local”, as this made more sense: all bundles are inlined.

New color system

Run npm run colors after defining your base color values in src/_data/designTokens/colorsBase.json. This will generate or update the colors.json file in the same directory.

  • Colors under neutral or vibrant are converted into scalable palettes.
  • Colors listed under fixed are standalone values and do not generate shades. Each fixed color also produces a “subdued” version optimized for dark themes.
// this creates a palette with shades of green, 100 to 900
{
  "vibrant": [
    {
      "name": "green",
      "value": "#008000"
    }
  ]
}

src/assets/css/global/base/variables.css changed a lot, as I now use new color names. I also dropped the @supports blocks for color-mix() and the relative color syntax - not because they aren’t great, but I just perceived the whole file as too complex. Now JavaScript does the step of creating subdued colors for the dark theme.

I also considered using the new light-dark() CSS function instead of the repetitive code for prefers-color-scheme and data-theme=“dark”, but the browser support is still too low.

Breaking:: src/assets/css/global/base/variables.css changed. You must adapt your colors in src/_data/designTokens/colorsBase.json if you want to use the npm run colors script.

More about colors here.

New button styles

Inspired by Andy’s article, the button styles changed. As the article explains that very well, I won’t say much more about it.

Other new features and changes

  • border-radius became a design token used by the Tailwind config, to be set in src/_data/designTokens/borderRadius.json.
  • new 3XS spacing value in src/_data/designTokens/spacing.json.
  • new grid composition layout data-layout='thirds.
  • new OG images template. As it uses meta.siteName next to the 11ty Logo, you might have to adjust the template for that src/common/og-images.njk.

Let me know if you have any questions or issues with the update.
I am happy to help you out. Maybe you’ll want to wait a bit, as I will add some more fixes, no doubt.

View this page on GitHub.