Skip to content


Subversion checkout URL

You can clone with
Download ZIP
An Actionscript 3 framework for creating user interfaces, using CSS3 for layout.
Branch: master
Failed to load latest commit information.
doc correcting docs
libs Updated utilkit-as3 to latest revision
.actionScriptProperties Added support for different border-radius patterns, updated border-ra…
.project Added utilkit-as3 as a submodule to libs/utilkit-as3, updated build s…
old.xml Updated build recipes to use a new work flow with project specific ta…
tasks.xml Updated setup to use th basedir


Stylekit - Skinnable UI for Flash using CSS3

Stylekit is a CSS3 parser and rendering engine intended for use in Actionscript 3 applications that provide a customisable user interface design.

The stated design goals of Stylekit are:

  1. Provide parsing and support for a broad range of CSS3 properties including transitions and animations
  2. Provide an unopinionated tree-like structure for UI elements that may be queried using CSS3 selectors
  3. Provide basic UI elements that may be composed to produce bespoke UI elements with more advanced functionality.
  4. Avoid non-standard CSS declarations. CSS written for Stylekit should work just as well in the browser.

StyleKit screenshot

The Magic Glue

Since Flash's DisplayObjects provide no semantic structure, Stylekit applies styles by providing a UIElement class for your UI elements to extend. Each UIElement instance may have a single parent and one or more children, providing the tree structure that allows complex CSS selectors to function. UIElements may have classes, pseudoclasses, an element name and an element ID.

StyleKit will manage the rendering and positioning of all UIElements within the BaseUI you create.

What does StyleKit support?

  • Block-level box model including floats, borders, margins, padding and alignment
  • Static, absolute and relative positioning
  • Image backgrounds using http or data URIs
  • Opacity
  • [With glitches/issues] CSS3 Transitions

What doesn't StyleKit support yet?

  • CSS animations using the @keyframes selector
  • Inline positioning

Using Stylekit

package org.myapplication
    import org.stylekit.css.parse.StyleSheetParser;
    import org.stylekit.css.StyleSheet;
    import org.stylekit.ui.BaseUI;
    import org.stylekit.ui.element.UIElement;

    public class MyUI extends Sprite
        protected var _baseUI:BaseUI;
        protected var _sampleWrapperElement:UIElement;
        protected var _sampleChildElement:UIElement;

        public function MyUI()
            // Create the BaseUI and add it to the stage.
            // The BaseUI is the top-level StyleKit UI class and is analogous to the Document
            // object in an HTML application.

            this._baseUI = new Base();

            // Create a couple of sample elements
            this._sampleWrapperElement = new UIElement(this._baseUI);
            this._sampleWrapperElement.elementId = "wrapper";

            this._sampleChildElement = new UIElement(this._baseUI);

            // Add the elements to the UI

            // Now we can style it!
            var css:String = "#wrapper { width: 50px; height: 50px; background: red; } #wrapper .child { width: 25px; height: 25px; background: blue; }";

            var parser:StyleSheetParser = new StyleSheetParser();
            var cssParsed:StyleSheet = parser.parse(css);


Something went wrong with that request. Please try again.