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.

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();
            this.addChild(this._baseUI);
            
            // Create a couple of sample elements
            this._sampleWrapperElement = new UIElement(this._baseUI);
            this._sampleWrapperElement.elementId = "wrapper";
            
            this._sampleChildElement = new UIElement(this._baseUI);
            this._sampleChildElement.addElementClassName("child");
            
            // Add the elements to the UI
            this._baseUI.addElement(this._sampleWrapperElement);
            this._sampleWrapperElement.addElement(this._sampleChildElement);
            
            // 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);
            
            this._baseUI.styleSheetCollection.addStyleSheet(cssParsed);                
        }
      
    }
}