git.sur5r.net Git - i3/i3.github.io/blob - screenshots/index.html

   1 ---
   2 layout: default
   3 title: Screens
   4 group: Screens
   5 require_jquery: true
   6 javascript: gallery.min.2.js
   7 js_callback: initGallery();
   8 ---
   9 <div id="mask">
  10 </div>
  11
  12 <div id="loading">
  13 </div>
  14
  15 <div id="bigimg">
  16     <div id="maskouter">
  17         <div id="maskinner">
  18             <div id="imgleft">
  19             </div>
  20             <div id="imgright">
  21             </div>
  22             <div id="imgdesc">
  23             <span class="filename">i3-2.png</span>
  24             <span class="description">VIM, MPlayer</span>
  25             </div>
  26         </div>
  27     </div>
  28 </div>
  29
  30 <div id="content">
  31
  32 <h2>Latest Videos</h2>
  33
  34 <div id="screencasts">
  35     <div class="video clearfix">
  36         <a href="http://www.youtube.com/watch?v=Wx0eNaGzAZU" title="Watch i3 screencast v4.1 on YouTube">
  37         <img src="/img/screencast-3.d.thumb.png" width="240" height="150" border="0" alt="Screencast thumbnail" style="float: left">
  38         </a>
  39         <div style="float: left">
  40             <strong>Screencast of v4.1</strong>
  41             <p>
  42             This video (5 min) shows the basic features of i3:
  43             </p>
  44             <ul>
  45                 <li>Layouts, Focus, Moving, Workspaces</li>
  46                 <li>dmenu, Floating Windows, Resizing</li>
  47             </ul>
  48             <p>
  49             <a href="https://www.youtube.com/watch?v=Wx0eNaGzAZU">Watch it on YouTube</a> or <a href="/screenshots/screencast-4.1.mp4">download it (18 MB)</a>.
  50             </p>
  51         </div>
  52     </div>
  53
  54     <br style="clear: both">
  55     <br>
  56
  57     <div class="video clearfix">
  58         <a href="http://www.youtube.com/watch?v=AWA8Pl57UBY" title="Watch i3 container and tree data structure screencast on YouTube">
  59         <img src="/img/screencast-cons.thumb.jpg" width="240" height="135" border="0" alt="containers and tree data structure thumbnail" style="float: left">
  60         </a>
  61         <div style="float: left">
  62             <strong>Screencast: Containers and tree data structure</strong>
  63             <p style="white-space: pre">Explains how i3 works internally so
  64 that you can fully understand what's going on. I expect you to have
  65 watched the screencast on v4.1 already.</p>
  66             <p>
  67             <a href="https://www.youtube.com/watch?v=AWA8Pl57UBY">Watch it on YouTube</a>
  68             </p>
  69         </div>
  70     </div>
  71
  72     <br style="clear: both">
  73     <br>
  74
  75     <div class="video clearfix">
  76         <a href="http://www.youtube.com/watch?v=QnYN2CTb1hM" title="Watch i3 google tech talk on YouTube">
  77         <img src="/img/techtalk.thumb.jpg" width="240" height="135" border="0" alt="tech talk thumbnail" style="float: left">
  78         </a>
  79         <div style="float: left">
  80             <strong>Google Tech Talk about i3</strong>
  81             <p style="white-space: pre">This video (1 hour) is an introduction to i3, explaining our
  82 motivation, a bit of history, some cool features and how we
  83 develop.</p>
  84             <p>
  85             <a href="https://www.youtube.com/watch?v=QnYN2CTb1hM">Watch it on YouTube</a>
  86             </p>
  87         </div>
  88     </div>
  89
  90     <br style="clear: both">
  91     <br>
  92
  93     <div class="video clearfix">
  94         <a href="https://www.youtube.com/watch?v=j1I63wGcvU4&list=PL5ze0DjYv5DbCv9vNEzFmP6sU7ZmkGzcf" title="Watch screen cast series by Alex Booker on YouTube">
  95         <img src="/img/i3-alex-booker.thumb.jpg" width="240" height="135" border="0" alt="screen cast series thumbnail" style="float: left">
  96         </a>
  97         <div style="float: left">
  98             <strong>Series of screencasts on installing, using and configuring i3</strong>
  99             <p style="white-space: pre">This three-part series of screencasts created by Alex Booker
 100 illustrates what i3 is, how to use it, how to configure it, and
 101 how to customize its appearance. (1 hour, 40 minutes)</p>
 102             <p>
 103             <a href="https://www.youtube.com/watch?v=j1I63wGcvU4&list=PL5ze0DjYv5DbCv9vNEzFmP6sU7ZmkGzcf">Watch it on YouTube</a>
 104             </p>
 105         </div>
 106     </div>
 107
 108 </div>
 109
 110 <h2>Screenshots</h2>
 111
 112 <p>
 113 To get a quick impression of i3, have a look at these screenshots.
 114 </p>
 115
 116 <div class="screenshots clearfix">
 117 {% include screenshot.html link="/screenshots/i3-1.png" thumb="/screenshots/i3-1.thumb.png" description="Vimperator, VIM, MPlayer, dzen2" %}
 118 {% include screenshot.html link="/screenshots/i3-2.png" thumb="/screenshots/i3-2.thumb.png" description="Vimperator, VIM, xpdf, bc" %}
 119 {% include screenshot.html link="/screenshots/i3-3.png" thumb="/screenshots/i3-3.thumb.png" description="PCManFM, ROXTerm, evince" %}
 120 <br>
 121 {% include screenshot.html link="/screenshots/i3-4.png" thumb="/screenshots/i3-4.thumb.png" description="i3 logo out of terminals" %}
 122 {% include screenshot.html link="/screenshots/i3-6.png" thumb="/screenshots/i3-6.thumb.png" description="VIM, zsh, i3status (FreeBSD)" %}
 123 {% include screenshot.html link="/screenshots/i3-7.png" thumb="/screenshots/i3-7.thumb.png" description="GIMP, urxvt (both floating)" %}
 124 <br>
 125 {% include screenshot.html link="/screenshots/i3-5.png" thumb="/screenshots/i3-5.thumb.png" description="mc, xosview, MPlayer, irssi, gajim" %}
 126 {% include screenshot.html link="/screenshots/i3-8.jpg" thumb="/screenshots/i3-8.thumb.jpg" description="git, synergy, htop, urxvt" %}
 127 {% include screenshot.html link="/screenshots/i3-9.png" thumb="/screenshots/i3-9.thumb.png" description="VIM, git, MPlayer, i3bar" %}
 128 <br>
 129 {% include screenshot.html link="/screenshots/i3-10.png" thumb="/screenshots/i3-10.thumb.png" description="Right-to-left titles" %}
 130 {% include screenshot.html link="/screenshots/i3-11.jpg" thumb="/screenshots/i3-11.thumb.jpg" description="dzen2, VIM, bash, top" %}
 131 {% include screenshot.html link="/screenshots/i3-13.png" thumb="/screenshots/i3-13.thumb.png" description="i3pystatus, mpd, watson time tracker, nerd fonts" %}
 132 </div>
 133
 134 </div>