more docs and diagrams

docs/examples/app/event01.py

@@ -18,11 +18,11 @@ class EventApp(App):
     ]
 
     def on_mount(self) -> None:
-        self.styles.background = "darkblue"
+        self.screen.styles.background = "darkblue"
 
     def on_key(self, event: events.Key) -> None:
         if event.key.isdecimal():
-            self.styles.background = self.COLORS[int(event.key)]
+            self.screen.styles.background = self.COLORS[int(event.key)]
 
 
 app = EventApp()

docs/examples/guide/styles/border01.py

@@ -0,0 +1,27 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain."""
+
+
+class BorderApp(App):
+    def compose(self) -> ComposeResult:
+        self.widget = Static(TEXT)
+        yield self.widget
+
+    def on_mount(self) -> None:
+        self.widget.styles.background = "darkblue"
+        self.widget.styles.width = "50%"
+        self.widget.styles.border = ("tall", "yellow")
+
+
+app = BorderApp()
+if __name__ == "__main__":
+    app.run()

docs/examples/guide/styles/box_sizing01.py

@@ -0,0 +1,38 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain."""
+
+
+class BoxSizing(App):
+    def compose(self) -> ComposeResult:
+        self.widget1 = Static(TEXT)
+        yield self.widget1
+        self.widget2 = Static(TEXT)
+        yield self.widget2
+
+    def on_mount(self) -> None:
+        self.widget1.styles.background = "purple"
+        self.widget2.styles.background = "darkgreen"
+        self.widget1.styles.width = 30
+        self.widget2.styles.width = 30
+        self.widget2.styles.height = 6
+        self.widget1.styles.height = 6
+        self.widget2.styles.height = 6
+        self.widget1.styles.border = ("heavy", "white")
+        self.widget2.styles.border = ("heavy", "white")
+        self.widget1.styles.padding = 1
+        self.widget2.styles.padding = 1
+        self.widget2.styles.box_sizing = "content-box"
+
+
+app = BoxSizing()
+if __name__ == "__main__":
+    app.run()

docs/examples/guide/styles/dimensions03.py

@@ -0,0 +1,27 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain."""
+
+
+class DimensionsApp(App):
+    def compose(self) -> ComposeResult:
+        self.widget = Static(TEXT)
+        yield self.widget
+
+    def on_mount(self) -> None:
+        self.widget.styles.background = "purple"
+        self.widget.styles.width = "50%"
+        self.widget.styles.height = "80%"
+
+
+app = DimensionsApp()
+if __name__ == "__main__":
+    app.run()

docs/examples/guide/styles/dimensions04.py

@@ -0,0 +1,30 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain."""
+
+
+class DimensionsApp(App):
+    def compose(self) -> ComposeResult:
+        self.widget1 = Static(TEXT)
+        yield self.widget1
+        self.widget2 = Static(TEXT)
+        yield self.widget2
+
+    def on_mount(self) -> None:
+        self.widget1.styles.background = "purple"
+        self.widget2.styles.background = "darkgreen"
+        self.widget1.styles.height = "2fr"
+        self.widget2.styles.height = "1fr"
+
+
+app = DimensionsApp()
+if __name__ == "__main__":
+    app.run()

docs/examples/guide/styles/margin01.py

@@ -0,0 +1,32 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain."""
+
+
+class MarginApp(App):
+    def compose(self) -> ComposeResult:
+        self.widget1 = Static(TEXT)
+        yield self.widget1
+        self.widget2 = Static(TEXT)
+        yield self.widget2
+
+    def on_mount(self) -> None:
+        self.widget1.styles.background = "purple"
+        self.widget2.styles.background = "darkgreen"
+        self.widget1.styles.border = ("heavy", "white")
+        self.widget2.styles.border = ("heavy", "white")
+        self.widget1.styles.margin = 2
+        self.widget2.styles.margin = 2
+
+
+app = MarginApp()
+if __name__ == "__main__":
+    app.run()

docs/examples/guide/styles/outline01.py

@@ -0,0 +1,27 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain."""
+
+
+class OutlineApp(App):
+    def compose(self) -> ComposeResult:
+        self.widget = Static(TEXT)
+        yield self.widget
+
+    def on_mount(self) -> None:
+        self.widget.styles.background = "darkblue"
+        self.widget.styles.width = "50%"
+        self.widget.styles.outline = ("tall", "yellow")
+
+
+app = OutlineApp()
+if __name__ == "__main__":
+    app.run()

docs/examples/guide/styles/padding01.py

@@ -0,0 +1,27 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain."""
+
+
+class PaddingApp(App):
+    def compose(self) -> ComposeResult:
+        self.widget = Static(TEXT)
+        yield self.widget
+
+    def on_mount(self) -> None:
+        self.widget.styles.background = "purple"
+        self.widget.styles.width = 30
+        self.widget.styles.padding = 2
+
+
+app = PaddingApp()
+if __name__ == "__main__":
+    app.run()

docs/examples/guide/styles/padding02.py

@@ -0,0 +1,27 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+
+TEXT = """I must not fear.
+Fear is the mind-killer.
+Fear is the little-death that brings total obliteration.
+I will face my fear.
+I will permit it to pass over me and through me.
+And when it has gone past, I will turn the inner eye to see its path.
+Where the fear has gone there will be nothing. Only I will remain."""
+
+
+class PaddingApp(App):
+    def compose(self) -> ComposeResult:
+        self.widget = Static(TEXT)
+        yield self.widget
+
+    def on_mount(self) -> None:
+        self.widget.styles.background = "purple"
+        self.widget.styles.width = 30
+        self.widget.styles.padding = (2, 4)
+
+
+app = PaddingApp()
+if __name__ == "__main__":
+    app.run()