index.html

<meta charset="UTF-8">
<title>lagom.js</title>
<link rel=stylesheet href="dist/starter/styles/lagom.css">
Fight for the Future
<header> ◩ | lagom.js | <a href="https://github.com/reimertz/lagom">docs</a></header>
<section>
  <center>
    <h1>lagom.js<sup>beta</sup></h1>
    <h2><span style="font-size: 10rem;line-height: 4rem;">◩</span></h2>
    <p>a simplistic presentation generator</p>
    <small>
      <p>made by <a href="//twitter.com/reimertz" target="_blank">@reimertz</a></p>
    </small>
  </center>
  <!--
    this is a note that is
    only visible in presentation mode
  -->
</section>

<section>
  <p>
    <i>lagom (pronounced [ˈlɑ̀ːɡɔm]) is a Swedish word meaning "just the right amount"</i>
  </p>
</section>

<section>
  <h2>a command-line interface</h2>
  <code class="bash">
$ lagom help

lagom create    create a new presentation (default)
lagom server    start live-reloading server
lagom deploy    deploy presentation
lagom help      show this help
  </code>
</section>

<section>
  <h2>a lagom architecture</h2>
  <code class="bash">
styles
  - lagom.css
scripts
  - lagom.js
index.html
  </code>
</section>

<section>
  <h2>a lagom markup</h2>
<code>
&lt;title>lagom.js&lt;/title>
&lt;link rel=stylesheet href="styles/lagom.css">

&lt;header> ◩ | lagom.js&lt;/header>

&lt;section>
  &lt;h1>lagom.js&lt;/h1>
  &lt;big>&lt;h1>◩&lt;/h1>&lt;/big>
  &lt;p>a simplistic presentation generator&lt;/p>
&lt;/section>

&lt;script src="scripts/lagom.js">&lt;/script>

  </code>
</section>

<section>
<h2>one section, one slide</h2>
<code>
&lt;section>&lt;/section>
</code>
</section>

<section>
<h2>elements you are used too</h2>
<code>
&lt;h1>&lt;/h1>
&lt;h2>&lt;/h2>
&lt;h3>&lt;/h3>
&lt;p>&lt;/p>
&lt;ul>
  &lt;li>&lt;/li>
&lt;/ul>
&lt;img>
</code>
</section>

<section>
<h2>old-school modifiers</h2>
<code>
&lt;big>&lt;/big>
&lt;small>&lt;/small>

&lt;left>&lt;/left>
&lt;center>&lt;/center>
&lt;right>&lt;/right>
</code>
</section>

<section>
<h2>a &lt;small> image</h2>
<code>
&lt;small>
  &lt;img src="tim-and-eric-mind-blown.gif">
&lt;/small>
</code>
<small>
  <img src="//www.reactiongifs.com/r/2013/10/tim-and-eric-mind-blown.gif">
</small>
</section>

<section>
<h2>a &lt;big> image</h2>
<code>
&lt;big>
  &lt;img src="tim-and-eric-mind-blown.gif">
&lt;/big>
</code>
<big>
  <img src="//www.reactiongifs.com/r/2013/10/tim-and-eric-mind-blown.gif">
</big>
</section>

<section>
<h2>a &lt;big> &lt;big> image (fullscreen)</h2>
<code>
&lt;section>
  &lt;h2>a &lt;big> &lt;big> image (fullscreen)&lt;/h2>
  &lt;big>
    &lt;big>
      &lt;img src="tim-and-eric-mind-blown.gif">
    &lt;/big>
  &lt;/big>
&lt;/section>
</code>
<big>
  <big>
    <img src="//www.reactiongifs.com/r/2013/10/tim-and-eric-mind-blown.gif">
  </big>
</big>
</section>

<section>
<h2>code blocks</h2>
<code>
  &lt;section>
    &lt;h2>code blocks&lt;/h2>
    &lt;code>
      &lt;section>
        &lt;h2>code blocks&lt;/h2>
        &lt;code>
          &lt;!-- insert meta joke here -->
        &lt;/code>
      &lt;/section>
    &lt;/code>
  &lt;/section>
</code>
</section>

<section>
  <h2>presentation mode</h2>
  <small>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTloiOq2eL_QSfJ7fgpwrgJFfPjGtqOLtAt5FnzSvppp7vVz_dZ">
  </small>
  <p>press p to test</p>
</section>

<section>
  <h2>windows are synced</h2>
</section>

<section>
  <h2>you can see the next slide ➚</h2>
  <small>
    <p>(but only if you are in presentation mode)</p>
  </small>

</section>

<section>
  <h2>add notes to a slide</h2>
  <code>
    &lt;section>
      &lt;h2>add notes to a slide&lt;/h2>
      &lt;!--
        this is a note that is
        only visible in presentation mode
      -->
    &lt;/section>
  </code>
  <!--
    this is a note that is
    only visible in presentation mode
  -->
</section>

<section>
  <h2>matched aspect ratios</h2>
  <p>presentation view is locked to the width and height of the main view </p>
</section>

<section>
  <h2>synced highlighting</h2>
  <p>when you need to point something out</p>
</section>

<section>
  <h2>synced mouse pointer ☝</h2>
  <p><i>just because i can</i></p>
</section>

<section>
  <h2>npm install lagom -g --production</h2>
  <p><small>--production to skip devDependencies</small></p>
</section>

<section>
  <h2>documentation</h2>
  <h3><a href="//github.com/reimertz/lagom">github.com/reimertz/lagom</a></h3>
</section>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-88376407-1', 'auto');
  ga('send', 'pageview');
</script>
<script defer src="dist/starter/scripts/lagom.js"></script>