What is it?

Independent UI framework with zero AppKit dependencies. Element lets you add rich UI interaction to your app.

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 = FlippedView()/*TopLeft orientation*/
window.contentView?.addSubview(btn)
btn.event = { event in
   if(event.type == ButtonEvent.upInside){Swift.print("hello world")} 
}

You can also compile Element as a regular .framework instructions here

Resources:

• Simple example app made with Element: Stash
• Library of example code for each component in Element: Explorer
• Default macOS styles to get you started: ElCapitan

iOS:

Element for 📱 is in the works here

Progress:

2017-apr

• FastTreeList is introduced

2017-mar

• List UI's are now POP (aka Protocol Oriented Programming)
• Elastic, Slidable and Scrollable protocols are introduced
• Converting from OOP to POP (aka shared inheritance) Aka no duplicate code!

2017-feb

• Improvements to SliderTreeList
• Fixed slider positioning in sliderTreeList
• Fixed margin error in TreeList
• Significant improvements to RBSliderFastList, SliderFastList and FastList

MileStones:

• FlexBox support
• FastTreeList component ✅
• Faster CSS caching algorithm

More...

More about Element 👉 wiki

Support

Please, don't hesitate to file an issue if you have questions.

Sponsors: