#2675 JS: domkit::SashBox sizes

SlimerDude Fri 26 Jan 2018

The domkit SashBox takes the sizes array, sorts them out into px and % dimensions, and applies CSS calc() stlying to it's children. It's a really elegant solution to a common layout problem! Although I'd like to take it futher...

I know all the domkit styling is done in pixels but myself, I tend to use the courser rem unit. The issue with SashBox then, is that I have to manually convert my rem dimentions to px taking into account the current font size for the page. And should people use any of the other (plethera of) CSS units, they would have to make the same manual conversion.

So I would like SashBox to work with a provided unit and percentages. Nothing in the SashBox API needs to change, just be a little more intellegent. For example, the following sizes should be converted to the following CSS:

["10px",  "20px",  "100%"]   --> 10px,  20px,  calc(100% - 30px)

["10rem", "20rem", "100%"]   --> 10rem, 20rem, calc(100% - 30rem)

["10rem",  "20px", "100%"]   --> throw Err("Only one unit may be used")

So SashBox just needs to inspect the CSS dims in the sizes array to find the one common unit, be it px, rem, or vw, and apply that.

I can have a go at a patch if you like the idea.

Note that CSS calc() does work with non-px units - see calc() on MDN

andy Fri 26 Jan 2018

Send me a patch or PR and we can review

Login or Signup to reply.