Skip to content

Eleventy Excellent 4.0

Latest
Latest
Compare
Choose a tag to compare
@madrilene madrilene released this 11 Jan 12:28
· 24 commits to main since this release
v4.0.0
79d1ae5

Changelog

Version 4.0 introduces breaking changes, improvements, and new features. Quick summary:

Breaking Changes

1. Updated Image Shortcode

  • widths now comes before sizes.
  • Introduced imageClass for <img>-specific classes

If you use the Nunjucks image shortcode, you might have to update your arguments.

2. Cascade Layers

  • Global CSS is now organized with cascade layers
  • Local CSS (formerly "inline") does not use cascade layers and has higher specificity

The "inline" CSS bundle was renamed to "local".

3. New Color System

  • Running npm run colors after setting colors in src/_data/designTokens/colorsBase.json generates or updates the colors.json file, creating:
    • Scalable palettes for neutral and vibrant colors
    • Standalone values for fixed colors, including a "subdued" version for dark themes

The src/assets/css/global/base/variables.css file has changed significantly.
Update your colors in src/_data/designTokens/colorsBase.json.

New Features

  • Now using the Eleventy Image Transform Plugin which allows co-located images with HTML and Markdown syntax, amongst other features
  • Custom attributes lcan now be applied directly to Markdown image syntax
  • Button styles have been refreshed
  • border-radius is now a design token
  • Added a 3XS spacing value
  • New grid composition layout: data-layout='thirds'
  • New OG image template

More in the release blog post: https://eleventy-excellent.netlify.app/blog/eleventy-excellent-40/

Have fun!

Full Changelog: v3.7.5...v4.0.0

Assets 2
Loading