Thanks @Bubbleboy. We use CSSTools in a lot of places in our app. Super useful plugin, for sure.
That said, we’re looking to manage a bunch of more challenging element height scenarios and using CSS Tools alone doesn’t seem to address certain aspects of them. I’m curious how other people are solving for the following types of challenges:
- Creating 2 column pages where both columns have sub-groups that collapse height and RGs that increase height, and both columns need to be the same total height when displayed to the end user.
- Setting groups to be full height and spacing content within it appropriately (e.g., sometimes in proportion to the height, sometimes adding scroll bars to specific sections so users can quickly scroll to find additional content, etc.)
- Adapting the height of content, etc. to the height of the user’s viewport when it increases/decreases after page-load.
So far, I’ve been trying to cobble together some custom JS to trigger when a page resizes, along with custom calculations for the height of different elements depending on page height and what’s currently visible to the user, and CSS Tools to move and resize various elements on the page. Haven’t gotten far into it yet and it’s feeling like this approach is going to be super messy to set-up, a bit off for the end user at times, and perhaps a somewhat brittle so future changes become more time consuming.
I’m sure there’s a smarter way.