https://github.com/videojuicer/stylekit-as3

An Actionscript 3 framework for creating user interfaces, using CSS3 for layout.
https://github.com/videojuicer/stylekit-as3

Last synced: about 2 months ago
JSON representation

An Actionscript 3 framework for creating user interfaces, using CSS3 for layout.

• Host: GitHub
• URL: https://github.com/videojuicer/stylekit-as3
• Owner: videojuicer
• Created: 2010-08-06T13:37:55.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2012-05-15T14:20:19.000Z (over 12 years ago)
• Last Synced: 2024-08-04T05:02:47.295Z (5 months ago)
• Language: ActionScript
• Homepage: http://videojuicer.com
• Size: 2.14 MB
• Stars: 38
• Watchers: 4
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.mdown

Awesome Lists containing this project

• awesome-actionscript-sorted - stylekit-as3 - An Actionscript 3 framework for creating user interfaces, using CSS3 for layout. (File Formats / CSS)

README

        
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](http://smil-fixtures.s3.amazonaws.com/smilkit-screenshot.png)

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

            }

          

        }

    }