https://github.com/atomantic/bespoke-theme-atomantic
👨💻️ A Bespoke.js Theme that uses x-gif and a few other things for impact. This is my own base-line for presentations.
https://github.com/atomantic/bespoke-theme-atomantic
Last synced: about 1 year ago
JSON representation
👨💻️ A Bespoke.js Theme that uses x-gif and a few other things for impact. This is my own base-line for presentations.
- Host: GitHub
- URL: https://github.com/atomantic/bespoke-theme-atomantic
- Owner: atomantic
- License: mit
- Created: 2016-06-03T22:57:12.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T14:35:21.000Z (over 3 years ago)
- Last Synced: 2025-04-13T04:52:05.127Z (about 1 year ago)
- Language: Stylus
- Homepage: http://atomantic.github.io/bespoke-theme-atomantic
- Size: 13.1 MB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/atomantic/bespoke-theme-atomantic)
# bespoke-theme-atomantic
A theme for [Bespoke.js](http://markdalgleish.com/projects/bespoke.js) — [View demo](http://atomantic.github.io/bespoke-theme-atomantic)
## Download
Download the [production version][min] or the [development version][max], or use a [package manager](#package-managers).
[min]: https://raw.github.com/atomantic/bespoke-theme-atomantic/master/dist/bespoke-theme-atomantic.min.js
[max]: https://raw.github.com/atomantic/bespoke-theme-atomantic/master/dist/bespoke-theme-atomantic.js
## Usage
### Basic
This theme is shipped in a [UMD format](https://github.com/umdjs/umd), meaning that it is available as a CommonJS/AMD module or browser global.
For example, when using CommonJS modules:
```js
var bespoke = require('bespoke'),
atomantic = require('bespoke-theme-atomantic');
bespoke.from('#presentation', [
atomantic()
]);
```
When using browser globals:
```js
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:
```javascript
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:
```jade
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
```bash
$ npm install bespoke-theme-atomantic
```
### Bower
```bash
$ bower install bespoke-theme-atomantic
```
## Credits
This theme was built with [generator-bespoketheme](https://github.com/markdalgleish/generator-bespoketheme).
## Author
Adam Eivy is a software architect by day and a drawing dad by night. Check out his latest project [Beetle Royale](http://beetleroyale.com) or [follow him on the interwebs](http://adameivy.com)
[](https://gratipay.com/antic)
## License
[MIT License](http://en.wikipedia.org/wiki/MIT_License)
## Support on Beerpay
Hey dude! Help me out for a couple of :beers:!
[](https://beerpay.io/atomantic/bespoke-theme-atomantic) [](https://beerpay.io/atomantic/bespoke-theme-atomantic?focus=wish)