webslides · jlantunez · Feb 23, 2017 · Jan 24, 2017 · Jan 24, 2017 · Jan 25, 2017
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,20 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 233
+
+[*.json]
+indent_style = space
+indent_size = 2
+
+[*.yml]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,18 @@
+# IDE files #
+#############
+.idea/
+
+# Third Party #
+###############
+node_modules/
+
+# OS generated files #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+static/js/webslides*
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,13 +1,50 @@
-## 0.2 (2017-02-22)
+<<<<<<< HEAD
+# 1.0.0 (2017-02-23)
 
-- Auto slide (Demo: why-webslides.html)
+This release is a special one since it sets up in the path of a better development environment. Although it's far from
+perfect, it's a solid beginning. 
 
-## 0.1.1 (2017-02-11)
+All the code has been migrated from jQuery with ES5 to vanilla JavaScript with ES2015 (or ES6) and is fully modular. 
+This means that WebSlides is a (base module)[src/js/modules/webslides.js] with a solid API (few public methods) and 
+it's extended by (plugins)[src/js/plugins]. This leads to more granularity and less code to dive through while fixing a
+bug. 
+
+The benefit from this approach is that now it's really easy to extend WebSlides to achieve what you need. You can also
+overwrite current plugins. Say you don't like the current navigation with arrows and want to create a menu instead, you
+can just write that for yourself with your custom needs and register it as `nav` and it will overwrite our nav with
+your code.
+
+We hope this leads to a better environment in which WebSlides can grow better. 
+
+All the technical specs live now in [this document](docs/technical.md).
+
+## Bugfixes
+
+- Fixed a bug with back/next buttons on the browser which lead the nav bar to not work.
+
+## New Features
+
+- Linking to slides without window open.
+- Added custom events to listen for. `ws:init` whenever webslides is ready and `ws:slide-change` whenever a slide changes.
+- Added play/stop methods.
+
+## Breaking Changes
+
+- This "stable" release drops the jQuery requirement and leans on ES2015 for the architecture. Hence, it's no longer possible
+to use the library as before.
+
+# 0.2.0 (2017-02-22)
+
+## New Features
+
+- Adding autoslide option.
+
+# 0.1.1 (2017-02-11)
 
 - Transform the library into an object.
-- .tabs removed.
-- webslides-lite.js removed.
+- `.tabs` removed.
+- `webslides-lite.js` removed.
 
-## 0.1 (2017-01-08)
+# 0.1.0 (2017-01-08)
 
 - Initial release.
diff --git a/README.md b/README.md
@@ -1,7 +1,11 @@
 # WebSlides = Good Karma
-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). 
 
