tutorials

Install Element:

1. Download Element
2. Download swift-utils
3. Drag both folders into XCode

Here is a normal workflow for setting up an app:

1 Start by importing the default styles:

StyleManager.addStyles("Button{fill:blue}")

2 Add Component instances: Buttons, Lists, textFields etc

let btn addSubView(Button(72,24,self)) as! Button

3 Hock up a few event handlers to perform actions when interactions occur

func onEvent(event:Event){
    print("do something")
}
btn.event = onEvent

4 Subclass the classes you want to add custom functionality to

class SpecialButton:Button{
    override onMouseUpInside(event:MouseEvent){
        print("special up inside")
        super.onMouseUpInside(event)
    }
}

5 Add your own UI design through css and your own svg files StyleManager.addStyles("~/desktop/custom.css")

6 Compile and save your app. cmd + r

UIExplorer app:

a central place to refer to when setting up different components: Explorer

StyleKits:

The OSX 10.11 El Capitan CSS StyleKit: here

Example code:

Inline CSS

StyleManager.addStyle("Button{fill:blue;} Button:down{fill:red;}")//add a style to the StyleManager
addSubview(Button(self));//add button to view

Add custom functionality:

addSubview(CustomButton(self));//add button to view

class CustomButton:Button{//create a new class with your custom functionality
	overide func down{
		print("Down from CustomButton")
	}
}

Lets style CustomButton:

StyleManager.addStyle("CustomButton{fill:yellow;} CustomButton:down{fill:green;}")

Example swift

StyleManager.addStyle(File.resources.url + "assets/css/general.css");//call this one time to install all default styles
			
var button = addSubview(Button(96,24,self))/*Create and add the button to the view*/
button.event = onEvent/*add an event listener*/
		
func onEvent(event:Event){/*event handler*/
	print(event.origin)//Output: button
}

Read about the event system

Example CSS (OSX style button)

Button{
	float:left;
	clear:left;
	fill:linear-gradient(top,#FFFEFE,#E8E8E8);
	corner-radius:4px;
	drop-shadow(0px 0 #000000 0.8 1.6 1.6 2 2 false);/*great for stroke like shadows*/;
}
Button:down{
	fill:linear-gradient(top,#BCD5EE 1 0.0087,#BAD4EE 1 0.0371,#B4CEEB 1 0.0473,#A8C4E7 1 0.0546,#98B6E0 1 0.0605,#98B5E0 1 0.0607,#96B4DF 1 0.2707,#8EB0DD 1 0.3632,#81A9DA 1 0.4324,#6EA0D6 1 0.4855,#538ECB 1 0.5087,#8ABBE3 1 0.8283,#A8D6EF 1 1);	
	drop-shadow(0px 0 #002D4E 0.8 1.6 1.6 2 2 false);/*same as SubtleShadow but with a blue tint*/
}