A Yeoman generator for HTML 5 slideshows
| Tags: front-end
TL;DR: I released an scaffold for HTML 5 slides. Go grab it here.
Lately I'm doing all my talks in HTML 5, instead of relying on software like Keynote. Why? Well, a lot of them are about front-end and it's just easier to embed examples on it. And publishing them on the web is much more easier and I don't have to rely on sites like Slideshare.
I've been using Bespoke.js to make the slides. Unfortunately it's so modular that its setup can be a bit tricky/tiresome, and I was relying on their official Yeoman generator to scaffold an initial template.
Problem? I didn't like this template:
- The theme system is twisted. It reads an stylesheet and then applies the styles inline with JavaScript with DOM elements. Why? No idea. But it makes modifying the themes very hard and frustrating.
- It uses Stylus for CSS. I prefer other processors such as Sass or Less, or even raw CSS.
- It required both npm and bower. I rather use just one package manager for my projects.
Meet generator-simple-bespoke
I released my template as a Yeoman generator: generator-simple-bespoke. It features:
- Slides with Bespoke.js (using Browserify)
- Choose between raw HTML or Jade
- Choose between raw CSS, Sass or Less
- Automatic rebuilding assets
- Automatic browser reloading
- Deployment to Github pages
- Syntax highligting for source code
To use it, install Yeoman and this generator, then create a new directory for your project, and run Yeoman:
npm -g install yo generator-simple-bespoke
mkdir my-talk
cd my-talk
yo simple-bespoke
Yeoman is an scaffolding tool and I use it to generate my templates. Why using this tool instead of providing a zip file with a blank project? Because it allows me to provide different templates depending on what you want to use.
Enjoy!