Styling Improvements

Harbs:

I’ve been spending a lot of time thinking about how to improve styling capabilities in Royale. I have some ideas and I wanted to get others’ thoughts.

Styling HTML is probably one of the big pain points.

Tailwind CSS has solved the problem very nicely, but there’s some problems with Tailwind:

1. Getting the Tailwind CSS generated for a Royale app. Tailwind is built to read HTML, find the classes and populate CSS at build time. That doesn’t fit perfectly with the Royale build process.
2. You need to “know” Tailwind to specify the utilities. There’s no easy way to get code completion in MXML etc.
3. It doesn’t mesh perfectly with the Royale architecture of getting functionality and styling.

I was thinking:

The big advantage of Tailwind is that it makes it very easy to compose CSS functionality using a lot of small utility classes and only the classes used will be used in the end result.

We have a very similar concept in Royale: Beads.

That set me thinking about how we can accomplish the same thing in Royale and here’s what I’m thinking:

• I want to create a new component set (I’m thinking of calling it “Style” which would have a large set of styling beads.
• Each bead would encapsulate a specific function in CSS.
• We already have the ability to add CSS classes dynamically
• There would be a global utility class lookup
• Each time a utility class (in a bead) is applied, the class will be checked against the lookup and dynamically added if it doesn’t exist.
• There would be a standard naming convention for the classes so each utility which does a specific thing would be created exactly once.

The end result would be that all the CSS would be completely dynamic and would not be needed to be added to statically loaded CSS files.

• The actual code for creating the CSS should be quite concise and barely add weight to the app.
• I have no done profiling on dynamically added CSS stylesheets, but I think it’s very performant.
• CSS would be lazy loading which could further improve load times.
• It should certainly add less weight than constantly declaring inline styling as is currently very common.
• Using stylesheets might be more performant. (Not sure about that.)
• Using stylesheets give much more flexibility for styling
• It addresses pain points like hover behavior.

In “Royale” css, is there any way to declare default properties to be assigned to bead classes? i.e. something like this (ignore the exact syntax)

IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.FlexLayout”),vertical:true;

The idea being it would create a FlexLayout, set the vertical property to true and add the bead. Being able to declare properties on beads would allow reusing beads for declaring CSS defaults with slight differences in different cases.