Get Updates By E-mail 

Article Written By:
Johann Dowa

Open Source iOS Library Enabling View Layout With CSS Flexbox Style Syntax


Last month I mentioned an interesting library called Motif allowing UI theming with a CSS style syntax.

Here’s an open source library that allows you to layout your views using the familiar CSS flexbox syntax called Swiftbox from Josh Abernathy.

Swiftbox uses Facebook’s css-layout library to provide the CSS syntax.

Here’s a code snippet from the readme showing an example usage of Swiftbox.

let parent = Node(size: CGSize(width: 300, height: 300),
                  childAlignment: .Center,
                  direction: .Row,
                  children: [
    Node(flex: 75,
         margin: Edges(left: 10, right: 10),
         size: CGSize(width: 0, height: 100)),
    Node(flex: 15,
         margin: Edges(right: 10),
         size: CGSize(width: 0, height: 50)),
    Node(flex: 10,
         margin: Edges(right: 10),
         size: CGSize(width: 0, height: 180)),

let layout = parent.layout()

//{origin={0.0, 0.0}, size={300.0, 300.0}}
//  {origin={10.0, 100.0}, size={195.0, 100.0}}
//  {origin={215.0, 125.0}, size={39.0, 50.0}}
//  {origin={264.0, 60.0}, size={26.0, 180.0}}

You can find SwiftBox on Github here.

Robert Bohnke has also created a library for layoing out views inspired by SwiftBox called FLXView which can be found on Github here.

A nice way to layout views.


Submit A Resource

Have you created a useful tutorial, library or tool for iOS development that you would like to get in front of our 300,000+ monthly page views from iOS developers?

You can submit the url here.

The resources we feel will appeal to our readers the most will be posted on the front page.