Files
komorebi/common-workflows/custom-layouts.html
2024-02-14 08:07:28 -08:00

3995 lines
66 KiB
HTML

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="The Tiling Window Manager for Windows">
<link rel="prev" href="mouse-follows-focus.html">
<link rel="next" href="dynamic-layout-switching.html">
<link rel="icon" href="../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.5.2, mkdocs-material-9.3.1">
<title>Custom Layouts - Komorebi</title>
<link rel="stylesheet" href="../assets/stylesheets/main.046329b4.min.css">
<link rel="stylesheet" href="../assets/stylesheets/palette.85d0ee34.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="deep-purple" data-md-color-accent="deep-purple">
<script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script>
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#custom-layouts" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href=".." title="Komorebi" class="md-header__button md-logo" aria-label="Komorebi" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Komorebi
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Custom Layouts
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="deep-purple" data-md-color-accent="deep-purple" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_2" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5c-.84 0-1.65.15-2.39.42L12 2M3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29L3.34 7m.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14L3.36 17M20.65 7l-1.77 3.79a7.023 7.023 0 0 0-2.38-4.15l4.15.36m-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29L20.64 17M12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44L12 22Z"/></svg>
</label>
<input class="md-option" data-md-color-media="(prefers-color-scheme: dark)" data-md-color-scheme="slate" data-md-color-primary="deep-purple" data-md-color-accent="purple" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_2">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31Z"/></svg>
</label>
</form>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<a href="javascript:void(0)" class="md-search__icon md-icon" title="Share" aria-label="Share" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7 0-.24-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91 1.61 0 2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08Z"/></svg>
</a>
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/LGUG2Z/komorebi" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
LGUG2Z/komorebi
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../index.html" class="md-tabs__link">
Komorebi
</a>
</li>
<li class="md-tabs__item">
<a href="../installation.html" class="md-tabs__link">
Getting started
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="komorebi-config-home.html" class="md-tabs__link">
Common workflows
</a>
</li>
<li class="md-tabs__item">
<a href="https://komorebi.lgug2z.com/schema" class="md-tabs__link">
Configuration reference
</a>
</li>
<li class="md-tabs__item">
<a href="../cli/quickstart.html" class="md-tabs__link">
CLI reference
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href=".." title="Komorebi" class="md-nav__button md-logo" aria-label="Komorebi" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
</a>
Komorebi
</label>
<div class="md-nav__source">
<a href="https://github.com/LGUG2Z/komorebi" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
LGUG2Z/komorebi
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_1" >
<div class="md-nav__link md-nav__container">
<a href="../index.html" class="md-nav__link ">
<span class="md-ellipsis">
Komorebi
</span>
</a>
<label class="md-nav__link " for="__nav_1">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_1">
<span class="md-nav__icon md-icon"></span>
Komorebi
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../design.html" class="md-nav__link">
<span class="md-ellipsis">
Design
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Getting started
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Getting started
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../installation.html" class="md-nav__link">
<span class="md-ellipsis">
Installation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../example-configurations.html" class="md-nav__link">
<span class="md-ellipsis">
Example configurations
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" checked>
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
Common workflows
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Common workflows
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="komorebi-config-home.html" class="md-nav__link">
<span class="md-ellipsis">
KOMOREBI_CONFIG_HOME
</span>
</a>
</li>
<li class="md-nav__item">
<a href="active-window-border.html" class="md-nav__link">
<span class="md-ellipsis">
Active Window Border
</span>
</a>
</li>
<li class="md-nav__item">
<a href="remove-gaps.html" class="md-nav__link">
<span class="md-ellipsis">
Remove Gaps
</span>
</a>
</li>
<li class="md-nav__item">
<a href="ignore-windows.html" class="md-nav__link">
<span class="md-ellipsis">
Ignore Windows
</span>
</a>
</li>
<li class="md-nav__item">
<a href="force-manage-windows.html" class="md-nav__link">
<span class="md-ellipsis">
Force Manage Windows
</span>
</a>
</li>
<li class="md-nav__item">
<a href="tray-and-multi-window-applications.html" class="md-nav__link">
<span class="md-ellipsis">
Tray and Multi-Window Applications
</span>
</a>
</li>
<li class="md-nav__item">
<a href="focus-follows-mouse.html" class="md-nav__link">
<span class="md-ellipsis">
Focus Follows Mouse
</span>
</a>
</li>
<li class="md-nav__item">
<a href="mouse-follows-focus.html" class="md-nav__link">
<span class="md-ellipsis">
Mouse Follows Focus
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<a href="custom-layouts.html" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Custom Layouts
</span>
</a>
</li>
<li class="md-nav__item">
<a href="dynamic-layout-switching.html" class="md-nav__link">
<span class="md-ellipsis">
Dynamically Layout Switching
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="https://komorebi.lgug2z.com/schema" class="md-nav__link">
<span class="md-ellipsis">
Configuration reference
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
<span class="md-ellipsis">
CLI reference
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
CLI reference
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../cli/quickstart.html" class="md-nav__link">
<span class="md-ellipsis">
quickstart
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/start.html" class="md-nav__link">
<span class="md-ellipsis">
start
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/stop.html" class="md-nav__link">
<span class="md-ellipsis">
stop
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/check.html" class="md-nav__link">
<span class="md-ellipsis">
check
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/state.html" class="md-nav__link">
<span class="md-ellipsis">
state
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/visible-windows.html" class="md-nav__link">
<span class="md-ellipsis">
visible-windows
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/query.html" class="md-nav__link">
<span class="md-ellipsis">
query
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/subscribe.html" class="md-nav__link">
<span class="md-ellipsis">
subscribe
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/unsubscribe.html" class="md-nav__link">
<span class="md-ellipsis">
unsubscribe
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/log.html" class="md-nav__link">
<span class="md-ellipsis">
log
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/quick-save-resize.html" class="md-nav__link">
<span class="md-ellipsis">
quick-save-resize
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/quick-load-resize.html" class="md-nav__link">
<span class="md-ellipsis">
quick-load-resize
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/save-resize.html" class="md-nav__link">
<span class="md-ellipsis">
save-resize
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/load-resize.html" class="md-nav__link">
<span class="md-ellipsis">
load-resize
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/focus.html" class="md-nav__link">
<span class="md-ellipsis">
focus
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/move.html" class="md-nav__link">
<span class="md-ellipsis">
move
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/minimize.html" class="md-nav__link">
<span class="md-ellipsis">
minimize
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/close.html" class="md-nav__link">
<span class="md-ellipsis">
close
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/force-focus.html" class="md-nav__link">
<span class="md-ellipsis">
force-focus
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/cycle-focus.html" class="md-nav__link">
<span class="md-ellipsis">
cycle-focus
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/cycle-move.html" class="md-nav__link">
<span class="md-ellipsis">
cycle-move
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/stack.html" class="md-nav__link">
<span class="md-ellipsis">
stack
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/resize-edge.html" class="md-nav__link">
<span class="md-ellipsis">
resize-edge
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/resize-axis.html" class="md-nav__link">
<span class="md-ellipsis">
resize-axis
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/unstack.html" class="md-nav__link">
<span class="md-ellipsis">
unstack
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/cycle-stack.html" class="md-nav__link">
<span class="md-ellipsis">
cycle-stack
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/move-to-monitor.html" class="md-nav__link">
<span class="md-ellipsis">
move-to-monitor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/cycle-move-to-monitor.html" class="md-nav__link">
<span class="md-ellipsis">
cycle-move-to-monitor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/move-to-workspace.html" class="md-nav__link">
<span class="md-ellipsis">
move-to-workspace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/move-to-named-workspace.html" class="md-nav__link">
<span class="md-ellipsis">
move-to-named-workspace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/cycle-move-to-workspace.html" class="md-nav__link">
<span class="md-ellipsis">
cycle-move-to-workspace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/send-to-monitor.html" class="md-nav__link">
<span class="md-ellipsis">
send-to-monitor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/cycle-send-to-monitor.html" class="md-nav__link">
<span class="md-ellipsis">
cycle-send-to-monitor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/send-to-workspace.html" class="md-nav__link">
<span class="md-ellipsis">
send-to-workspace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/send-to-named-workspace.html" class="md-nav__link">
<span class="md-ellipsis">
send-to-named-workspace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/cycle-send-to-workspace.html" class="md-nav__link">
<span class="md-ellipsis">
cycle-send-to-workspace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/send-to-monitor-workspace.html" class="md-nav__link">
<span class="md-ellipsis">
send-to-monitor-workspace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/focus-monitor.html" class="md-nav__link">
<span class="md-ellipsis">
focus-monitor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/focus-last-workspace.html" class="md-nav__link">
<span class="md-ellipsis">
focus-last-workspace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/focus-workspace.html" class="md-nav__link">
<span class="md-ellipsis">
focus-workspace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/focus-workspaces.html" class="md-nav__link">
<span class="md-ellipsis">
focus-workspaces
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/focus-monitor-workspace.html" class="md-nav__link">
<span class="md-ellipsis">
focus-monitor-workspace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/focus-named-workspace.html" class="md-nav__link">
<span class="md-ellipsis">
focus-named-workspace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/cycle-monitor.html" class="md-nav__link">
<span class="md-ellipsis">
cycle-monitor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/cycle-workspace.html" class="md-nav__link">
<span class="md-ellipsis">
cycle-workspace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/move-workspace-to-monitor.html" class="md-nav__link">
<span class="md-ellipsis">
move-workspace-to-monitor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/swap-workspaces-with-monitor.html" class="md-nav__link">
<span class="md-ellipsis">
swap-workspaces-with-monitor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/new-workspace.html" class="md-nav__link">
<span class="md-ellipsis">
new-workspace
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/resize-delta.html" class="md-nav__link">
<span class="md-ellipsis">
resize-delta
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/invisible-borders.html" class="md-nav__link">
<span class="md-ellipsis">
invisible-borders
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/global-work-area-offset.html" class="md-nav__link">
<span class="md-ellipsis">
global-work-area-offset
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/monitor-work-area-offset.html" class="md-nav__link">
<span class="md-ellipsis">
monitor-work-area-offset
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/focused-workspace-container-padding.html" class="md-nav__link">
<span class="md-ellipsis">
focused-workspace-container-padding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/focused-workspace-padding.html" class="md-nav__link">
<span class="md-ellipsis">
focused-workspace-padding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/adjust-container-padding.html" class="md-nav__link">
<span class="md-ellipsis">
adjust-container-padding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/adjust-workspace-padding.html" class="md-nav__link">
<span class="md-ellipsis">
adjust-workspace-padding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/change-layout.html" class="md-nav__link">
<span class="md-ellipsis">
change-layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/cycle-layout.html" class="md-nav__link">
<span class="md-ellipsis">
cycle-layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/load-custom-layout.html" class="md-nav__link">
<span class="md-ellipsis">
load-custom-layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/flip-layout.html" class="md-nav__link">
<span class="md-ellipsis">
flip-layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/promote.html" class="md-nav__link">
<span class="md-ellipsis">
promote
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/promote-focus.html" class="md-nav__link">
<span class="md-ellipsis">
promote-focus
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/retile.html" class="md-nav__link">
<span class="md-ellipsis">
retile
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/monitor-index-preference.html" class="md-nav__link">
<span class="md-ellipsis">
monitor-index-preference
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/display-index-preference.html" class="md-nav__link">
<span class="md-ellipsis">
display-index-preference
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/ensure-workspaces.html" class="md-nav__link">
<span class="md-ellipsis">
ensure-workspaces
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/ensure-named-workspaces.html" class="md-nav__link">
<span class="md-ellipsis">
ensure-named-workspaces
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/container-padding.html" class="md-nav__link">
<span class="md-ellipsis">
container-padding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/named-workspace-container-padding.html" class="md-nav__link">
<span class="md-ellipsis">
named-workspace-container-padding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/workspace-padding.html" class="md-nav__link">
<span class="md-ellipsis">
workspace-padding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/named-workspace-padding.html" class="md-nav__link">
<span class="md-ellipsis">
named-workspace-padding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/workspace-layout.html" class="md-nav__link">
<span class="md-ellipsis">
workspace-layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/named-workspace-layout.html" class="md-nav__link">
<span class="md-ellipsis">
named-workspace-layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/workspace-custom-layout.html" class="md-nav__link">
<span class="md-ellipsis">
workspace-custom-layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/named-workspace-custom-layout.html" class="md-nav__link">
<span class="md-ellipsis">
named-workspace-custom-layout
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/workspace-layout-rule.html" class="md-nav__link">
<span class="md-ellipsis">
workspace-layout-rule
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/named-workspace-layout-rule.html" class="md-nav__link">
<span class="md-ellipsis">
named-workspace-layout-rule
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/workspace-custom-layout-rule.html" class="md-nav__link">
<span class="md-ellipsis">
workspace-custom-layout-rule
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/named-workspace-custom-layout-rule.html" class="md-nav__link">
<span class="md-ellipsis">
named-workspace-custom-layout-rule
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/clear-workspace-layout-rules.html" class="md-nav__link">
<span class="md-ellipsis">
clear-workspace-layout-rules
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/clear-named-workspace-layout-rules.html" class="md-nav__link">
<span class="md-ellipsis">
clear-named-workspace-layout-rules
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/workspace-tiling.html" class="md-nav__link">
<span class="md-ellipsis">
workspace-tiling
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/named-workspace-tiling.html" class="md-nav__link">
<span class="md-ellipsis">
named-workspace-tiling
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/workspace-name.html" class="md-nav__link">
<span class="md-ellipsis">
workspace-name
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/toggle-window-container-behaviour.html" class="md-nav__link">
<span class="md-ellipsis">
toggle-window-container-behaviour
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/toggle-pause.html" class="md-nav__link">
<span class="md-ellipsis">
toggle-pause
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/toggle-tiling.html" class="md-nav__link">
<span class="md-ellipsis">
toggle-tiling
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/toggle-float.html" class="md-nav__link">
<span class="md-ellipsis">
toggle-float
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/toggle-monocle.html" class="md-nav__link">
<span class="md-ellipsis">
toggle-monocle
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/toggle-maximize.html" class="md-nav__link">
<span class="md-ellipsis">
toggle-maximize
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/restore-windows.html" class="md-nav__link">
<span class="md-ellipsis">
restore-windows
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/manage.html" class="md-nav__link">
<span class="md-ellipsis">
manage
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/unmanage.html" class="md-nav__link">
<span class="md-ellipsis">
unmanage
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/reload-configuration.html" class="md-nav__link">
<span class="md-ellipsis">
reload-configuration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/watch-configuration.html" class="md-nav__link">
<span class="md-ellipsis">
watch-configuration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/complete-configuration.html" class="md-nav__link">
<span class="md-ellipsis">
complete-configuration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/alt-focus-hack.html" class="md-nav__link">
<span class="md-ellipsis">
alt-focus-hack
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/window-hiding-behaviour.html" class="md-nav__link">
<span class="md-ellipsis">
window-hiding-behaviour
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/cross-monitor-move-behaviour.html" class="md-nav__link">
<span class="md-ellipsis">
cross-monitor-move-behaviour
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/toggle-cross-monitor-move-behaviour.html" class="md-nav__link">
<span class="md-ellipsis">
toggle-cross-monitor-move-behaviour
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/unmanaged-window-operation-behaviour.html" class="md-nav__link">
<span class="md-ellipsis">
unmanaged-window-operation-behaviour
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/float-rule.html" class="md-nav__link">
<span class="md-ellipsis">
float-rule
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/manage-rule.html" class="md-nav__link">
<span class="md-ellipsis">
manage-rule
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/initial-workspace-rule.html" class="md-nav__link">
<span class="md-ellipsis">
initial-workspace-rule
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/initial-named-workspace-rule.html" class="md-nav__link">
<span class="md-ellipsis">
initial-named-workspace-rule
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/workspace-rule.html" class="md-nav__link">
<span class="md-ellipsis">
workspace-rule
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/named-workspace-rule.html" class="md-nav__link">
<span class="md-ellipsis">
named-workspace-rule
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/identify-object-name-change-application.html" class="md-nav__link">
<span class="md-ellipsis">
identify-object-name-change-application
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/identify-tray-application.html" class="md-nav__link">
<span class="md-ellipsis">
identify-tray-application
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/identify-layered-application.html" class="md-nav__link">
<span class="md-ellipsis">
identify-layered-application
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/remove-title-bar.html" class="md-nav__link">
<span class="md-ellipsis">
remove-title-bar
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/toggle-title-bars.html" class="md-nav__link">
<span class="md-ellipsis">
toggle-title-bars
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/identify-border-overflow-application.html" class="md-nav__link">
<span class="md-ellipsis">
identify-border-overflow-application
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/active-window-border.html" class="md-nav__link">
<span class="md-ellipsis">
active-window-border
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/active-window-border-colour.html" class="md-nav__link">
<span class="md-ellipsis">
active-window-border-colour
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/active-window-border-width.html" class="md-nav__link">
<span class="md-ellipsis">
active-window-border-width
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/active-window-border-offset.html" class="md-nav__link">
<span class="md-ellipsis">
active-window-border-offset
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/focus-follows-mouse.html" class="md-nav__link">
<span class="md-ellipsis">
focus-follows-mouse
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/toggle-focus-follows-mouse.html" class="md-nav__link">
<span class="md-ellipsis">
toggle-focus-follows-mouse
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/mouse-follows-focus.html" class="md-nav__link">
<span class="md-ellipsis">
mouse-follows-focus
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/toggle-mouse-follows-focus.html" class="md-nav__link">
<span class="md-ellipsis">
toggle-mouse-follows-focus
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/ahk-library.html" class="md-nav__link">
<span class="md-ellipsis">
ahk-library
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/ahk-app-specific-configuration.html" class="md-nav__link">
<span class="md-ellipsis">
ahk-app-specific-configuration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/pwsh-app-specific-configuration.html" class="md-nav__link">
<span class="md-ellipsis">
pwsh-app-specific-configuration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/format-app-specific-configuration.html" class="md-nav__link">
<span class="md-ellipsis">
format-app-specific-configuration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/fetch-app-specific-configuration.html" class="md-nav__link">
<span class="md-ellipsis">
fetch-app-specific-configuration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/application-specific-configuration-schema.html" class="md-nav__link">
<span class="md-ellipsis">
application-specific-configuration-schema
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/notification-schema.html" class="md-nav__link">
<span class="md-ellipsis">
notification-schema
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/socket-schema.html" class="md-nav__link">
<span class="md-ellipsis">
socket-schema
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/static-config-schema.html" class="md-nav__link">
<span class="md-ellipsis">
static-config-schema
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/generate-static-config.html" class="md-nav__link">
<span class="md-ellipsis">
generate-static-config
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/enable-autostart.html" class="md-nav__link">
<span class="md-ellipsis">
enable-autostart
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../cli/disable-autostart.html" class="md-nav__link">
<span class="md-ellipsis">
disable-autostart
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<a href="https://github.com/LGUG2Z/komorebi/edit/master/docs/common-workflows/custom-layouts.md" title="Edit this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4v-2m10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1 2.1 2.1Z"/></svg>
</a>
<a href="https://github.com/LGUG2Z/komorebi/raw/master/docs/common-workflows/custom-layouts.md" title="View source of this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.15 8.15 0 0 1-1.23-2Z"/></svg>
</a>
<h1 id="custom-layouts">Custom Layouts</h1>
<p>Particularly for users of ultrawide monitors, traditional tiling layouts may
not seem like the most efficient use of screen space. If you feel this is the
case with any of the default layouts, you are also welcome to create your own
custom layouts and save them as JSON or YAML.</p>
<p>If you're not comfortable writing the layouts directly in JSON or YAML, you can
use the <a href="https://lgug2z.github.io/komorebi-custom-layout-generator/">komorebi Custom Layout
Generator</a> to
interactively define a custom layout, and then copy the generated JSON content.</p>
<p>Custom layouts can be loaded on the current workspace or configured for a
specific workspace in the <code>komorebi.json</code> configuration file.</p>
<pre><code class="language-json">{
&quot;monitors&quot;: [
{
&quot;workspaces&quot;: [
{
&quot;name&quot;: &quot;personal&quot;,
&quot;custom_layout&quot;: &quot;C:/Users/LGUG2Z/my-custom-layout.json&quot;
},
]
}
]
}
</code></pre>
<p>The fundamental building block of a custom <em>komorebi</em> layout is the Column.</p>
<p>Columns come in three variants:</p>
<ul>
<li><strong>Primary</strong>: This is where your primary focus will be on the screen most of
the time. There must be exactly one Primary Column in any custom layout.
Optionally, you can specify the percentage of the screen width that you want
the Primary Column to occupy.</li>
<li><strong>Secondary</strong>: This is an optional column that can either be full height of
split horizontally into a fixed number of maximum rows. There can be any
number of Secondary Columns in a custom layout.</li>
<li><strong>Tertiary</strong>: This is the final column where any remaining windows will be
split horizontally into rows as they get added.</li>
</ul>
<p>If there is only one window on the screen when a custom layout is selected,
that window will take up the full work area of the screen.</p>
<p>If the number of windows is equal to or less than the total number of columns
defined in a custom layout, the windows will be arranged in an equal-width
columns.</p>
<p>When the number of windows is greater than the number of columns defined in the
custom layout, the windows will begin to be arranged according to the
constraints set on the Primary and Secondary columns of the layout.</p>
<p>Here is an example custom layout that can be used as a starting point for your
own:</p>
<pre><code class="language-yaml">- column: Secondary
configuration: !Horizontal 2 # max number of rows
- column: Primary
configuration: !WidthPercentage 50 # percentage of screen
- column: Tertiary
configuration: Horizontal
</code></pre>
<!-- TODO: Record a new video -->
<p><a href="https://www.youtube.com/watch?v=SgmBHKEOcQ4"><img alt="Watch the tutorial video" src="https://img.youtube.com/vi/SgmBHKEOcQ4/hqdefault.jpg" /></a></p>
</article>
</div>
<script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var tab,labels=set.querySelector(".tabbed-labels");for(tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="mouse-follows-focus.html" class="md-footer__link md-footer__link--prev" aria-label="Previous: Mouse Follows Focus" rel="prev">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Previous
</span>
<div class="md-ellipsis">
Mouse Follows Focus
</div>
</div>
</a>
<a href="dynamic-layout-switching.html" class="md-footer__link md-footer__link--next" aria-label="Next: Dynamically Layout Switching" rel="next">
<div class="md-footer__title">
<span class="md-footer__direction">
Next
</span>
<div class="md-ellipsis">
Dynamically Layout Switching
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright &copy; 2020-Present LGUG2Z
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "..", "features": ["content.action.edit", "content.action.view", "content.code.copy", "content.tabs.link", "navigation.footer", "navigation.indexes", "navigation.sections", "navigation.tabs", "navigation.top", "navigation.tracking", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../assets/javascripts/workers/search.dfff1995.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../assets/javascripts/bundle.dff1b7c8.min.js"></script>
</body>
</html>