more docs

docs/examples/styles/background.py

@@ -0,0 +1,29 @@
+from textual.app import App
+from textual.widgets import Static
+
+
+class BackgroundApp(App):
+    CSS = """
+    Static {
+        height:1fr;
+        content-align: center middle;
+        color: white;
+    }    
+    #static1 {
+        background: red;
+    }
+    #static2 {
+        background: rgb(0, 255, 0);
+    }
+    #static3 {
+        background: hsl(240, 100%, 50%);
+    }
+    """
+
+    def compose(self):
+        yield Static("Hello, World!", id="static1")
+        yield Static("Hello, World!", id="static2")
+        yield Static("Hello, World!", id="static3")
+
+
+app = BackgroundApp()

docs/examples/styles/border.py

@@ -0,0 +1,34 @@
+from textual.app import App
+from textual.widgets import Static
+
+
+class BorderApp(App):
+    CSS = """
+    Screen > Static {
+        height:5;
+        content-align: center middle;
+        color: white;
+        margin: 1;
+        box-sizing: border-box;
+    }    
+    #static1 {
+        background: red 20%;
+        border: solid red;
+    }
+    #static2 {
+        background: green 20%;
+        border: dashed green;
+    }
+    #static3 {
+        background: blue 20%;
+        border: tall blue;
+    }
+    """
+
+    def compose(self):
+        yield Static("Hello, World!", id="static1")
+        yield Static("Hello, World!", id="static2")
+        yield Static("Hello, World!", id="static3")
+
+
+app = BorderApp()

docs/examples/styles/color.py

@@ -0,0 +1,28 @@
+from textual.app import App
+from textual.widgets import Static
+
+
+class ColorApp(App):
+    CSS = """
+    Static {
+        height:1fr;
+        content-align: center middle;
+    }    
+    #static1 {
+        color: red;
+    }
+    #static2 {
+        color: rgb(0, 255, 0);
+    }
+    #static3 {
+        color: hsl(240, 100%, 50%)
+    }
+    """
+
+    def compose(self):
+        yield Static("Hello, World!", id="static1")
+        yield Static("Hello, World!", id="static2")
+        yield Static("Hello, World!", id="static3")
+
+
+app = ColorApp()

docs/examples/styles/display.py

@@ -1,24 +1,27 @@
 from textual.app import App
-from textual.widget import Widget
+from textual.widgets import Static
 
 
-class WidthApp(App):
+class DisplayApp(App):
     CSS = """    
-    Screen > Widget {             
-        height: 5;
-        background: blue;        
-        color: white;   
-        border: heavy white;     
+    Screen {
+        background: green;
     }
-    Widget.hidden {
+    Static {             
+        height: 5;        
+        background: white;        
+        color: blue;   
+        border: heavy blue;     
+    }
+    Static.remove {
         display: none;
     }
     """
 
     def compose(self):
-        yield Widget(id="widget1")
-        yield Widget(id="widget2", classes="hidden")
-        yield Widget(id="widget3")
+        yield Static("Widget 1")
+        yield Static("widget 2", classes="remove")
+        yield Static("widget 3")
 
 
-app = WidthApp()
+app = DisplayApp()

docs/examples/styles/height.py

@@ -2,7 +2,7 @@ from textual.app import App
 from textual.widget import Widget
 
 
-class WidthApp(App):
+class HeightApp(App):
     CSS = """    
     Screen > Widget {     
         background: green;
@@ -15,4 +15,4 @@ class WidthApp(App):
         yield Widget()
 
 
-app = WidthApp()
+app = HeightApp()

docs/examples/styles/margin.py

@@ -0,0 +1,27 @@
+from textual.app import App
+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):
+    CSS = """
+   
+    Static {
+        margin: 4 8;  
+        background: blue 20%;  
+    }    
+    
+    """
+
+    def compose(self):
+        yield Static(TEXT)
+
+
+app = MarginApp()

docs/examples/styles/padding.py

@@ -0,0 +1,27 @@
+from textual.app import App
+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):
+    CSS = """
+   
+    Static {
+        padding: 4 8;  
+        background: blue 20%;  
+    }    
+    
+    """
+
+    def compose(self):
+        yield Static(TEXT)
+
+
+app = PaddingApp()

docs/examples/styles/text_style.py

@@ -0,0 +1,41 @@
+from textual.app import App
+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 TextStyleApp(App):
+    CSS = """
+    Screen {
+        layout: horizontal;    
+    }
+    Static {
+        width:1fr;        
+    }    
+    #static1 {
+        background: red 30%;
+        text-style: bold;
+    }
+    #static2 {
+        background: green 30%;
+        text-style: italic;
+    }
+    #static3 {
+        background: blue 30%;
+        text-style: reverse;
+    }
+    """
+
+    def compose(self):
+        yield Static(TEXT, id="static1")
+        yield Static(TEXT, id="static2")
+        yield Static(TEXT, id="static3")
+
+
+app = TextStyleApp()

docs/examples/styles/visibility.py

@@ -0,0 +1,27 @@
+from textual.app import App
+from textual.widgets import Static
+
+
+class VisibilityApp(App):
+    CSS = """    
+    Screen {
+        background: green;
+    }
+    Static {             
+        height: 5;        
+        background: white;        
+        color: blue;   
+        border: heavy blue;     
+    }
+    Static.invisible {
+        visibility: hidden;
+    }
+    """
+
+    def compose(self):
+        yield Static("Widget 1")
+        yield Static("widget 2", classes="invisible")
+        yield Static("widget 3")
+
+
+app = VisibilityApp()