-A new release (at least) every 8th day of the month. Version 0.1: Jan 8, 2017.
+[![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.
+
+A new release (at least) every 8th day of the month.
 
 ### 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.
@@ -18,54 +22,34 @@ Good karma and productivity. Just a basic knowledge of HTML and CSS is required.
 - 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 <code>&lt;section&gt;</code> in the #webslides element is an individual slide.
-
-<pre>&lt;article id="webslides"&gt;
-    &lt;section&gt;
-    	&lt;h1&gt;Slide 1&lt;/h1&gt;
-    &lt;/section&gt;
-    &lt;section class="bg-black aligncenter"&gt;
-    <span class="code-comment">&lt;!-- .wrap = container 1200px --&gt;</span>
-    	&lt;div class="wrap"&gt;
-    		&lt;h1&gt;Slide 2&lt;/h1&gt;
-    	&lt;/div&gt;
-    &lt;/section&gt;
-&lt;/article&gt;</pre>
-
-#### Vertical Sliding
-
-<pre>&lt;article id="webslides" class="vertical"&gt;</pre>
-
-### How it works
-
-You need to add the follow javascript to initialize the webslides object.
-
-```javascript
-var slide = jQuery('#webslides').webslides();
+- Each parent `<section>` in the `#webslides` element is an individual slide.
+
+```html
+<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>
 ```
 
-#### Auto slide
+### Vertical Sliding
 
-```javascript
-var slide = jQuery('#webslides').webslides({interval: 5000});
-```
-Now you can use the slide with these functions:
-
-```javascript
-// Moving to next slide
-slide.nextSlide();
-// Moving to previous slide
-slide.previousSlide();
-// Moving to a specific slide
-slide.goToSlide(n);
+```html
+<article id="webslides" class="vertical">
 ```
 
 ### What's in the download?
 
-The download includes demos and images (devices and logos).
+The download includes demos and images (devices and logos). 
 All content is for demo purposes only. Images are property of their respective owners.
 
 ```
@@ -84,26 +68,34 @@ 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)
 - [pt](http://williamngan.github.io/pt/)
 
 ### License
 
-WebSlides is licensed under the [MIT License](https://opensource.org/licenses/MIT).
+WebSlides is licensed under the [MIT License](https://opensource.org/licenses/MIT). 
 Use it to make something cool.
 
+### Dive In!
+
+Please check out:
+
+ - Want to get techie? Read [our technical docs](docs/technical.md)
+ - Do not miss [our demos](https://webslides.tv/) 
+
 ### Credits
 
 - WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus).

diff --git a/demos/classes.html b/demos/classes.html
@@ -1933,16 +1933,13 @@ <h2><strong>Start in seconds</strong> </h2>
     </main>
     <!--main-->
 
-    <!-- jQuery (required for slides to work) -->
-    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <script src="../static/js/svg-icons.js"></script>
     <script src="../static/js/webslides.js"></script>
-
-    <script type="text/javascript">
-      var slide = jQuery('#webslides').webslides();
+    <script>
+      window.ws = new WebSlides();
     </script>
-
     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
     <script defer src="../static/js/svg-icons.js"></script>
-    
+
   </body>
 </html>
diff --git a/demos/components.html b/demos/components.html
@@ -319,7 +319,11 @@ <h1>Footers</h1>
         <section>
           <div class="wrap">
             <h1>Navigation</h1>
-
+            <ul class="tabs">
+              <li class="tab current" data-tab="tab-1">ul.tabs</li>
+              <li class="tab" data-tab="tab-2">columns</li>
+            </ul>
+            <div id="tab-1" class="tab-content current">
               <nav role="navigation">
                 <ul>
                   <li><a href="">About</a></li>
@@ -368,8 +372,9 @@ <h1>Navigation</h1>
                 </ul>
               </nav>
               <p>nav.navbar</p>
-
-            <hr>
+            </div>
+            <!-- end .tab-content -->
+            <div id="tab-2" class="tab-content">
               <div class="grid">
                 <div class="column">
                   <h3>Company</h3>
@@ -430,6 +435,8 @@ <h3>Community</h3>
                 <!-- .end .column -->
               </div>
               <!-- .end .grid -->
+            </div>
+            <!-- end .tab-content -->
           </div>
           <!-- .end .wrap -->
         </section>
@@ -1796,8 +1803,49 @@ <h2>
         <section class="aligncenter">
           <!--.wrap = container 1200px -->
           <div class="wrap">
-            <h1 class="text-landing">Tell a Story</h1>
-            <p class="text-intro"><strong>Hi, this is WebSlides</strong>. HTML presentations made simple. <br>I'm a cute solution with clean markup and <strong>lovely CSS</strong>.</p>
+            <div id="tab-3" class="tab-content current">
+              <h1 class="text-landing">Tell a Story</h1>
+              <p class="text-intro"><strong>Hi, this is WebSlides</strong>. HTML presentations made simple. <br>I'm a cute solution with clean markup and <strong>lovely CSS</strong>.</p>
+            </div>
+            <div id="tab-4" class="tab-content">
+              <ul class="flexblock features">
+                <li>
+                  <div>
+                    <svg class="fa-heart-o">
+                      <use xlink:href="#fa-heart-o"></use>
+                    </svg>
+                    <h2>Indexed content</h2>
+                    Sharing is caring.
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h2>
+                      <svg class="fa-magic">
+                        <use xlink:href="#fa-magic"></use>
+                      </svg>
+                      Just essential features
+                    </h2>
+                    Keyboard navigation...
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <svg class="fa-bolt">
+                      <use xlink:href="#fa-bolt"></use>
+                    </svg>
+                    <h2>
+                      Prototype faster
+                    </h2>
+                    with clean code
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <ul class="tabs">
+              <li class="tab current" data-tab="tab-3">Purpose</li>
+              <li class="tab" data-tab="tab-4">Benefits</li>
+            </ul>
           </div>
         </section>
         <section class="bg-black aligncenter">
@@ -3078,16 +3126,14 @@ <h2><strong>Start in Seconds</strong> </h2>
     </main>
     <!--main-->
 
-    <!-- jQuery (required for slides to work) -->
-    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <script src="../static/js/svg-icons.js"></script>
     <script src="../static/js/webslides.js"></script>
-
-    <script type="text/javascript">
-      var slide = jQuery('#webslides').webslides();
+    <script>
+      window.ws = new WebSlides();
     </script>
 
     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
     <script defer src="../static/js/svg-icons.js"></script>
-    
+
   </body>
 </html>
diff --git a/demos/index.html b/demos/index.html
@@ -92,7 +92,7 @@
     </header>
 
     <main role="main">
-      <article id="webslides" class="vertical">
+      <article>  <!-- Slideshow? id="webslides" -->
 
         <!-- Quick Guide
           - Each parent <section> in the <article id="webslides"> element is an individual slide.
@@ -107,7 +107,7 @@
             <h1><strong>WebSlides Demos</strong></h1>
             <p class="text-intro">All of these presentations are free and responsive.<br>
               40+ <a href="../demos/components.html" title="WebSlides Components">components</a> with a solid <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p>
-            <p>Share your slides using <a target="_blank" href="https://twitter.com/search?f=tweets&q=%23webslides&src=typd" title="#WebSlides on Twitter">#WebSlides</a>.</p>
+            <p>Share your slides using <a href="https://twitter.com/search?q=%23webslides&amp;src=typd" title="#WebSlides on Twitter">#WebSlides</a>.</p>
           </div>
           <!-- .end .wrap -->
         </section>
@@ -222,16 +222,14 @@ <h2><strong>Start in seconds</strong> </h2>
     </main>
     <!-- end main -->
 
-    <!-- jQuery (required for slides to work) -->
-    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+    <script src="../static/js/svg-icons.js"></script>
     <script src="../static/js/webslides.js"></script>
-
-    <script type="text/javascript">
-      var slide = jQuery('#webslides').webslides();
+    <script>
+      window.ws = new WebSlides();
     </script>
 
     <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
     <script defer src="../static/js/svg-icons.js"></script>
-    
+
   </body>
 </html>