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
SlimerDude Fri 26 Jan 2018
The domkit SashBox takes the sizes array, sorts them out into
px
and%
dimensions, and applies CSScalc()
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 myrem
dimentions topx
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:
So SashBox just needs to inspect the CSS dims in the
sizes
array to find the one common unit, be itpx
,rem
, orvw
, 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 MDNandy Fri 26 Jan 2018
Send me a patch or PR and we can review