Awesome Open Source
Awesome Open Source

Stevia

Documentation Language: Swift 2, 3, 4 and 5 Platform: iOS 8+ Carthage compatible CocoaPods compatible Swift Build Status codebeat badge License: MIT GitHub contributors GitHub tag

Drawing

Winner of Hacking with Swift Recommended award

You + Stevia = πŸ¦„

  • [x] πŸ’‘ Write concise, readable layouts
  • [x] πŸ– Reduce your maintenance time
  • [x] 🎨 Compose your styles, CSS-like
  • [x] πŸ”΄ Plug Live reload and boost your iteration cycles

Reason - Example - Live Reload - Installation - Documentation

πŸ–Ό Visual Layout Api

layout {
    100
    |-email-| ~ 80
    10%
    |-password-forgot-| ~ 80
    >=20
    |login| ~ 80
    0
}

β›“ Chainable Api

email.top(100).left(8).right(8).width(200).height(44)
alignHorizontally(password, forgot)
image.fillContainer()
button.centerInContainer().size(50%)
equalWidths(email, password)
image.width(>=80)

πŸ“ Equation-Based Api

email.Top == 100
password.CenterY == forgot.CenterY
login.Top >= password.Bottom + 20
login.Width == 75 % Width
(image.Height == 100).priority = UILayoutPriority(rawValue: 999)

All Generate native NSLayoutConstraints πŸŽ‰

πŸ‘¨β€πŸ”¬Try it!

Stevia is part of freshOS iOS toolset. Try it in an example App ! Download Starter Project

πŸ’‘ Reason

Because nothing holds more truth than pure code πŸ€“
Xibs and storyboards are heavy, hard to maintain, hard to merge.
They split the view concept into 2 separate files making debugging a nightmare
There must be a better way

How

By creating a tool that makes Auto layout code finally readable by a human being.
By coupling it with live code injection such as injectionForXcode we can design views in real time
View layout becomes fun, concise, maintainable and dare I say, beautiful ❀️

Login View Example

In the project folder, you can find an example of a typical login view laid out in both native and Stevia for you to understand and compare the two approaches.

As a spoiler alert, the number of characters goes from 2380 to 1239 ( ~ divided by 2)

Write Half the code that is actually 10X more expressive and maintainable !

πŸ”΄ Live Reload

Live reload enables you to develop your views live without relaunching the app everytime.

Stevia + InjectionForXcode = #WhoNeedsReactNative?? πŸš€

Just Cmd+S and you can dev live in the simulator !

Learn more about how to set up live reload here.

βš™οΈ Installation

Stevia is installed via the official Swift Package Manager.

Select Xcode>File> Swift Packages>Add Package Dependency...
and add https://github.com/freshOS/Stevia.

The Swift Package Manager (SPM) is now the official way to install stevia. The other package managers are now deprecated as of 4.8.0 and won't be supported in future versions.
For Carthage/Cocoapods support (legacy versions) see documentation here.

πŸ“– Documentation

The following will teach you the gist of Stevia in one minute.
To go further, you can refer to the full documentation here.

Stevia enables you to write readable Auto Layout code. It does so by tackling the 3 main components of layout: view hierarchy, layout and styling.

01 - View hierarchy

email.translatesAutoresizingMaskIntoConstraints = false
password.translatesAutoresizingMaskIntoConstraints = false
login.translatesAutoresizingMaskIntoConstraints = false
addSubview(email)
addSubview(password)
addSubview(login)

becomes

subviews {
    email
    password
    login
}

02 - Layout

email.topAnchor.constraint(equalTo: topAnchor, constant: 100).isActive = true
email.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
email.rightAnchor.constraint(equalTo: rightAnchor, constant: -8).isActive = true
email.heightAnchor.constraint(equalToConstant: 80).isActive = true

password.topAnchor.constraint(equalTo: email.bottomAnchor, constant: 8).isActive = true
password.leftAnchor.constraint(equalTo: leftAnchor, constant: 8).isActive = true
password.rightAnchor.constraint(equalTo: rightAnchor, constant: -8).isActive = true
password.heightAnchor.constraint(equalToConstant: 80).isActive = true

