Feature Request Conditional Classes for Responsive Design

Some Context:
Our App is targeting a wide variety of different screen sizes. Our Demos are done on IPads and the App is deployed to the Android and IOS stores. We have different screens and menus planned with some integrated AR experiences and some "companion" utilities in WebGL.

Since we want to support both directions landscape and portrait for the majority of screens we need a quick workflow to develop responsive variants.

Inspiration (What do I want):
Inspired by responsive css design systems like Bootstrap or in particular Tailwind it would be awesome to have conditional classes. To give an example:

In Tailwind you can make all css classes conditional by prefixing "sm,md,lg" etc. Often used to switch layouts for example.

Code (CSharp):

1. class="grid grid-cols-1 md:grid-cols-6"

This switches from a single column layout to a 6 column layout if the medium size breakpoint is reached.

With these conditional classes it is possible to design different layouts within the pure html. This is quick and in my eyes intuitive.

I am looking for a similar workflow with uxml/uss. Please let me know if there is a simple way to design Responsive layouts that I might have overlooked. One option that i came up with was to have a template for each configuration and load them depending on the screen/orientation. This unfortunately produces a lot of redundant code and changes to all sizes need to be integrated into all sources.

A Workaround:
To solve this I have created a workaround. I wrote a postprocessor for uss files that copies the original and creates duplicates with prefixed classes. During runtime, besides the original stylesheet, I load the respective uss with the prefixed classes. That way all classes prefixed with an inactive stylesheet aren't effective. If the screen changes i unload the invalid prefixes and load the new prefixes fitting to the screen.

This works great in the current situation but there are some drawbacks mostly related to the current implementation. I.e. css files need to be in the resources folder, files might override other uss etc.

I uploaded some snippets of my implementation on pastebin if you want to have a look. Links are below (might move to git).

I am primarily looking for:

1. [Feature Request] Is there an option to achieve this(simpler) with the current toolkit. If not I would really appreciate conditional classes in the future.

2. Is there a better approach to designing responsive layouts with the ui toolkit? Let me know your thoughts and approaches.

3. Do you have feedback for my workaround? Is there maybe a flaw i haven't thought of or a more elegant solution?

Here are the pastebin links:

UCSS Postprocessor:
https://pastebin.com/QBXV7kf2

How its used:
https://pastebin.com/hLBLDwsu

Loading different stylesheets during runtime:
https://pastebin.com/DaSebDH7

I haven't tested the system a lot yet, but if you also want to use the workaround i can give additional infos.

 

This seems like an interesting and useful feature I could implement into Interface. Have the option to connect a style to a layout check to have it only be applied if it it meets the criteria. Will do some experiments on that workflow.