2026-01-24 16:17:47 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Layouts - DWN Documentation< / title >
< link rel = "stylesheet" href = "css/style.css" >
< / head >
< body >
< button class = "mobile-menu-btn" > Menu< / button >
< div class = "layout" >
< aside class = "sidebar" >
< div class = "sidebar-header" >
< h1 > DWN< / h1 >
2026-02-07 13:04:52 +01:00
< span class = "version" > v2.0.0< / span >
2026-01-24 16:17:47 +01:00
< / div >
< div class = "search-box" >
< input type = "text" class = "search-input" placeholder = "Search docs..." >
< / div >
< nav class = "sidebar-nav" >
< div class = "nav-section" >
< div class = "nav-section-title" > Getting Started< / div >
< a href = "index.html" class = "nav-link" > Introduction< / a >
< a href = "installation.html" class = "nav-link" > Installation< / a >
< a href = "quickstart.html" class = "nav-link" > Quick Start< / a >
< / div >
< div class = "nav-section" >
< div class = "nav-section-title" > User Guide< / div >
< a href = "features.html" class = "nav-link" > Features< / a >
< a href = "shortcuts.html" class = "nav-link" > Keyboard Shortcuts< / a >
< a href = "configuration.html" class = "nav-link" > Configuration< / a >
< a href = "layouts.html" class = "nav-link active" > Layouts< / a >
< a href = "ai-features.html" class = "nav-link" > AI Integration< / a >
< / div >
< div class = "nav-section" >
< div class = "nav-section-title" > API Reference< / div >
< a href = "api-overview.html" class = "nav-link" > API Overview< / a >
< a href = "api-reference.html" class = "nav-link" > API Reference< / a >
< a href = "api-examples.html" class = "nav-link" > API Examples< / a >
< / div >
< div class = "nav-section" >
< div class = "nav-section-title" > Advanced< / div >
< a href = "architecture.html" class = "nav-link" > Architecture< / a >
2026-02-07 13:04:52 +01:00
< a href = "abstraction-layer.html" class = "nav-link" > Abstraction Layer< / a >
< a href = "plugin-development.html" class = "nav-link" > Plugin Development< / a >
2026-01-24 16:17:47 +01:00
< a href = "building.html" class = "nav-link" > Building from Source< / a >
< / div >
< / nav >
< / aside >
< main class = "main-content" >
< div class = "content" >
< div class = "page-header" >
< h1 > Layouts< / h1 >
< p class = "lead" > Understanding DWN's window layout system< / p >
< / div >
< div class = "toc" >
< div class = "toc-title" > On this page< / div >
< ul class = "toc-list" >
< li > < a href = "#overview" > Overview< / a > < / li >
< li > < a href = "#tiling" > Tiling Layout< / a > < / li >
< li > < a href = "#floating" > Floating Layout< / a > < / li >
< li > < a href = "#monocle" > Monocle Layout< / a > < / li >
2026-02-07 13:04:52 +01:00
< li > < a href = "#centered-master" > Centered Master Layout< / a > < / li >
< li > < a href = "#columns" > Columns Layout< / a > < / li >
< li > < a href = "#fibonacci" > Fibonacci Layout< / a > < / li >
< li > < a href = "#grid" > Grid Layout< / a > < / li >
< li > < a href = "#plugin-system" > Plugin System< / a > < / li >
2026-01-24 16:17:47 +01:00
< li > < a href = "#per-workspace" > Per-Workspace Settings< / a > < / li >
< li > < a href = "#shortcuts" > Layout Shortcuts< / a > < / li >
< / ul >
< / div >
< h2 id = "overview" > Overview< / h2 >
2026-02-07 13:04:52 +01:00
< p > DWN provides six layout modes that determine how windows are arranged on screen. Each workspace maintains its own layout settings independently.< / p >
2026-01-24 16:17:47 +01:00
2026-02-07 13:04:52 +01:00
< p > Press < code > Super+Space< / code > to cycle through layouts: Tiling → Floating → Monocle → Centered Master → Columns → Fibonacci → Tiling< / p >
2026-01-24 16:17:47 +01:00
< div class = "alert alert-info" >
< strong > Tip:< / strong > The current layout is shown in the panel with a symbol: < code > []=< / code > for tiling, < code > > < > < / code > for floating, < code > [M]< / code > for monocle.
< / div >
< h2 id = "tiling" > Tiling Layout< / h2 >
< p > The default layout. Windows automatically arrange themselves in a master-stack pattern.< / p >
< h3 > How It Works< / h3 >
< div class = "code-block" >
< pre > < code > +------------------+----------+
| | Window |
| Master | 2 |
| Window +----------+
| 1 | Window |
| | 3 |
+------------------+----------+< / code > < / pre >
< / div >
< ul >
< li > The < strong > master area< / strong > (left) contains the primary window(s)< / li >
< li > The < strong > stack area< / strong > (right) contains secondary windows< / li >
< li > Windows are automatically sized to fill the screen< / li >
< li > No manual positioning required< / li >
< / ul >
< h3 > Master Ratio< / h3 >
< p > Controls the width of the master area relative to the screen.< / p >
< ul >
< li > < code > Super+H< / code > - Decrease master ratio (shrink master area)< / li >
< li > < code > Super+L< / code > - Increase master ratio (expand master area)< / li >
< li > Range: 10% to 90%< / li >
< li > Default: 55%< / li >
< / ul >
< h3 > Master Count< / h3 >
< p > Controls how many windows occupy the master area.< / p >
< ul >
< li > < code > Super+I< / code > - Increase master count< / li >
< li > < code > Super+D< / code > - Decrease master count< / li >
< li > Range: 1 to 10< / li >
< li > Default: 1< / li >
< / ul >
< p > With master count of 2:< / p >
< div class = "code-block" >
< pre > < code > +--------+---------+----------+
| Master | Master | Stack |
| 1 | 2 | 3 |
| | +----------+
| | | Stack |
| | | 4 |
+--------+---------+----------+< / code > < / pre >
< / div >
< h3 > Floating Windows in Tiling< / h3 >
< p > Press < code > Super+F9< / code > to toggle floating mode for a window. Floating windows:< / p >
< ul >
< li > Are exempt from automatic tiling< / li >
< li > Can be freely moved and resized< / li >
< li > Float above tiled windows< / li >
< li > Useful for dialogs, small utilities, reference windows< / li >
< / ul >
< h2 id = "floating" > Floating Layout< / h2 >
< p > Traditional overlapping window management like most desktop environments.< / p >
< h3 > Characteristics< / h3 >
< ul >
< li > Windows maintain their own position and size< / li >
< li > No automatic arrangement< / li >
< li > Drag title bars to move windows< / li >
< li > Drag window edges to resize< / li >
< li > Click to raise windows< / li >
< / ul >
< h3 > Window Controls< / h3 >
< p > In floating mode, windows have full manual control:< / p >
< ul >
< li > < strong > Move< / strong > : Drag the title bar< / li >
< li > < strong > Resize< / strong > : Drag the window border< / li >
< li > < strong > Maximize< / strong > : < code > Alt+F10< / code > or click maximize button< / li >
< li > < strong > Minimize< / strong > : < code > Alt+F9< / code > or click minimize button< / li >
< / ul >
< h2 id = "monocle" > Monocle Layout< / h2 >
< p > Each window takes the full screen. Only one window visible at a time.< / p >
< h3 > Use Cases< / h3 >
< ul >
< li > Focused work on a single application< / li >
< li > Small screens or high window count< / li >
< li > Reading or writing documents< / li >
< li > Video or media playback< / li >
< / ul >
< h3 > Navigation< / h3 >
< ul >
< li > < code > Alt+Tab< / code > - Switch to next window< / li >
< li > < code > Alt+Shift+Tab< / code > - Switch to previous window< / li >
< li > Taskbar click - Switch to specific window< / li >
< / ul >
< div class = "alert alert-info" >
< strong > Note:< / strong > Windows maintain decorations in monocle mode unless fullscreen (< code > Alt+F11< / code > ).
< / div >
2026-02-07 13:04:52 +01:00
< h2 id = "centered-master" > Centered Master Layout< / h2 >
< p > The master window is centered on screen with stack windows divided on left and right sides.< / p >
< h3 > How It Works< / h3 >
< div class = "code-block" >
< pre > < code > +--------+------------------+--------+
| Stack | Master | Stack |
| 1 | Window | 3 |
+--------+ +--------+
| Stack | | Stack |
| 2 | | 4 |
+--------+------------------+--------+< / code > < / pre >
< / div >
< ul >
< li > The < strong > master window< / strong > occupies the center of the screen< / li >
< li > Stack windows are divided between left and right sides< / li >
< li > Odd-numbered stack windows go left, even go right< / li >
< li > Excellent for wide monitors and ultrawide displays< / li >
< / ul >
< h3 > Use Cases< / h3 >
< ul >
< li > Keeping primary work centered while referencing side content< / li >
< li > Video editing with timeline and tools on sides< / li >
< li > Development with editor centered and documentation on sides< / li >
< / ul >
< h2 id = "columns" > Columns Layout< / h2 >
< p > All windows arranged in equal-width vertical columns spanning the full height.< / p >
< h3 > How It Works< / h3 >
< div class = "code-block" >
< pre > < code > +----------+----------+----------+----------+
| | | | |
| Window | Window | Window | Window |
| 1 | 2 | 3 | 4 |
| | | | |
| | | | |
+----------+----------+----------+----------+< / code > < / pre >
< / div >
< ul >
< li > Each window gets an equal-width column< / li >
< li > Windows span the full usable height< / li >
< li > Simple and predictable arrangement< / li >
< / ul >
< h3 > Use Cases< / h3 >
< ul >
< li > Comparing multiple files side-by-side< / li >
< li > Monitoring multiple log files< / li >
< li > Multi-column text editing< / li >
< li > Concurrent terminal sessions< / li >
< / ul >
< h2 id = "fibonacci" > Fibonacci Layout< / h2 >
< p > Windows arranged in a spiral pattern using recursive splitting, inspired by the Fibonacci sequence.< / p >
< h3 > How It Works< / h3 >
< div class = "code-block" >
< pre > < code > +------------------+----------+
| | |
| Window 1 | Window 2 |
| +----+-----+
| | W3 | |
+------------------+----+ W4 |
| Window 5 | |
+-----------------------+-----+< / code > < / pre >
< / div >
< ul >
< li > First window takes half the screen< / li >
< li > Each subsequent window takes half the remaining space< / li >
< li > Alternates between horizontal and vertical splits< / li >
< li > Creates a visually interesting spiral pattern< / li >
< / ul >
< h3 > Use Cases< / h3 >
< ul >
< li > Hierarchical window importance (larger = more important)< / li >
< li > Primary workspace with progressively smaller utilities< / li >
< li > Creative workflows with main canvas and tool windows< / li >
< / ul >
< h2 id = "grid" > Grid Layout< / h2 >
< p > Windows are arranged in a grid pattern with automatic row/column calculation.< / p >
< h3 > How It Works< / h3 >
< div class = "code-block" >
< pre > < code > +----------+----------+----------+
| Window | Window | Window |
| 1 | 2 | 3 |
+----------+----------+----------+
| Window | Window |
| 4 | 5 |
+----------+----------+< / code > < / pre >
< / div >
< ul >
< li > Automatically calculates optimal rows and columns< / li >
< li > Uses square root for balanced grid< / li >
< li > All windows have equal size< / li >
< li > Great for viewing multiple documents simultaneously< / li >
< / ul >
< h3 > Use Cases< / h3 >
< ul >
< li > Comparing multiple documents or files< / li >
< li > Monitoring multiple terminals< / li >
< li > Dashboard-style workflows< / li >
< li > Multi-way video calls< / li >
< / ul >
< h2 id = "plugin-system" > Plugin System (v2.0)< / h2 >
< p > DWN v2.0 introduces a layout plugin system that allows custom layout algorithms to be loaded dynamically or built-in.< / p >
< h3 > Built-in Layouts< / h3 >
< ul >
< li > < strong > tiling< / strong > - Master-stack tiling (default)< / li >
< li > < strong > floating< / strong > - Traditional floating windows< / li >
< li > < strong > monocle< / strong > - Single maximized window< / li >
< li > < strong > centered-master< / strong > - Master centered with stacks on sides< / li >
< li > < strong > columns< / strong > - Equal-width vertical columns< / li >
< li > < strong > fibonacci< / strong > - Spiral recursive splitting< / li >
< li > < strong > grid< / strong > - Grid arrangement< / li >
< / ul >
< h3 > Custom Layouts< / h3 >
< p > Developers can create custom layout plugins using the Layout Plugin API. See < a href = "plugin-development.html" > Plugin Development< / a > for details.< / p >
< div class = "alert alert-info" >
< strong > Plugin API:< / strong > Layouts implement the < code > LayoutPluginInterface< / code > vtable with an < code > arrange()< / code > method that calculates window geometries.
< / div >
2026-01-24 16:17:47 +01:00
< h2 id = "per-workspace" > Per-Workspace Settings< / h2 >
< p > Each workspace maintains independent layout settings:< / p >
< div class = "table-container" >
< table >
< thead >
< tr >
< th > Setting< / th >
< th > Scope< / th >
< th > Description< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > Layout Mode< / td >
< td > Per-workspace< / td >
2026-02-07 13:04:52 +01:00
< td > Tiling, floating, monocle, centered-master, columns, or fibonacci< / td >
2026-01-24 16:17:47 +01:00
< / tr >
< tr >
< td > Master Ratio< / td >
< td > Per-workspace< / td >
< td > Width of master area< / td >
< / tr >
< tr >
< td > Master Count< / td >
< td > Per-workspace< / td >
< td > Windows in master area< / td >
< / tr >
< tr >
< td > Window Floating State< / td >
< td > Per-window< / td >
< td > Individual floating toggle< / td >
< / tr >
< / tbody >
< / table >
< / div >
< p > Example workflow:< / p >
< ul >
< li > Workspace 1: Tiling layout for coding (editor + terminal)< / li >
< li > Workspace 2: Floating layout for design work< / li >
< li > Workspace 3: Monocle layout for focused writing< / li >
2026-02-07 13:04:52 +01:00
< li > Workspace 4: Centered-master for wide monitor development< / li >
< li > Workspace 5: Columns layout for log monitoring< / li >
< li > Workspace 6: Fibonacci for hierarchical work< / li >
2026-01-24 16:17:47 +01:00
< / ul >
< h2 id = "shortcuts" > Layout Shortcuts< / h2 >
< div class = "table-container" >
< table class = "shortcut-table" >
< thead >
< tr >
< th > Shortcut< / th >
< th > Action< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > Super+Space< / code > < / td >
< td > Cycle layout mode< / td >
< / tr >
< tr >
< td > < code > Super+H< / code > < / td >
< td > Shrink master area< / td >
< / tr >
< tr >
< td > < code > Super+L< / code > < / td >
< td > Expand master area< / td >
< / tr >
< tr >
< td > < code > Super+I< / code > < / td >
< td > Increase master count< / td >
< / tr >
< tr >
< td > < code > Super+D< / code > < / td >
< td > Decrease master count< / td >
< / tr >
< tr >
< td > < code > Super+F9< / code > < / td >
< td > Toggle window floating< / td >
< / tr >
< tr >
< td > < code > Alt+F10< / code > < / td >
< td > Toggle maximize< / td >
< / tr >
< tr >
< td > < code > Alt+F11< / code > < / td >
< td > Toggle fullscreen< / td >
< / tr >
< / tbody >
< / table >
< / div >
< h2 > Configuration< / h2 >
< p > Set default layout behavior in < code > ~/.config/dwn/config< / code > :< / p >
< div class = "code-block" >
< pre > < code > [layout]
2026-02-07 13:04:52 +01:00
# Default layout for new workspaces
# Options: tiling, floating, monocle, centered-master, columns, fibonacci
default = tiling
2026-01-24 16:17:47 +01:00
master_ratio = 0.55 # Default master area ratio (0.1-0.9)
master_count = 1 # Default master window count (1-10)
[appearance]
gap = 5 # Gap between tiled windows (0-100)< / code > < / pre >
< / div >
< footer >
< p > DWN Window Manager - retoor < retoor@molodetz.nl> < / p >
< / footer >
< / div >
< / main >
< / div >
< script src = "js/main.js" > < / script >
< / body >
< / html >
