How to use Bespoke.js, a presentation framework
3 tools to make creating presentations easy
There are many different presentation frameworks you can choose from, each with its own strengths and weaknesses. Last year, Opensource.com Community Moderator Luis Ibáñez covered reveal.js, a very nice framework that creates wonderful, but rather traditional, presentations. A few months ago, I wrote about impress.js, which creates Prezi-like presentations that rotate, zoom, and scale in three dimensions. However, impress.js is a very complex tool to use. Today, I am going to share with you Bespoke.js, a presentation framework that sits at the opposite end of the complexity scale.
The official Bespoke.js plugins provide a wide variety of features. In addition to the aforementioned plugin for keyboard interaction, there are plugins for touch input, responsive scaling, animated bullet lists, syntax highlighting for code examples, and several other advanced features. There are also two official Bespoke.js themes (which are basically plugins that change how presentations are displayed), Cube, and Voltaire. Both themes are polished and not too flashy, though you might want to change the colors to match your needs, but they are both perfectly usable as is.
To install Bespoke.js or a plugin using
npm install bespoke or
npm install bespoke-[plugin]
To install Bespoke.js or a plugin using
bower install bespoke.js or
bower install bespoke-[plugin]
It is also possible to get Bespoke.js and its plugins by cloning the projects' GitHub repositories, or by downloading the files from the projects' GitHub pages. However, there is a much easier way to get started, the Bespoke.js Generator project.
The quickest way to start making a Bespoke.js presentation is to use Bespoke.js Generator. The generator will allow you to set the title of your presentation and will walk you through a series of questions about which plugins you would like to use. It will then automatically download all the required Bower components and Node.js modules. After the generator is done, you will be able to start editing your presentation.
To install the Bespoke.js Generator:
1. If you don't have
npm installed, download and install it from the node.js site, or by installing
npm using your distribution's package manager.
npm is installed, run:
npm install -g generator-bespoke using an account with sufficient privileges to install software packages (e.g., root.)
To create a presentation, make a new directory and then change to that directory:
Then start Bespoke Generator and create your presentation by running:
All the files you need to edit will be located in the
src sub-directory. The basic structure and content of a Bespoke.js presentation are created by editing the Jade markup in the
index.jade file. Styles are edited by modifying the
styles/main.styl file, which makes use of Stylus to make writing CSS rules easier. Finally, the
To build your presentation, or to create a local server with LiveReload, you will use gulp.js. The following commands will allow you to build a static copy of presentation, start a local server, or push your project to GitHub Pages (assuming the presentation is already set up as a Git repository with 'origin' pointing to GitHub.)
To build a static site (the files end up in the
To push to GitHub Pages:
To start a local server for testing:
For advanced users who want to create plugins and themes, the Bespoke.js Plugin Generator and Bespoke.js Theme Generator are also available. Like all of the other official Bespoke.js projects, they are released under an MIT License.
I previously covered Strut in my article about impress.js, but it can also create Bespoke.js presentations. Strut is a web-based presentation creation tool that behaves very much like traditional presentation software. While not as feature complete as standalone presentation software (e.g., PowerPoint), Strut has more than enough features to make creating a presentation a quick and easy process. The left side of the interface lets you create and sort slides. The toolbar at the top of the screen lets you add text, shapes, and images, as well as embed videos and websites. You can quickly and easily change the background color of a single slide or all the slides at once. It is also possible to change the background color for the canvas behind the slides in the same manner. For power users, Strut supports adding custom CSS classes to objects and lets you write new CSS rules from inside Strut. It is also possible to add text to a slide using Markdown syntax, for users that prefer writing out a presentation instead of using drag and drop tools.
The only difference between creating a impress.js presentation and a Bespoke.js presentation in Strut is what happens when you go into Strut's overview mode. For impress.js it allows you to position and rotate the slides on a 3D canvas, while the overview mode for Bespoke.js lets you select from several side transitions. There are eight different transitions ranging from a simple fade between slides to coverflow and rotating cube options. All the transitions are nice and rather understated. Using any of them would bring a little polish to a presentation without being so flashy that the transitions end up distracting from the presentation's content.
You can try out Strut using the example site, or you can clone or download the project from GitHub and build Strut to install on your own server (or run it locally) using Grunt. However, a new version of Strut—Strut2.0—is being developed in a private repository and should be publicly available in early October, so keep an eye out for that.