login.topAnchor.constraint(lessThanOrEqualTo: password.bottomAnchor, constant: 20).isActive = true
login.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
login.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
login.heightAnchor.constraint(equalToConstant: 80).isActive = true
login.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 0).isActive = true

becomes

layout {
    100
    |-email-| ~ 80
    8
    |-password-| ~ 80
    >=20
    |login| ~ 80
    0
}

03 - Styling

email.borderStyle = .roundedRect
email.autocorrectionType = .no
email.keyboardType = .emailAddress
email.font = UIFont(name: "HelveticaNeue-Light", size: 26)

becomes

email.style { f in
    f.borderStyle = .roundedRect
    f.autocorrectionType = .no
    f.keyboardType = .emailAddress
    f.font = UIFont(name: "HelveticaNeue-Light", size: 26)
    f.returnKeyType = .next
}

πŸ‘¨β€πŸ’» Contributors

YannickDot, S4cha, Damien, Snowcraft, Mathieu-o, Blaz Merela, Theophane Rupin, Jason Liang, liberty4me, Scott Bates, Sai, Mike Gallagher, WaterNotWords, Mick MacCallum, Onur Genes

πŸ‘₯ Backers

Like the project? Offer coffee or support us with a monthly donation and help us continue our activities :)

πŸ“² Apps using Stevia

Many top-notch Apps with millions of users use Stevia to write better Auto Layout code:

You are using Stevia ? Please let me know @[email protected] and I'll add you to the list 😍!

πŸ… Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site :)

Swift Version


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
swift (7,536)Β 
ios (3,491)Β 
ui (984)Β 
cocoapods (561)Β 
xcode (476)Β 
carthage (321)Β 
view (205)Β 
layout (172)Β 
dsl (165)Β 
interface (77)Β 
autolayout (50)Β 
constraints (45)Β 
storyboard (37)Β 
auto (33)Β 
layouts (16)Β 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising πŸ“¦Β 10
All Projects
Application Programming Interfaces πŸ“¦Β 124
Applications πŸ“¦Β 192
Artificial Intelligence πŸ“¦Β 78
Blockchain πŸ“¦Β 73
Build Tools πŸ“¦Β 113
Cloud Computing πŸ“¦Β 80
Code Quality πŸ“¦Β 28
Collaboration πŸ“¦Β 32
Command Line Interface πŸ“¦Β 49
Community πŸ“¦Β 83
Companies πŸ“¦Β 60
Compilers πŸ“¦Β 63
Computer Science πŸ“¦Β 80
Configuration Management πŸ“¦Β 42
Content Management πŸ“¦Β 175
Control Flow πŸ“¦Β 213
Data Formats πŸ“¦Β 78
Data Processing πŸ“¦Β 276
Data Storage πŸ“¦Β 135
Economics πŸ“¦Β 64
Frameworks πŸ“¦Β 215
Games πŸ“¦Β 129
Graphics πŸ“¦Β 110
Hardware πŸ“¦Β 152
Integrated Development Environments πŸ“¦Β 49
Learning Resources πŸ“¦Β 166
Legal πŸ“¦Β 29
Libraries πŸ“¦Β 129
Lists Of Projects πŸ“¦Β 22
Machine Learning πŸ“¦Β 347
Mapping πŸ“¦Β 64
Marketing πŸ“¦Β 15
Mathematics πŸ“¦Β 55
Media πŸ“¦Β 239
Messaging πŸ“¦Β 98
Networking πŸ“¦Β 315
Operating Systems πŸ“¦Β 89
Operations πŸ“¦Β 121
Package Managers πŸ“¦Β 55
Programming Languages πŸ“¦Β 245
Runtime Environments πŸ“¦Β 100
Science πŸ“¦Β 42
Security πŸ“¦Β 396
Social Media πŸ“¦Β 27
Software Architecture πŸ“¦Β 72
Software Development πŸ“¦Β 72
Software Performance πŸ“¦Β 58
Software Quality πŸ“¦Β 133
Text Editors πŸ“¦Β 49
Text Processing πŸ“¦Β 136
User Interface πŸ“¦Β 330
User Interface Components πŸ“¦Β 514
Version Control πŸ“¦Β 30
Virtualization πŸ“¦Β 71
Web Browsers πŸ“¦Β 42
Web Servers πŸ“¦Β 26
Web User Interface πŸ“¦Β 210