git.sur5r.net Git - i3/i3/blob - docs/refcard.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5         <title>i3 Reference Card</title>
   6         <link rel="stylesheet" href="refcard_style.css" />
   7         <style type="text/css">
   8                 * { margin: 0; padding: 0; vertical-align: middle; }
   9                 html { font-family: LinuxLibertine, Linux Libertine O, Linux Libertine, serif; font-size: 15px; /* column-count: 3; column-gap: 10px; -moz-column-count: 3; -moz-column-gap: 10px; -webkit-column-count: 3; -webkit-column-gap: 10px; */ }
  10                 body > div { display: inline-block; width: 33%; margin: 0.25%; vertical-align: top; }
  11                 body > div:first-child { margin-left: 0; }
  12                 body > div:last-child { margin-right: 0; }
  13                 #logo { float: left; width: 40px; margin: 7px; }
  14                 header { font-size: 1.1em; text-align: center; }
  15                 h1 { font-size: 1.1em; }
  16                 header a { font-size: 0.7em; }
  17                 header p { margin: 5px 0; font-size: 0.8em; text-align: left; }
  18                 kbd { font-family: LinuxBiolinumKeyboard, Linux Biolinum Keyboard O, Linux Biolinum Keyboard, DejaVu Sans Mono, monospace; font-size: 0.9em; }
  19                 code { font-family: DejaVu Sans Mono, monospace; font-size: 0.8em; }
  20                 section { break-inside: avoid-column; -moz-break-inside: -moz-avoid-column; -webkit-break-inside: avoid-column; }
  21                 h2 { margin: 7px 0 2px; padding: 2px 4px; font-size: 1.1em; font-family: LinuxBiolinum, Linux Biolinum O, Linux Biolinum, sans; background-color: #b3b3b3; }
  22                 table { width: 100%; }
  23                 .i3mod { width: 15px; }
  24                 td:last-child { text-align: right; }
  25                 .ref { font-size: 0.8em; }
  26                 #copyright { margin: 20px 0 15px; font-size: 0.7em; text-align: center; }
  27                 #licence { max-width: 70%; margin: 3px auto; font-size: 0.6em; text-align: right; }
  28         </style>
  29         <style type="text/css" media="print">
  30                 html { font-size: 13px; }
  31         </style>
  32 </head>
  33 <body><div>
  34         <header>
  35                 <img id="logo" src="logo-30.png" alt="" />
  36                 <h1>i3 Reference Card</h1>
  37                 <a href="https://i3wm.org/docs/userguide.html">https://i3wm.org/docs/userguide.html</a>
  38                 <p>
  39                         Throughout this guide, the i3 logo will be used to refer to the configured modifier.
  40                         This is the <kbd></kbd> key (<code>Mod1</code>) by default,
  41                         with super/<kbd></kbd> (<code>Mod4</code>) being a popular alternative.
  42                 </p>
  43         </header>
  44
  45
  46         <section>
  47         <h2>Basics</h2>
  48         <table>
  49                 <tr>
  50                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd></kbd>
  51                         <td>open new terminal
  52                 <tr>
  53                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd>j</kbd>
  54                         <td>focus left
  55
  56                 <tr>
  57                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd>k</kbd>
  58                         <td>focus down
  59
  60                 <tr>
  61                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd>l</kbd>
  62                         <td>focus up
  63
  64                 <tr>
  65                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd>;</kbd>
  66                         <td>focus right
  67                 <tr>
  68                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd></kbd>
  69                         <td>toggle focus mode
  70         </table>
  71         </section>
  72
  73         <section>
  74         <h2>Moving windows</h2>
  75         <table>
  76                 <tr>
  77                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd></kbd> + <kbd>j</kbd>
  78                         <td>move window left
  79                 <tr>
  80                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd></kbd> + <kbd>k</kbd>
  81                         <td>move window down
  82                 <tr>
  83                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd></kbd> + <kbd>l</kbd>
  84                         <td>move window up
  85                 <tr>
  86                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd></kbd> + <kbd>;</kbd>
  87                         <td>move window right
  88         </table>
  89         </section>
  90
  91 </div><div>
  92
  93         <section>
  94         <h2>Modifying windows</h2>
  95         <table>
  96                 <tr>
  97                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd>f</kbd>
  98                         <td>toggle fullscreen
  99                 <tr>
 100                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd>v</kbd>
 101                         <td>split a window vertically
 102                 <tr>
 103                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd>h</kbd>
 104                         <td>split a window horizontally
 105                 <tr>
 106                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd>r</kbd>
 107                         <td>resize mode
 108         </table>
 109         <p class="ref">Look at the “Resizing containers / windows” section of the user guide.</p>
 110         </section>
 111
 112         <section>
 113         <h2>Changing the container layout</h2>
 114         <table>
 115                 <tr>
 116                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd>e</kbd>
 117                         <td>default
 118
 119                 <tr>
 120                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd>s</kbd>
 121                         <td>stacking
 122
 123                 <tr>
 124                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd>w</kbd>
 125                         <td>tabbed
 126         </table>
 127         </section>
 128
 129         <section>
 130         <h2>Floating</h2>
 131         <table>
 132                 <tr>
 133                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd></kbd> + <kbd></kbd>
 134                         <td>toggle floating
 135                 <tr>
 136                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd></kbd>
 137                         <td>drag floating
 138         </table>
 139         </section>
 140
 141
 142         <section>
 143         <h2>Using workspaces</h2>
 144         <table>
 145                 <tr>
 146                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd>0</kbd>-<kbd>9</kbd>
 147                         <td>switch to another workspace
 148                 <tr>
 149                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd></kbd> + <kbd>0</kbd>-<kbd>9</kbd>
 150                         <td>move a window to another workspace
 151         </table>
 152         </section>
 153
 154 </div><div>
 155
 156         <section>
 157         <h2>Opening applications / Closing windows</h2>
 158         <table>
 159                 <tr>
 160                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd>d</kbd>
 161                         <td>open application launcher (dmenu)
 162                 <tr>
 163                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd></kbd> + <kbd>q</kbd>
 164                         <td>kill a window
 165         </table>
 166         </section>
 167
 168         <section>
 169         <h2>Restart / Exit</h2>
 170         <table>
 171                 <tr>
 172                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd></kbd> + <kbd>c</kbd>
 173                         <td>reload the configuration file
 174                 <tr>
 175                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd></kbd> + <kbd>r</kbd>
 176                         <td>restart i3 inplace
 177
 178                 <tr>
 179                         <td><img class="i3mod" src="logo-30.png" alt="" /> + <kbd></kbd> + <kbd>e</kbd>
 180                         <td>exit i3
 181         </section>
 182         </table>
 183
 184
 185         <!-- footer -->
 186         <p id="copyright">
 187                 Copyright © 2012, Michael Stapelberg
 188                 <br />
 189                 All rights reserved
 190                 <br />
 191                 Designed by Zeus Panchenko, updated by Moritz Bandemer
 192         </p>
 193         <p id="licence">
 194                 Permission is granted to copy, distribute and/or modify this document provided
 195                 the copyright notice and this permission notice are preserved on all copies.
 196         </p>
 197 </div></body>
 198 </html>