|
| 1 | +# WebSlides = Good Karma |
| 2 | +Finally, everything you need to make HTML presentations in a beautiful way. Just the essentials. You can create your own presentation instantly. Simply choose a demo and customize it in minutes — [https://webslides.tv/demos](https://webslides.tv/demos) |
| 3 | + |
| 4 | +### Why WebSlides? |
| 5 | +Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. |
| 6 | + |
| 7 | +### Features |
| 8 | +Version 0.1 (Jan 8, 2017): |
| 9 | + |
| 10 | +- Navigation (horizontal and vertical sliding): touchpad, keyboard shorcuts, and swipe. |
| 11 | +- Slide counter. |
| 12 | +- Permalinks: go to a specific slide. |
| 13 | +- Simple CSS alignments. Put content wherever you want (vertical centering...) |
| 14 | +- 40+ components: background images/videos, quotes, cards, covers... |
| 15 | +- Flexible blocks with auto-fill and equal height. |
| 16 | +- Fonts: Roboto, Maitree (Serif), and San Francisco. |
| 17 | +- Vertical rhythm (use multiples of 8). |
| 18 | + |
| 19 | +### Markup |
| 20 | + |
| 21 | +- Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. |
| 22 | +- Each parent <code><section></code> in the #webslides element is an individual slide. |
| 23 | + |
| 24 | +<pre><article id="webslides"> |
| 25 | + <section> |
| 26 | + <h1>Slide 1</h1> |
| 27 | + </section> |
| 28 | + <section class="bg-black aligncenter"> |
| 29 | + <span class="code-comment"><!-- .wrap = container 1200px --></span> |
| 30 | + <div class="wrap"> |
| 31 | + <h1>Slide 2</h1> |
| 32 | + </div> |
| 33 | + </section> |
| 34 | +</article></pre> |
| 35 | + |
| 36 | +#### Vertical Sliding |
| 37 | + |
| 38 | +<pre><article id="webslides" class="vertical"></pre> |
| 39 | + |
| 40 | +### What's in the download? |
| 41 | + |
| 42 | +The download includes demos and images (devices and logos). |
| 43 | +All content is for demo purposes only. Images are property of their respective owners. |
| 44 | + |
| 45 | +``` |
| 46 | +webslides/ |
| 47 | +├── index.html |
| 48 | +├── css/ |
| 49 | +│ ├── base.css |
| 50 | +│ └── colors.css |
| 51 | +│ └── svg-icons.css (optional) |
| 52 | +├── js/ |
| 53 | +│ ├── webslides.js |
| 54 | +│ └── svg-icons.js (optional) |
| 55 | +└── demos/ |
| 56 | +└── images/ |
| 57 | +``` |
| 58 | + |
| 59 | +### CSS Syntax (classes) |
| 60 | + |
| 61 | +- Typography: .text-landing, .text-data, .text-intro... |
| 62 | +- Background Colors: .bg-primary, .bg-apple, .bg-blue... |
| 63 | +- Background Images: .background,.background-center-bottom... |
| 64 | +- Cards: .card-50, .card-40... |
| 65 | +- Flexible Blocks: .flexblock.clients, .flexblock.metrics... |
| 66 | + |
| 67 | + |
| 68 | +### Extensions |
| 69 | + |
| 70 | +You can add: |
| 71 | +- [Unsplash](https://unsplash.com) photos |
| 72 | +- [animate.css](https://daneden.github.io/animate.css) |
| 73 | +- [particles.js](https://github.com/VincentGarreau/particles.js) |
| 74 | +- [pt](http://williamngan.github.io/pt/) |
| 75 | + |
| 76 | +### License |
| 77 | + |
| 78 | +WebSlides is licensed under the [MIT License](https://opensource.org/licenses/MIT). |
| 79 | +Use it to make something cool. |
| 80 | + |
| 81 | +### Credits |
| 82 | + |
| 83 | +- WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus). |
| 84 | +- Thanks [@LuisSacristan](https://twitter.com/luissacristan) for the javascript code :) |
| 85 | +- Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer). |
0 commit comments