https://github.com/ryanseddon/slideshowbob
The evil, fumbling, JavaScript free, slide thingy
https://github.com/ryanseddon/slideshowbob
Last synced: about 1 month ago
JSON representation
The evil, fumbling, JavaScript free, slide thingy
- Host: GitHub
- URL: https://github.com/ryanseddon/slideshowbob
- Owner: ryanseddon
- Created: 2013-04-22T11:04:09.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2013-09-15T05:05:13.000Z (over 11 years ago)
- Last Synced: 2024-11-01T04:28:29.681Z (7 months ago)
- Language: CSS
- Homepage: http://ryanseddon.github.io/slideshowbob/
- Size: 1.69 MB
- Stars: 98
- Watchers: 4
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Slideshowbob.css
## A slide framework powered by :checked
Once again I did a talk and as usual I got caught up in the meta process of slide creation, this project is what happened.
## Check out the example deck
See demo deck for awesome `:checked` powered slides to impress all your friends.
## Works nicely on mobile
The slide animation is hardware accelerated so it's smooth as butter on mobiles.
## Powerful build system
I have a build system in place not to make CSS more complicated but to take the complication out of this project. It uses SASS so I can create a helpful mixin to generate the mind melting selectors needed to do the slide system, autoprefixer to add prefixes based on caniuse.com data and CSSLint to make sure nothing silly is done.
## Get setup
1. Install node.js
2. Run `npm install grunt-cli` if you don't already have grunt >=0.4.0 installed.
3. Inside this project folder run `npm install` to get the dependencies
4. Run `grunt` to generate files inside `dist` folder.
## Adjust slide count
Unfortunately this slide system needs to know your total slide count in order to function correctly, thankfully SASS makes this really easy. Just update the `$slide-count` variable in the `_variables.scss` file and run `grunt` to re-generate the CSS.
## Markup order is important
You must follow the convention of the example slide deck when creating your markup. Radio inputs need to appear at the top for each slide.
```html
```
## Sourcemaps
If you use the bleeding edge version of SASS you can generate a sourcemap file so debugging in the browser is awesome. The example slide deck has a sourcemap file already included.