Why programmatic UI?

Big companies can afford to roll their own Programmatic UI frameworks. Element is an attempt at providing such capabilities to the open-source community. The closest thing to compare it to would be Twitter TWUI in obj-c

How does it work?

A typical Element app consists of 90% Swift code and 10% CSS and SVG. CSS Handles design and alignment and swift handles functionality and animation.

Installation:

• Read This tutorial on how to start a new App project from Swift Package Manager
• Add this to your Package.swift file

import PackageDescription
let package = Package(
    name: "AwesomeApp",
    dependencies: [
		.Package(url: "https://github.com/eonist/Element.git", Version(0, 0, 0, prereleaseIdentifiers: ["alpha", "5"]))
    ]
)

• In AppDelegate.swift add this to the top @testable import Element and this inside the applicationDidFinishLaunching method:

StyleManager.addStyle("Button{fill:blue;}")
let btn = Button(100,20)
window.contentView!.addSubview(btn)
func onClick(event:Event){
	if(event.type == ButtonEvent.upInside){Swift.print("hello world")} 
}
btn.event = onClick

Resources:

• Here is a simple example app made with Element: Stash
• Library of example code for each component in Element: here
• Default macOS styles to get you started: here

iOS:

Element for iOS coming soon here

Need help setting up?

Open an issue or message me on twitter

Contributions?

Have an idea for Element? Pull-Requests are always welcome.