You + Stevia =
💡Write concise, readable layouts
🏖Reduce your maintenance time
🎨Compose your styles, CSS-like
🔴Plug Live reload and boost your iteration cycles
🖼 Visual Layout Api
layout( 100, |-email-| ~ 80, 8, |-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
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
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??
Cmd+S and you can dev live in the simulator !
Learn more about how to set up live reload here.
Get started here.
You can find the full documentation here.
Like the project? Offer coffee or support us with a monthly donation and help us continue our activities :)
Become a sponsor and get your logo on our README on Github with a link to your site :)