Easier Layouts with Stacks

Mobile, Game, and Web Development

Apple developers have been using constraint-based layouts from the beginning. Based on Cassowary, you use linear equalities and inequalities, and the system will adhere to the guidelines you set. While constraints are a powerful way to manage layout, Apple realized it is tedious to set them up for every layout and offered a higher-level way to create layouts using AutoLayout and what’s called a UIStackView. Fast forward to the release of SwiftUI, and they now offer even simpler layout primitives called Stacks.

On the opposite side of mobile, Android uses what is called LinearLayout. They also offer developers constraint-based layouts using ConstraintLayout, among others. If you are a Unity developer, you may be using their version of AutoLayout or simpler primitives like Horizontal/Vertical Layout Groups.

Moving over to the web, when CSS was first created, Cassowary’s constraint system was considered, but because the focus was on creating simple text documents at that time, it did not make it into the spec. Thankfully, about a decade later, we saw the introduction of Flexbox. CSS developers could finally center elements reliably!

Design tools

We’ve looked at how development frameworks approach layout, but what about design tools?

Similar to how Apple simplified constraint-based layouts with Stacks. We can see similarities in design tools like Figma and Sketch. Both of these tools started with constraint systems and have since added the ability to do AutoLayout in Figma’s case or SmartLayout in Sketch’s case which is similar to Apple and Android in their own ways.

Another tool that saw the limelight for a brief moment called Subform had a great approach to layout that used a custom engine that incorporated Stacks. Finally, we can see newer tools like FramerX adopting their version of a Stack primitive.

Parent controlled layout

All of the approaches we’ve looked at use various APIs to control layout, but they all have one thing in common, and that is the parent is responsible for managing layout. Most importantly, concerns like spacing are controlled by the parent. This allows children to be repositioned and reconfigured easily without those concerns being baked into the child’s abstraction.

Summary

With the convergence of language around single-dimensional layouts, the web is increasingly becoming an outlier. While the web will never replace Flexbox with Stacks, we can take inspiration from these simplified interfaces used throughout the industry. In a future post, we’ll look at how we can apply these concepts to CSS and transform the way we manage layout on the web.