Skip to content

HTTPS clone URL

Subversion checkout URL

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

README.mdown

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

    }
}
Something went wrong with that request. Please try again.