new align

docs/examples/guide/layout/center_layout.css

@@ -1,21 +0,0 @@
-Screen {
-    layout: center;
-}
-
-#bottom {
-    width: 20;
-    height: 20;
-    background: red;
-}
-
-#middle {
-    width: 26;
-    height: 12;
-    background: green;
-}
-
-#top {
-    width: 32;
-    height: 6;
-    background: blue;
-}

docs/examples/guide/layout/center_layout.py

@@ -1,16 +0,0 @@
-from textual.app import App, ComposeResult
-from textual.widgets import Static
-
-
-class CenterLayoutExample(App):
-    CSS_PATH = "center_layout.css"
-
-    def compose(self) -> ComposeResult:
-        yield Static("One", id="bottom")
-        yield Static("Two", id="middle")
-        yield Static("Three", id="top")
-
-
-if __name__ == "__main__":
-    app = CenterLayoutExample()
-    app.run()

docs/examples/guide/layout/combining_layouts.py

@@ -1,4 +1,4 @@
-from textual import layout
+from textual.containers import Container, Horizontal, Vertical
 from textual.app import ComposeResult, App
 from textual.widgets import Static, Header
 
@@ -8,19 +8,19 @@ class CombiningLayoutsExample(App):
 
     def compose(self) -> ComposeResult:
         yield Header()
-        yield layout.Container(
-            layout.Vertical(
+        yield Container(
+            Vertical(
                 *[Static(f"Vertical layout, child {number}") for number in range(15)],
                 id="left-pane",
             ),
-            layout.Horizontal(
+            Horizontal(
                 Static("Horizontally"),
                 Static("Positioned"),
                 Static("Children"),
                 Static("Here"),
                 id="top-right",
             ),
-            layout.Container(
+            Container(
                 Static("This"),
                 Static("panel"),
                 Static("is"),
@@ -31,14 +31,6 @@ class CombiningLayoutsExample(App):
             id="app-grid",
         )
 
-    async def on_key(self, event) -> None:
-        await self.dispatch_key(event)
-
-    def key_a(self):
-        print(self.stylesheet.variables["boost"])
-        print(self.stylesheet.variables["boost-lighten-1"])
-        print(self.stylesheet.variables["boost-lighten-2"])
-
 
 if __name__ == "__main__":
     app = CombiningLayoutsExample()

docs/examples/guide/layout/grid_layout1.css

@@ -1,6 +1,6 @@
 Screen {
     layout: grid;
-    grid-size: 3;
+    grid-size: 3 2;
 }
 
 .box {

docs/examples/guide/layout/grid_layout2.py

@@ -3,7 +3,7 @@ from textual.widgets import Static
 
 
 class GridLayoutExample(App):
-    CSS_PATH = "grid_layout1.css"
+    CSS_PATH = "grid_layout2.css"
 
     def compose(self) -> ComposeResult:
         yield Static("One", classes="box")

docs/examples/guide/layout/layers.css

@@ -1,5 +1,5 @@
 Screen {
-    layout: center;
+    align: center middle;
     layers: below above;
 }
 

docs/examples/guide/layout/offset.css

@@ -1,36 +0,0 @@
-Screen {
-    layout: center;
-}
-
-#parent {
-    layout: center;
-    background: #9e9e9e;
-    width: 60;
-    height: 20;
-}
-
-Box {
-    color: auto;
-    width: auto;
-    height: auto;
-    padding: 1 2;
-}
-
-#box1 {
-    background: $primary;
-}
-
-#box2 {
-    background: $secondary;
-    offset: 12 4;
-}
-
-#box3 {
-    background: lightseagreen;
-    offset: -12 -4;
-}
-
-#box4 {
-    background: darkred;
-    offset: -26 10;
-}

docs/examples/guide/layout/offset.py

@@ -1,29 +0,0 @@
-from rich.console import RenderableType
-
-from textual import layout
-from textual.app import App, ComposeResult
-from textual.widgets import Static
-
-
-class Box(Static):
-    def render(self) -> RenderableType:
-        x, y = self.styles.offset
-        return f"{self.id}: offset = ({x}, {y})"
-
-
-class OffsetExample(App):
-    CSS_PATH = "offset.css"
-
-    def compose(self) -> ComposeResult:
-        yield layout.Container(
-            Box(id="box1"),
-            Box(id="box2"),
-            Box(id="box3"),
-            Box(id="box4"),
-            id="parent",
-        )
-
-
-if __name__ == "__main__":
-    app = OffsetExample()
-    app.run()

docs/examples/guide/layout/utility_containers.py

@@ -1,5 +1,5 @@
-from textual import layout
 from textual.app import App, ComposeResult
+from textual.containers import Horizontal, Vertical
 from textual.widgets import Static
 
 
@@ -7,13 +7,13 @@ class UtilityContainersExample(App):
     CSS_PATH = "utility_containers.css"
 
     def compose(self) -> ComposeResult:
-        yield layout.Horizontal(
-            layout.Vertical(
+        yield Horizontal(
+            Vertical(
                 Static("One"),
                 Static("Two"),
                 classes="column",
             ),
-            layout.Vertical(
+            Vertical(
                 Static("Three"),
                 Static("Four"),
                 classes="column",