Fight for the Future
a simplistic presentation generator made by @reimertz
lagom (pronounced [ˈlɑ̀ːɡɔm]) is a Swedish word meaning "just the right amount"
press p to test (but only if you are in presentation mode) presentation view is locked to the width and height of the main view when you need to point something out just because i can --production to skip devDependencieslagom.jsbeta
◩
a command-line interface
$ lagom help
lagom create create a new presentation (default)
lagom server start live-reloading server
lagom deploy deploy presentation
lagom help show this help
a lagom architecture
styles
- lagom.css
scripts
- lagom.js
index.html
a lagom markup
<title>lagom.js</title>
<link rel=stylesheet href="styles/lagom.css">
<header> ◩ | lagom.js</header>
<section>
<h1>lagom.js</h1>
<big><h1>◩</h1></big>
<p>a simplistic presentation generator</p>
</section>
<script src="scripts/lagom.js"></script>
one section, one slide
<section></section>
elements you are used too
<h1></h1>
<h2></h2>
<h3></h3>
<p></p>
<ul>
<li></li>
</ul>
<img>
old-school modifiers
<big></big>
<small></small>
<left></left>
<center></center>
<right></right>
a <small> image
<small>
<img src="tim-and-eric-mind-blown.gif">
</small>
a <big> image
<big>
<img src="tim-and-eric-mind-blown.gif">
</big>
a <big> <big> image (fullscreen)
<section>
<h2>a <big> <big> image (fullscreen)</h2>
<big>
<big>
<img src="tim-and-eric-mind-blown.gif">
</big>
</big>
</section>
code blocks
<section>
<h2>code blocks</h2>
<code>
<section>
<h2>code blocks</h2>
<code>
<!-- insert meta joke here -->
</code>
</section>
</code>
</section>
presentation mode
windows are synced
you can see the next slide ➚
add notes to a slide
<section>
<h2>add notes to a slide</h2>
<!--
this is a note that is
only visible in presentation mode
-->
</section>
matched aspect ratios
synced highlighting
synced mouse pointer ☝
npm install lagom -g --production
documentation
github.com/reimertz/lagom