Introducing eDriven.Stylesheets

While refactoring old style mapper system, I wanted to create something similar to well-known CSS (used by web browsers).

Although everybody is using CSS, not so many people know how it really works under the hood.

There are too few resources on this topic. Very interesting talk by David Baron may be the most useful resource on the web (pointing out performance problems with this type of system).

A new plugin

Creating a new style system was a complex task. I learned about the logic behind styling algorithms, which include style declaration processing, value caching, and applying to particular targets (depending on an ID or class, as well as media queries).

In my definition, “styling” means: contextual delivery of resources.

While first styling eDriven.Gui components, I ended up styling various scripts in the scene (not only the user interface).

Finally, I created eDriven.Stylesheets. I decided to include it with eDriven.Gui for free, but it will also be available for others as a separate plugin (soon in the Asset Store).

eDriven.Stylesheets can be used to style any script (including other GUI framework scripts).

Here is a demo video on what you can do with it:

In the first part of the video, the stylesheet contains style declarations targeting various tablet orientations.

In build settings, I’ve set the Default Orientation to Auto Rotation, and there you have it: various settings are being applied to particular scene elements depending on tablet orientation.

Notice that a planet (which is a “world” object) is also targeted and it is gets disabled for screen widths below 600px.

All of this is done without the need for scripting directly at targets.

I believe this system gives a much cleaner look to the application structure and I’m really interested in seeing different ways this system will be used by game developers and designers!

Stylesheet used in the iPad demo

Stylesheet used in the iPad demo

There is also a wizard (dialog) for adding and editing existing style declarations.

It has a few screens which guide the user through steps needed for creating/editing the style declaration, that include targeting a particular component/script (also called the “subject”), as well as targeting particular properties and applying media queries.

Subject screen

Subject screen

Style properties screen

Style properties screen

Media query screen

Media query screen

Style declaration creation settings

Style declaration creation settings

Posted in News