An Eleventy starter

This (opiniated) Eleventy starter is based on Andy Bell’s talk ‘Be the browser’s mentor, not its micromanager’ and it’s companion website buildexcellentwebsit.es.

In his words, it’s about hinting the browser rather than micromanaging it, using progressive enhancement, CSS layout, fluid type & spacing, as well as modern CSS features.

This way we can shape frontends that look good to everyone, regardless of device, connection speed or context.

Based on the companion website of Andy Bell’s talk ‘Be the browser’s mentor, not its micromanager’.
An approach that promotes modern CSS with methodologies, fluid type & space, flexible Layouts and Progressive Enhancement.

This starter exists to hopefully spread the use of this excellent workflow. To work with it efficiently you should be familiar with cube.fyi, utopia.fyi and every-layout.dev.

Edit your preferences (colors, fonts, fluid text sizes etc.) in src/assets/css/design-tokens.

Watch the talk


I'm showing the last 4 blog posts, but there might be more!

  • Post with all the markdown

    A lot of markdown packages are installed to help you write your posts. All presets are personal preference.

  • Post with a video

    This starter uses Justin Ribeiro's lite-youtube web component. Add `youtube: true` to frontmatter to activate.

  • Post with an image

    Eleventy's own build-time image transformations. Fond more info on11ty.dev/docs/plugins/image/ and edit settings in config-folder.

  • Post with some code

    Syntax Highlighting is achieved by a pack of Eleventy plugins. No browser/client JavaScript, highlight transformations are all done at build-time.