Stylekit is a CSS3 parser and rendering engine intended for use in AS3 applications that provide a customizable 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.

Some features:

  • 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

Sample

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);                
        }

    }
}
UI . URL.