Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/freshOS/Stevia

:leaves: Concise Autolayout code
https://github.com/freshOS/Stevia

auto autolayout carthage cocoapods constraints dsl freshos interface ios layout layouts nslayoutconstraints stevia storyboard swift ui view visual-format-language xcode xib

Last synced: 4 days ago
JSON representation

:leaves: Concise Autolayout code

Host: GitHub
URL: https://github.com/freshOS/Stevia
Owner: freshOS
License: mit
Created: 2015-06-15T09:41:48.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2024-11-12T16:47:04.000Z (about 1 month ago)
Last Synced: 2024-12-07T14:41:27.543Z (6 days ago)
Topics: auto, autolayout, carthage, cocoapods, constraints, dsl, freshos, interface, ios, layout, layouts, nslayoutconstraints, stevia, storyboard, swift, ui, view, visual-format-language, xcode, xib
Language: Swift
Homepage: https://freshos.github.io/SteviaDocs/
Size: 1.2 MB
Stars: 3,383
Watchers: 58
Forks: 214
Open Issues: 21
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-ios - Stevia - Elegant view layout for iOS. (Layout / Other Hardware)
awesome-swift - Stevia - Elegant view layout for iOS. (Libs / Layout)
awesome-swift - Stevia - Elegant view layout for iOS. (Libs / Layout)
awesome-ios-star - Stevia - Elegant view layout for iOS. (Layout / Other Hardware)
fucking-awesome-swift - Stevia - Elegant view layout for iOS. (Libs / Layout)
awesome-swift - Stevia - Write concise Autolayout code ` 📝 7 months ago ` (Layout [🔝](#readme))
awesome - Stevia - 🍃 Concise Autolayout code. (OOM-Leaks-Crash / AutoLayout)

README

        ![Stevia](https://raw.githubusercontent.com/s4cha/Stevia/master/banner.png)

[![Documentation](https://img.shields.io/badge/Read_the-Docs-67ad5c.svg)](https://freshos.github.io/SteviaDocs/)

[![Language: Swift 2, 3, 4, 5 and 6](https://img.shields.io/badge/language-swift%206-f48041.svg?style=flat)](https://developer.apple.com/swift)

![Platform: iOS 8+](https://img.shields.io/badge/platform-iOS%20|%20tvOS-blue.svg?style=flat)

![Swift](https://github.com/freshOS/Stevia/workflows/Swift/badge.svg)

[![Build Status](https://app.bitrise.io/app/4478e29045c5f12e/status.svg?token=pti6g-HVKBUPv9mIR3baIw)](https://app.bitrise.io/app/4478e29045c5f12e)

[![codebeat badge](https://codebeat.co/badges/5b81e292-552c-4cf1-9ccc-89d333ec8b79)](https://codebeat.co/projects/github-com-freshos-stevia-master)

[![License: MIT](http://img.shields.io/badge/license-MIT-lightgrey.svg?style=flat)](https://github.com/s4cha/Stevia/blob/master/LICENSE)

[![GitHub contributors](https://img.shields.io/github/contributors/freshos/Stevia.svg)](https://github.com/freshos/Stevia/graphs/contributors)

[![GitHub tag](https://img.shields.io/github/release/freshos/Stevia.svg)]()



    

        

    





    

        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](#-reason) - [Example](#login-view-example) - [Live Reload](#-live-reload) - [Installation](#️-installation) - [Documentation](#-documentation)

### 🖼 Visual Layout Api

```swift

layout {

    100

    |-email-| ~ 80

    10%

    |-password-forgot-| ~ 80

    >=20

    |login| ~ 80

    0

}

```

### ⛓ Chainable Api

```swift

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

```swift

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](https://github.com/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](http://johnholdsworth.com/injection.html)* 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](http://johnholdsworth.com/injection.html) = #WhoNeedsReactNative?? 🚀



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

Learn more about how to set up live reload [here](https://freshos.github.io/SteviaDocs/liveReload/).

### ⚙️ Installation

`Stevia` is installed via the official [Swift Package Manager](https://swift.org/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](https://freshos.github.io/SteviaDocs/installation/).*

### 📖 Documentation

The following will teach you the gist of Stevia in one minute.  

To go further, you can refer to the full documentation [here](https://freshos.github.io/SteviaDocs/).

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

```swift

email.translatesAutoresizingMaskIntoConstraints = false

password.translatesAutoresizingMaskIntoConstraints = false

login.translatesAutoresizingMaskIntoConstraints = false

addSubview(email)

addSubview(password)

addSubview(login)

```

becomes

```swift

subviews {

    email

    password

    login

}

```

#### 02 - Layout

```swift

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

```swift

layout {

    100

    |-email-| ~ 80

    8

    |-password-| ~ 80

    >=20

    |login| ~ 80

    0

}

```

#### 03 - Styling

```swift

email.borderStyle = .roundedRect

email.autocorrectionType = .no

email.keyboardType = .emailAddress

email.font = UIFont(name: "HelveticaNeue-Light", size: 26)

```

becomes

```swift

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](https://github.com/YannickDot),  [S4cha](https://github.com/S4cha),  [Damien](https://github.com/damien-nd),

[Snowcraft](https://github.com/Snowcraft), [Mathieu-o](https://github.com/Mathieu-o),

[Blaz Merela](https://github.com/b1az),

[Theophane Rupin](https://github.com/trupin),

[Jason Liang](https://github.com/jyliang),

[liberty4me](https://github.com/liberty4me),

[Scott Bates](https://github.com/cowgp),

[Sai](https://github.com/sai-prasanna),

[Mike Gallagher](https://github.com/mgallagher),

[WaterNotWords](https://github.com/waternotwords),

[Mick MacCallum](https://github.com/0x7fffffff),

[Onur Genes](https://github.com/onurgenes)

### 👥 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:

[](https://apps.apple.com/cn/app/mobike-smart-bike-sharing/id1044535426?l=en)

[](https://apps.apple.com/us/app/id1001688546)

[](https://apps.apple.com/us/app/nerdwallet/id1174471607)

[](https://apps.apple.com/in/app/yatra-flights-hotels-cabs/id730234679)

[](https://apps.apple.com/us/app/yummypets-pets/id527910229)

[](https://apps.apple.com/us/app/invitation-maker-ecard/id1446598881)

[](https://apps.apple.com/us/app/logo-maker-create-design/id1455008435)

[](https://apps.apple.com/us/app/smart-cleaner-clean-storage/id1194582243)

[](https://apps.apple.com/us/app/tuner-eclipse-free-guitar-tuner/id1086479185)

- [Mobike](https://apps.apple.com/cn/app/mobike-smart-bike-sharing/id1044535426?l=en) - The world’s first and largest bike sharing system.

- [Brightspace Pulse](https://apps.apple.com/us/app/id1001688546) - Education app

- [NerdWallet](https://apps.apple.com/us/app/nerdwallet/id1174471607) - Credit Score, Budget, Finance

- [Yatra](https://apps.apple.com/in/app/yatra-flights-hotels-cabs/id730234679) - Flights, Hotels & Cabs

- [Yummypets](https://apps.apple.com/us/app/yummypets-pets/id527910229) - The world's cutest social network for pet lovers

- [Invitation Maker](https://apps.apple.com/us/app/invitation-maker-ecard/id1446598881) - Greetings, Invite & Wishes

- [Logo Maker](https://apps.apple.com/us/app/logo-maker-create-design/id1455008435) - Create & Design 10,000+ Professional Logos

- [Smart Cleaner](https://apps.apple.com/us/app/smart-cleaner-clean-storage/id1194582243) - Delete Phone Photos, Contacts

- [Tuner Eclipse](https://apps.apple.com/us/app/tuner-eclipse-free-guitar-tuner/id1086479185) - Free Guitar Tuner

- and many more...

You are using Stevia ? Please let me know @[[email protected]]([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

- Swift 2 -> [v**2.3.0**](https://github.com/freshOS/Stevia/releases/tag/2.3.0)

- Swift 3 -> [v**3.2.0**](https://github.com/freshOS/Stevia/releases/tag/3.2.0)

- Swift 4 -> [v**4.2.0**](https://github.com/freshOS/Stevia/releases/tag/4.2.0)

- Swift 4.1 -> [v**4.3.2**](https://github.com/freshOS/Stevia/releases/tag/4.3.2)

- Swift 4.2 -> [v**4.4.4**](https://github.com/freshOS/Stevia/releases/tag/4.4.4)

- Swift 5.0 -> [v**4.5.0**](https://github.com/freshOS/Stevia/releases/tag/4.5.0)

- Swift 5.1 -> [v**4.7.2**](https://github.com/freshOS/Stevia/releases/tag/4.7.2)

- Swift 5.1.2 -> [v**4.7.3**](https://github.com/freshOS/Stevia/releases/tag/4.7.3)