From 49e10802796cd522c9f371071d67e02e875c98d8 Mon Sep 17 00:00:00 2001 From: Will McGugan Date: Thu, 18 May 2023 10:03:26 +0100 Subject: [PATCH] update howto --- docs/how-to/design-a-layout.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/how-to/design-a-layout.md b/docs/how-to/design-a-layout.md index 3a8fe689b..5123e574a 100644 --- a/docs/how-to/design-a-layout.md +++ b/docs/how-to/design-a-layout.md @@ -162,6 +162,7 @@ Let's set the width of the columns to 32. We also want to reduce the height of each "tweet". In the real app, you might set the height to "auto" so it fits the content, but lets set it to 5 lines for now. +Here's the final example and a reminder of the sketch. === "layout06.py" @@ -174,11 +175,16 @@ In the real app, you might set the height to "auto" so it fits the content, but ```{.textual path="docs/examples/how-to/layout06.py" columns="100" lines="32"} ``` -You should see from the output that we have fixed width columns that will scroll horizontally. -You can also scroll the "tweets" in each column vertically. +=== "Sketch" + +
+ --8<-- "docs/images/how-to/layout.excalidraw.svg" +
+ + +A layout like this is a great starting point. +In a real app, you would start replacing each of the placeholders with [builtin](../widget_gallery.md) or [custom](../guide/widgets.md) widgets. -This last example is a relatively complete design. -There are plenty of things you might want to tweak, but this contains all the elements you might need. ## Summary