# Layout Patterns

URL: /docs/templates/layout-patterns/
Section: templates
Tags: templates, blocks, layout, boost, composition

--------------------------------------------------------------------------------

Overview Chirp templates use Kida's block system: &#123;% extends %&#125;, &#123;% block %&#125;, &#123;% include %&#125;, and &#123;% call %&#125;. This guide covers patterns for block-heavy layouts and when to use each construct. Boost Layout The chirp/layouts/boost.html layout is the recommended base for htmx-boost + SSE apps: &#123;% extends &quot;chirp/layouts/boost.html&quot; %&#125; &#123;% block title %&#125;My App&#123;% end %&#125; &#123;% block content %&#125; &lt;p&gt;Page content goes here.&lt;/p&gt; &#123;% end %&#125; &#123;% block body_after %&#125; &lt;script&gt;/* app-specific JS */&lt;/script&gt; &#123;% end %&#125; Structure: #main — htmx-boost target; gets replaced on navigation body_before — above #main (e.g. nav bar) content — inside #main; page-specific HTML sse_scope — outside #main; SSE connections persist across navigations body_after — scripts, analytics Important: Put sse_scope outside #main. If it's inside content, it gets replaced on navigation and live updates stop. Outer vs Inner Content For SSE swap targets and fragment structure: Outer element — The sse-swap target. Holds padding, border, layout. Stays in the DOM; its innerHTML is replaced. Inner element — The fragment block content. No duplicate padding or border. &lt;!-- Outer: swap target, has padding/border; hx-target=&quot;this&quot; when sse-connect has hx-disinherit --&gt; &lt;div class=&quot;answer&quot; sse-swap=&quot;answer&quot; hx-target=&quot;this&quot;&gt; &lt;!-- Inner: fragment renders this; no extra padding --&gt; &lt;div class=&quot;answer-body&quot; data-copy-text=&quot;...&quot;&gt; &lt;div class=&quot;answer-content prose&quot;&gt;...&lt;/div&gt; &lt;button class=&quot;copy-btn&quot;&gt;Copy&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; Avoid nesting two elements with the same padding/border — it causes double spacing. Keep .copy-btn in normal flow (no position: absolute) so it stays with its answer. When to Use Each Construct Construct Use for &#123;% extends %&#125; Base layout (boost, custom shell). One per template. &#123;% block %&#125; Overridable sections. Child templates fill or extend. &#123;% include %&#125; Reusable partials (headers, footers, cards). No block params. &#123;% call %&#125; Macros with parameters. Use with &#123;% def %&#125;. Blocks define slots; includes pull in full partials; call/def are parameterized components. Block Inheritance Child templates override blocks by redefining them: &#123;% extends &quot;base.html&quot; %&#125; &#123;% block content %&#125; {{ super() }} &lt;p&gt;Additional content after parent block.&lt;/p&gt; &#123;% end %&#125; &#123;&#123; super() &#125;&#125; renders the parent block's content. Omit it to replace entirely. Next Steps Fragments — Block-level rendering for htmx RAG Demo — Full layout example with SSE

--------------------------------------------------------------------------------

Metadata:
- Word Count: 356
- Reading Time: 2 minutes