Basic CSS for counter example

Author: darrenburns

docs/examples/guide/widgets/bindings.py renamed to docs/examples/guide/widgets/calculator.py

@@ -1,15 +1,15 @@
 from textual.app import App, ComposeResult
 from textual.binding import Binding
 from textual.reactive import reactive
-from textual.widgets import Static
+from textual.widgets import Footer, Static
 
 
 class Counter(Static, can_focus=True):
     """A counter that can be incremented and decremented by pressing keys."""
 
     BINDINGS = [
-        Binding("up", "change_count(1)", "Increment"),
-        Binding("down", "change_count(-1)", "Decrement"),
+        Binding("up,k", "change_count(1)", "Increment"),
+        Binding("down,j", "change_count(-1)", "Decrement"),
     ]
 
     count = reactive(0)
@@ -22,9 +22,12 @@ def action_change_count(self, amount: int) -> None:
 
 
 class CalculatorApp(App[None]):
+    CSS_PATH = "calculator.tcss"
+
     def compose(self) -> ComposeResult:
         yield Counter()
         yield Counter()
+        yield Footer()
 
 
 if __name__ == "__main__":

docs/examples/guide/widgets/calculator.tcss

@@ -0,0 +1,12 @@
+Counter {
+    background: $panel-darken-1;
+    padding: 1 2;
+    color: $text-muted;
+
+    &:focus {
+        background: $primary;
+        color: $text;
+        text-style: bold;
+        outline-left: thick $accent;
+    }
+}