Fight for the Future
◩ | lagom.js | docs

lagom.jsbeta

◩

a simplistic presentation generator

made by @reimertz

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

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

press p to test

windows are synced

you can see the next slide ➚

(but only if you are in presentation mode)

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

presentation view is locked to the width and height of the main view

synced highlighting

when you need to point something out

synced mouse pointer ☝

just because i can

npm install lagom -g --production

--production to skip devDependencies

documentation

github.com/reimertz/lagom