[Brainstorm] Declarative responsive markup

While discussing issue #559 there was a recognition that panelsets is raising an interesting pattern that has existed on the platform since its inception that a developer will want to possible change not only the visual representation but the markup as well. @jonathantneal raised a scenario that users engage with consistently that is similar in navigation when real-estate changes normally between that of desktop and mobile form factors. This can be seen across the web, here is just one such example using ESPN:

Narrow viewport:

Wider viewport:

These types of scenarios may not only change the visual layout but modify the DOM as well as behavior do to these DOM modifications.

This will be achieved today by utilizing Javascript with the matchMedia API and then making the necessary DOM modifications. That said, most templating languages these days handle these types of solutions somewhat declaratively through if/else directives. Here is one example using Nunjucks:

{% if foo.bar == 5 %}
      You've exceeded the amount, you currently have {{foo.barr}} items in your cart.
{% endif %} 

One can then imagine the web platform not doing a 1:1 to full access to all JS vars but evaluations akin to what can be done in CSS such as:

<if media=(max-width: 600px)>
         <!-- MOBILE MARKUP -->
    </endif>

There is precedent for this to an extent with regards to the picture and video elements handling of selection of media assets based on dimensions using the sizes attribute. I'd prefer to not necessarily go this exact same path but lean on learnings from how the industry does this today.

This is meant to be an exploratory issue, not something that we're actively proposing so opinions and ideas are welcome.

Start by reading issue #559 and the discussion around panelsets, then compare the narrow and wide ESPN examples with the existing matchMedia, picture, and video approaches mentioned here. This is an exploratory brainstorming issue, so no specific files, tests, implementation scope, or completion criteria are identified yet.