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.

License

Notifications You must be signed in to change notification settings

atomantic/bespoke-theme-atomantic

Repository files navigation

Build Status

bespoke-theme-atomantic

A theme for Bespoke.jsView 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

About

👨‍💻️ A Bespoke.js Theme that uses x-gif and a few other things for impact. This is my own base-line for presentations.

Resources

License

Stars

Watchers

Forks

Packages

No packages published