In recent years, there has been a proliferation of JavaScript presentation frameworks. These frameworks use HTML5, CSS3, and JavaScript to create presentation slides that can be viewed in any modern web browser. Gone are the days of being tied to using PowerPoint, nowadays there are a plethora of tools to choose from when it comes to creating a presentation.
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.
Bespoke.js
Mark Dalgleish's Bespoke.js is a super lightweight presentation framework (released under an MIT License) that can be expanded by plugins. The minimized version of the core library is only (approximately) one kilobyte. This core library provides enough features needed to create a basic presentation, while a large number of plugins provide a wide variety of extra features. Granted, you are almost guaranteed to need at least one plugin because navigating a presentation using keyboard input is a function provided a plugin. That said, Bespoke.js plus the keyboard input plugin is still far smaller than most JavaScript presentation frameworks.
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.
Bespoke.js plugins and themes, as well as Bespoke.js itself, can be installed using node.js's npm or Twitter's Bower.
To install Bespoke.js or a plugin using npm:
npm install bespoke or npm install bespoke-[plugin]
To install Bespoke.js or a plugin using bower:
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.
Bespoke Generator
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.
2. Once 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:
mkdir presentation-directory
cd presentation-directory
Then start Bespoke Generator and create your presentation by running:
yo bespoke
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 scripts/main.js file is where you can edit the JavaScript for your presentation.
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 dist sub-directory): gulp
To push to GitHub Pages: gulp deploy
To start a local server for testing: gulp serve
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.
Strut
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.
Strut's creator, Matthew Crinklaw-Vogt, has released Strut under the GNU Affero General Public License, Version 3.
Do you have a favorite JavaScript presentation framework? If so, share it in the comments below.
2 Comments