Hi Philip!

Why do you prefere use background: hsla(0, 0%, 0%, 0.1) insted of background: rgba(0, 0%, 0%, 0.1) like here? Performance?

Thanks a lot

Original webpage https://philipwalton.github.io/responsive-components/ works but clonned project on local host do not. Mayby problem with loading polyfills?

The strategy of "container requests" using Resize Observer is excellent!

Having studied the repository responsive-components, I assumed that you use the template language Nunjucks. I can not understand how you insert this script in the markup?

I do as follows:

project
app | > index.html (compiled)

src | > templates > layout.njk (here I connect the script)
................... parts > resize-observer.njk (script for resizeObserver)

... | > pages > index.njk (page template)

My repository: https://github.com/YuriFedorov/components

layout.njk
add block to end of the page

index.njk
link to the file with the script

resize-observer.njk
script from here

Gulp generates error while building:

What am I doing wrong? When connecting HTML fragments all is well.

`'serve' errored after 2.41 s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! responsive-components@ start: 'gulp serve'
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the responsive-components@ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:`

In your script, there is a snippet that searches for elements with the attribute data-observe-resizes:

// Observe all non-custom element containers, i.e. all elements with the
// `data-observe-resizes` attribute. Note: custom element containers
// are observed via the connectedCallback() lifecycle method.

var elements = document.querySelectorAll('[data-observe-resizes]');
for (var element, i = 0; element = elements[i]; i++) {
  ro.observe(element);
}

Is it possible to add such a condition?
If the container with the data-observe-resize attribute is inside the <pre> tags, the script should not run.

I use the SyntaxHighlighter library to style the code examples. I want that in examples there were no classes " SM MD LG XL".

example in VSCode

One solution for making this work with different font sizes is to divide the widths by the font size of the root element. The way em media queries work is they are based off of the browser default, regardless of what html element font-size is set to via CSS. So one method is to get the html element's font-size as the default for this division, and then allow the user to override that if they want to.

https://github.com/philipwalton/responsive-components/blob/master/app/templates/_resize-observer.html#L31

if (entry.contentRect.width >= minWidth) {

becomes

// these could be overridable options
const rootFontSize = parseInt(getComputedStyle(document.documentElement).fontSize)
const baseFontSize = 16
// 16 is because that is default in most/all browsers, and most likely the setting when developers get their breakpoint values, but of course it can be overridden if needed
...

if (relativeSize(entry.contentRect.width) >= minWidth) {

...

function relativeSize(value, base) {
    return value * (baseFontSize / rootFontsize)
}

Hopefully that makes sense.. Running the code may make more sense.