About

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.

• Find out more on https://buildexcellentwebsit.es/.
• Remix the original: https://glitch.com/edit/#!/remix/build-excellent-websites

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

Watch the talk

Blog

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

• Post with all the markdown

  November 2, 2022

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

• Post with a video

  October 31, 2022

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

• Post with an image

  October 12, 2022

  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

  September 1, 2022

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