2026-01-24 15:17:47 +00: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 12:04:52 +00:00
< span class = "version" > v2.0.0</ span >
2026-01-24 15:17:47 +00: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 12:04:52 +00: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 15:17:47 +00: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 12:04:52 +00: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 15:17:47 +00: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 12:04:52 +00: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 15:17:47 +00:00
2026-02-07 12:04:52 +00:00
< p > Press < code > Super+Space</ code > to cycle through layouts: Tiling → Floating → Monocle → Centered Master → Columns → Fibonacci → Tiling</ p >
2026-01-24 15:17:47 +00: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 12:04:52 +00: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 15:17:47 +00: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 12:04:52 +00:00
< td > Tiling, floating, monocle, centered-master, columns, or fibonacci</ td >
2026-01-24 15:17:47 +00: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 12:04:52 +00: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 15:17:47 +00: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 12:04:52 +00:00
# Default layout for new workspaces
# Options: tiling, floating, monocle, centered-master, columns, fibonacci
default = tiling
2026-01-24 15:17:47 +00: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 >
