I am planning to use Bulma CSS for my plugin but it seems due to incomplete support for Flexbox, the elements are not rendered correctly. Are there any plans to fix this?
Very few UI frameworks are going to work out-of-the-box in UXP (… cue what seems to be my motto these days: “UXP isn’t a browser”). Some may work with minor modifications, but UXP doesn’t offer official support for any particular UI framework.
As to the specific flexbox issues that aren’t working for you, it’d be good to know what they are – otherwise I’m not familiar enough with Bulma to give you much guidance or workarounds.
The panel in the XD have this extra vertical space for each div. The right side in the screenshot is what it should look like. SVG’s seems not to work either. I need to dig deep which tag/variable causes this issue.
What is the recommended way to style the panel? Is there any recommended CSS which works out of the box(Spectrum) ?
SVGs can work, but they need to be inline & not inside a native widget (<button>, for example). <sp-button> will accept SVGs, though.
W/o seeing the styles being applied, it’s hard to troubleshoot here. It looks like the items are being allowed to expand a lot – perhaps a flex rule not being applied or a value UXP doesn’t understand, but I’d need to see the CSS that Bulma is using in this case to know.
Are you using the UDT to debug? That’s going to be the easiest way to figure this out.
UXP does come with Spectrum components built-in – check our docs for the supported controls. You’re not required to use this, and depending on your styling needs, some hand-written CSS may be easier than trying to coerce a framework to work.