mypapers/webslides/README.md

   1 # WebSlides = Create stories with Karma
   2
   3 [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)
   4 [![Release](https://img.shields.io/github/release/webslides/webslides.svg)](https://github.com/webslides/webslides/releases/latest)
   5 [![codecov](https://codecov.io/gh/webslides/WebSlides/branch/master/graph/badge.svg)](https://codecov.io/gh/webslides/WebSlides)
   6 [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/jlantunez/8)
   7 [![Twitter](https://img.shields.io/twitter/url/https/github.com/webslides/webslides.svg?style=social)](https://twitter.com/webslides)
   8
   9 Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — [https://webslides.tv/demos](https://webslides.tv/demos).
  10
  11 * * *
  12 ### Download
  13 Simply choose a demo and customize it in seconds. Latest version: [webslides.tv/webslides-latest.zip](https://webslides.tv/webslides-latest.zip).
  14 * * *
  15
  16
  17 ### What's in the download?
  18
  19 The download includes demos and images (devices and logos).
  20 All content is for demo purposes only. Images are property of their respective owners.
  21
  22 ```
  23 webslides/
  24 ├── index.html
  25 ├── css/
  26 │   ├── base.css
  27 │   └── colors.css
  28 │   └── svg-icons.css (optional)
  29 ├── js/
  30 │   ├── webslides.js
  31 │   └── svg-icons.js (optional)
  32 └── demos/
  33 └── images/
  34 ```
  35
  36 ## Features
  37
  38 - Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
  39 - Slide counter.
  40 - Permalinks: go to a specific slide.
  41 - Autoslide.
  42 - Click to nav.
  43 - Simple CSS alignments. Put content wherever you want (vertical centering...)
  44 - 40+ components: background images/videos, quotes, cards, covers...
  45 - Flexible blocks with auto-fill and equal height.
  46 - Fonts: Roboto, Maitree (Serif), and San Francisco.
  47 - Vertical rhythm (use multiples of 8).
  48
  49 ## Markup
  50
  51 - Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
  52 - Each parent `<section>` in the `#webslides` element is an individual slide.
  53
  54 ```html
  55 <article id="webslides">
  56     <section>
  57         <h1>Slide 1</h1>
  58     </section>
  59     <section class="bg-black aligncenter">
  60     <!-- .wrap = container 1200px -->
  61         <div class="wrap">
  62             <h1>Slide 2</h1>
  63         </div>
  64     </section>
  65 </article>
  66 ```
  67
  68 ### Vertical Sliding
  69
  70 ```html
  71 <article id="webslides" class="vertical">
  72 ```
  73
  74 ### CSS Syntax (classes)
  75
  76 - Typography: `.text-landing`, `.text-data`, `.text-intro`...
  77 - Background Colors: `.bg-primary`, `.bg-apple`, `.bg-blue`...
  78 - Background Images: `.background`,`.background-center-bottom`...
  79 - Cards: `.card-50`, `.card-40`...
  80 - Flexible Blocks: `.flexblock.clients`, `.flexblock.metrics`...
  81
  82 ### Extensions
  83
  84 You can add:
  85
  86 - [Unsplash](https://unsplash.com) photos
  87 - [animate.css](https://daneden.github.io/animate.css)
  88 - [particles.js](https://github.com/VincentGarreau/particles.js)
  89 - [Animate on scroll](http://michalsnik.github.io/aos/) (Useful for longform articles)
  90 - [pt](http://williamngan.github.io/pt/)
  91
  92 ### Dive In!
  93
  94 - Do not miss [our demos](https://webslides.tv/).
  95 - Want to get techie? Read [our wiki](wiki):
  96   - [FAQ](https://github.com/webslides/WebSlides/wiki)
  97   - [Core API](https://github.com/webslides/WebSlides/wiki/Core-API)
  98   - [Plugin Docs](https://github.com/webslides/WebSlides/wiki/Plugin-docs)
  99   - [Plugin Development](https://github.com/webslides/WebSlides/wiki/Plugin-development)
 100
 101 ### Credits
 102
 103 - WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus).
 104 - Javascript: [@Belelros](https://twitter.com/Belelros) and [@LuisSacristan](https://twitter.com/luissacristan).
 105 - Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer).