Jump to content
  • Advertisement
Sign in to follow this  

[WIP] UNIStyle - A CSS inspired system for Unity3D GUI styling

This topic is 961 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi there!
I've always found the styling process of UIs in Unity3D a bit frustrating.
For the last month or so I have been working on a system that let's you use CSS-like stylesheets to control every aspect of your UI design.
Colors, sizes, sprites, fonts, tweens, etc.


The stylesheets are a bit more advanced than "regular" CSS. You can use named constants that can be edited from within the Unity editor.

Also included are math functions like lerp(), max(), etc. to let you calculate colors/vectors/etc. based on multiple values.
It's currently WIP but already pretty usable.
I would love to know what you think of this and let me know if you have any suggestions!
Here are some gifs/videos of the system in action:
Editing styles while playing in editor


"Mines" demo:

160 lines of C#, 100 lines of CSS




"Loot" Demo:

230 lines of C#, 100 lines of CSS



Edited by Madhed

Share this post

Link to post
Share on other sites

Small update:


The parser and themeing system is now fully customizable.

Programmers can add new style properties, types and style sheet functions with a few lines of code.


The previously hardcoded parts are now rewritten to use this extension system themselves.

It's already nice to work with but will be refactored to reduce the needed code even more.


As a normal user of the system you won't have to touch this code, of course. It is geared towards developers who want to customize the system.


The default theme extension:

/// <summary>
/// The default extension for uGUI functionality and basic types
/// </summary>
public class DefaultExtension : ThemeExtension {
    public override void AddTypeHandlers(Theme t) {
        t.AddTypeHandler(new FloatTypeHandler());
    public override void AddFunctionHandlers(Theme t) {
        t.AddFunctionHandler("lerp", new ColorLerpFunctionHandler());
        t.AddFunctionHandler("lerp", new FloatLerpFunctionHandler());
        t.AddFunctionHandler("lerp", new Vector2LerpFunctionHandler());
        t.AddFunctionHandler("lerp", new Vector3LerpFunctionHandler());
        t.AddFunctionHandler("vec2", new Vec2FunctionHandler());
        t.AddFunctionHandler("vec3", new Vec3FunctionHandler());
        t.AddFunctionHandler("rgba", new RGBAFunctionHandler());
    public override void AddPropertyHandlers(Theme t) {
        t.AddTweenablePropertyHandler("font-size", new FontSizePropertyHandler());
        t.AddTweenablePropertyHandler("color", new ColorPropertyHandler());
        t.AddTweenablePropertyHandler("scale", new ScalePropertyHandler());
        t.AddPropertyHandler("font", new FontPropertyHandler());
        t.AddPropertyHandler("sprite", new SpritePropertyHandler());

The lerp function for colors:

public class ColorLerpFunctionHandler : GenericParserFunction<Color, Color, float, Color> {
   protected override Color CalculateResult() {
       return arg1 + (arg2 - arg1) * arg3;
Edited by Madhed

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!