generator-simple-bespoke

generator-simple-bespoke

Yeoman generator for a simple Bespoke.js setup.

Bespoke.js is a module to create HTML 5 slideshows. It's design is extremely modular, and functionality is usually achieved via plugins. There is an official generator for Yeoman, but I'm not very happy with its setup, so I decided to roll out my own.

Yeoman is a scaffolding tool. It will produce templates for different types of projects, which you can configure.

The slideshow template that is generated features the following:

Installation

Install Yeoman if you don't have it in your system. The generated template uses Gulp to run tasks (build Browserify, publish the slideshow in Github pages) so you will need to install it as well.

npm -g install yo gulp

Install the generator:

npm install generator-simple-bespoke

To build the slideshow, publish it on Github, etc. you will need Gulp as a task runner:

npm install -g gulp

Usage

### Generate the template

Now create an empty directory for your slideshow project, and run Yeoman inside it:

mkdir slides
cd slides
yo simple-bespoke

You will be asked the title of your talk, whether you need syntax highlighting code, etc.

Making the slideshow

You can create a release in a dist directory, ready to be consumed (or deployed via rsync to a server):

gulp dist

While you are writing the presentation, it is usually more convenient to have Gulp automatically rebuild the assets as you are modifying them. You can use the dev task to do this. This will also reload your browser automatically.

gulp dev

To clean up the dist folder and development build files, run:

gulp clean

Deploying to Github Pages

If you want to deploy to Github Pages, you will need to answer Y when prompted and setup a Github repository for this project. Then run:

gulp deploy

About themes

I find that Bespoke.js theme plugins are hard to work with. The way the work is by analysing a stylesheet and then applying those styles, inline, with JavaScript, to elements of the DOM.

This has several disadvantages, such as ruining the CSS cascade and making the theme extremely hard to customise.

This generator does not use that theme system. Instead, a simple stylesheet is provided with barebones functionality (so you can have an actual slideshow). You can add your own styles to this stylesheet.

Changelog

1.0.0:

• First version

License

generator-simple-bespoke is released under the MIT license. Read LICENSE for details.