Skip to content
πŸ‘¨β€πŸ’»οΈ A Bespoke.js Theme that uses x-gif and a few other things for impact. This is my own base-line for presentations.
CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/src
dist
lib
.editorconfig
.eslintrc
.gitattributes
.gitignore
.nvmrc
.travis.yml
CONTRIBUTING.md
HISTORY.md
LICENSE
README.md
bower.json
gulpfile.js
package-lock.json
package.json

README.md

Build Status

bespoke-theme-atomantic

A theme for Bespoke.js β€” View demo

Download

Download the production version or the development version, or use a package manager.

Usage

Basic

This theme is shipped in a UMD format, meaning that it is available as a CommonJS/AMD module or browser global.

For example, when using CommonJS modules:

var bespoke = require('bespoke'),
  atomantic = require('bespoke-theme-atomantic');

bespoke.from('#presentation', [
  atomantic()
]);

When using browser globals:

bespoke.from('#presentation', [
  bespoke.themes.atomantic()
]);

X-Gif

This theme utilizes x-gif for awesome background gif control. If you would like to include gifs and have control over speed, iterations, ping-pong, n-times, and wait-for-gif content, you will need to do the following in your bespoke.js main deck code:

  • npm i -S x-gif
  • in your gulpfile, make sure the x-gif dist from node_modules is in your project dist:
gulp.task('x-gif', function() {
  return gulp.src([
    'node_modules/x-gif/dist/*'
  ]).pipe(gulp.dest('dist/x-gif'));
});

Then you can use x-gif by simply adding elements like this to your deck:

  • simple repeating gif, filling up the background:
section
  .fullscreen
    x-gif(src="images/perfect_beardscratch.gif" fill)
  .content
    .box
      h2 Awesome Repeating Gif in the background
  • content that waits for the gif to complete
section
  .fullscreen
    x-gif(src="images/perfect_beardscratch.gif" fill n-times=2)
  .content.wait-for-gif
    .box
      h2 The gif stopped!

see the x-gif docs for more options on the x-gif element: http://atomantic.github.io/x-gif/

Package managers

npm

$ npm install bespoke-theme-atomantic

Bower

$ bower install bespoke-theme-atomantic

Credits

This theme was built with generator-bespoketheme.

Author

Adam Eivy is a software architect by day and a drawing dad by night. Check out his latest project Beetle Royale or follow him on the interwebs

gratipay

follow

License

MIT License

Support on Beerpay

Hey dude! Help me out for a couple of 🍻!

Beerpay Beerpay

You can’t perform that action at this time.