From 3782a40a8a0163c94a3a9f72ff78b5d2e5567ee5 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 30 Jan 2017 20:52:12 +0100 Subject: [PATCH] Updating README --- README.md | 149 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 129 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 5bac176..8c40f6c 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,22 @@ # WebSlides = Good Karma + +[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT) +[![Twitter](https://img.shields.io/twitter/url/https/github.com/jlantunez/webslides.svg?style=social)](https://twitter.com/webslides) + 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) ### Why WebSlides? Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. +## Project Setup + +This project assumes you have NodeJS. You should also have npm installed as well (this usually comes packaged with Node). Once you have it cloned, you should run `npm install` to get all the dependencies. + +Finally, run one of the following commands in the cloned directory: + +- `npm run dev`: This starts a dev server with autoreload on the port `8080`. +- `npm run build`: This creates the `dist` files. + ### Features Version 0.1 (Jan 8, 2017): @@ -16,26 +29,115 @@ Version 0.1 (Jan 8, 2017): - Fonts: Roboto, Maitree (Serif), and San Francisco. - Vertical rhythm (use multiples of 8). -### Markup +## Markup - Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. -- Each parent <section> in the #webslides element is an individual slide. +- Each parent `
` in the `#webslides` element is an individual slide. -
<article id="webslides">
-    <section>
-    	<h1>Slide 1</h1>
-    </section>
-    <section class="bg-black aligncenter">
-    <!-- .wrap = container 1200px -->
-    	<div class="wrap">
-    		<h1>Slide 2</h1>
-    	</div>
-    </section>
-</article>
+``` +
+
+

Slide 1

+
+
+ +
+

Slide 2

+
+
+
+``` -#### Vertical Sliding +### Vertical Sliding -
<article id="webslides" class="vertical">
+`
` + +## JavaScript + +In order to bootstrap the WebSlides you'll need to create a instance of it: + +`const ws = new WebSlides();` + +That'll make everything run without any hassle. + +Do you want to get your hands dirty? This is the API for the WebSlides module: + +
+
goToSlide(slideIndex, opt_forward)
+

Goes to a given slide.

+
+
goNext()
+

Goes to the next slide.

+
+
goPrev()
+

Goes to the previous slide.

+
+
registerPlugin(key, cto)
+

Registers a plugin to be loaded when the instance is created. It allows +(on purpose) to replace default plugins. +Those being:

+
    +
  • Navigation
    • +
  • Hash
    • +
  • Keyboard
    • +
+
+
+ + + +### `goToSlide(slideI, forward)` +Goes to a given slide. + +| Param | Type | Description | +| --- | --- | --- | --- | +| slideIndex | number | The slide index. | +| forward | boolean | Whether we're forcing moving forward/backwards. This parameter is used only from the `goNext`, `goPrev` functions to adjust the scroll animations. | + + + +### `goNext()` +Goes to the next slide. If the page is vertical, it will animate the scroll down. + + + +### `goPrev()` +Goes to the previous slide. If the page is vertical, it will animate the scroll up + + + +### `registerPlugin(key, cto)` +Registers a plugin to be loaded when the instance is created. It allows +(on purpose) to replace default plugins. + +Those being: + + - Navigation + - Hash + - Keyboard + +| Param | Type | Description | +| --- | --- | --- | +| key | string | They key under which it'll be stored inside of the instance, inside the plugins dict. | +| cto | function | Plugin constructor. | + +### Plugin development + +Almost every single feature of WebSlides is a plugin that can be overwritten and you are able to create your custom plugins. Just call `registerPlugin` (as seen above) **before creating** the instance: + +``` +// Adding the constructor to WebSlides +WebSlides.registerPlugin('MyPlugin', MyPlugin); + +// Starting WebSlides +// Your plugin will be constructed at this time and it will receive the webslides instance as the only parameter. +const ws = new WebSlides(); +// You can also access ws.plugins.MyPlugin now +``` + +This allows you to rewrite the navigation to use a menu (for example) or add that missing piece of functionality you'd like to see. + +Make sure to let us know so it could get added to the repo! ### What's in the download? @@ -58,16 +160,17 @@ webslides/ ### CSS Syntax (classes) -- Typography: .text-landing, .text-data, .text-intro... -- Background Colors: .bg-primary, .bg-apple, .bg-blue... -- Background Images: .background,.background-center-bottom... -- Cards: .card-50, .card-40... -- Flexible Blocks: .flexblock.clients, .flexblock.metrics... +- Typography: `.text-landing`, `.text-data`, `.text-intro`... +- Background Colors: `.bg-primary`, `.bg-apple`, `.bg-blue`... +- Background Images: `.background`,`.background-center-bottom`... +- Cards: `.card-50`, `.card-40`... +- Flexible Blocks: `.flexblock.clients`, `.flexblock.metrics`... ### Extensions You can add: + - [Unsplash](https://unsplash.com) photos - [animate.css](https://daneden.github.io/animate.css) - [particles.js](https://github.com/VincentGarreau/particles.js) @@ -83,3 +186,9 @@ Use it to make something cool. - WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus). - Thanks [@LuisSacristan](https://twitter.com/luissacristan) for the javascript code :) - Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer). + +### Roadmap + +* Fix crossbrowser issues. Safari mostly. +* Make a stable release. +* Write tests \ No newline at end of file