Improve documentation overview and example

README.md

@@ -8,11 +8,13 @@
 
 # Layout
 
-Tinder's UIKit Auto Layout API
+Declarative Auto Layout APIs for UIKit
 
 ## Overview
 
-Tinder’s Layout library was introduced into the Tinder iOS codebase in 2017 and has since been used to programmatically define the screens of the Tinder iOS app. Layout is a wrapper around the Apple provided Auto Layout SDK. Layout provides a less verbose syntax which aids in adoption and eases troubleshooting UI layout issues. Projects with large codebases, such as Tinder, use programmatic UI code instead of visual WYSIWYG editors (such as Xcode storyboards) to avoid unmanageable merge conflicts that occur in file formats such as XML (the serialized format of Xcode storyboards).
+Tinder’s Layout library was introduced into the Tinder iOS codebase in 2017 and has since been used to programmatically define the screens of the Tinder iOS app.
+
+Layout is a wrapper around the Apple provided Auto Layout SDK. Layout provides a less verbose syntax which aids in adoption and eases troubleshooting UI layout issues. Projects with large codebases use programmatic UI code instead of visual WYSIWYG editors (such as Xcode storyboards) to avoid unmanageable merge conflicts that occur in file formats such as XML (the serialized format of Xcode storyboards).
 
 Code written with Layout is declarative in nature such that it is easy to visualize the UI layout that the code represents. Layout does not limit the available Auto Layout capabilities in any way, which can readily be used along with the Layout API. In recent years, mobile platforms have seen the introduction of declarative UI frameworks such as SwiftUI and Jetpack Compose which realize significantly reduced learning curves. Layout takes a similar declarative approach but for the UIKit framework.
 
@@ -33,7 +35,7 @@ Code written with Layout is declarative in nature such that it is easy to visual
 
 ## Usage
 
-The following example demonstrates adding a label, an image view and a button as subviews of a view controller's view.
+The following example demonstrates adding a label, an image view and a button as subviews to a view of a view controller.
 
 ```swift
 override func viewDidLoad() {

Sources/Layout/_Documentation.docc/Info.plist

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDisplayName</key>
+	<string>Layout</string>
+	<key>CFBundleIdentifier</key>
+	<string>com.tinder.layout</string>
+	<key>CFBundleVersion</key>
+	<string>0.0.0</string>
+</dict>
+</plist>

Sources/Layout/_Documentation.docc/Nodes.md

@@ -0,0 +1,27 @@
+# ``Layout``
+
+Declarative Auto Layout APIs for UIKit
+
+Layout is a wrapper around the Apple provided Auto Layout SDK. Layout provides a less verbose syntax which aids in adoption and eases troubleshooting UI layout issues. Projects with large codebases use programmatic UI code instead of visual WYSIWYG editors (such as Xcode storyboards) to avoid unmanageable merge conflicts that occur in file formats such as XML (the serialized format of Xcode storyboards).
+
+Code written with Layout is declarative in nature such that it is easy to visualize the UI layout that the code represents. Layout does not limit the available Auto Layout capabilities in any way, which can readily be used along with the Layout API. In recent years, mobile platforms have seen the introduction of declarative UI frameworks such as SwiftUI and Jetpack Compose which realize significantly reduced learning curves. Layout takes a similar declarative approach but for the UIKit framework.
+
+The following example demonstrates adding a label, an image view and a button as subviews to a view of a view controller.
+
+```swift
+override func viewDidLoad() {
+    super.viewDidLoad()
+    view.layout {
+        label
+            .toSafeArea([.top])
+            .center(.horizontal)
+        imageView
+            .toSideEdges(inset: 20)
+            .height(constant: 200)
+        button
+            .center(.horizontal)
+    }
+    .vertical([label, imageView, button], spacing: 50)
+    .activate()
+}
+```