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

License

MIT License

Support on Beerpay

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