A bunch of updates.

01-preface.markdown

@@ -1,10 +1,11 @@
 #Preface
 
-ChocolateChip-UI was created to give developers the chance to create really good looking apps. There are so many frameworks, and they approach the problem of making mobile Web apps from many angles. Depending on your needs and your background, any one of them could be the perfect solution for your development needs. In this crowded scene of development options ChocolateChip-UI stands out for two reasons: it has a very simple and clean markup for defining an app's interface, and by default the UI will look really good, with the native look and feel of each supported mobile platform.
+ChocolateChip-UI was created to enable developers to make really great looking apps. There are so many frameworks, and they approach the problem of making mobile Web apps from many angles. Depending on your needs and your background, any one of them could be the perfect solution for your development needs. In this crowded scene of development options ChocolateChip-UI stands out for two reasons: it has a very simple and clean markup for defining an app's interface, and by default the UI will look really good, with the native look and feel of each supported mobile platform.
 
 If you want to create a great app that your users will love and will stand out from the crowd, you might want to take a look at how ChocolateChip-UI can help you achieve that goal. If you need to support several platforms and don't have the time or resources to pull it off well, you should take a look at how ChocolateChip-UI's themes handle this for you.
 
 
-This book is based on ChocolateChip-UI 3.6.1. If you are using a newer version, please check our website [http://chocolatechip-ui.com/documention](http://chocolatechip-ui.com/documention) to see if there are any differences from what is presented here.
+This book is based on ChocolateChip-UI 3.8.0
+. If you are using a newer version, please check our website [http://chocolatechip-ui.com/documention](http://chocolatechip-ui.com/documention) to see if there are any differences from what is presented here.
 
 

02-introduction.markdown

@@ -22,6 +22,7 @@ While we were in the planning stage, one of the things we wanted to accomplish w
 8. h1 - h5
 9. span
 10. a
+11. button
 
 ChocolateChip-UI uses a small number of classes with these tags to define their styles and to identify their functionality to ChUI.js so that it can intialize them at load time.
 
@@ -85,7 +86,7 @@ With ChocolateChip-UI you have everything you need to create a beautiful interfa
 
 ChocolateChip-UI was designed from the start to be resolution independent. The UI will always be rendered at the highest resolution available on the device. Its layouts are also responsive, they will resize automatically with orientation change and will expanding to fill the available screen real estate of all mobile devices. 
 
-####Compatible with Other Libaries and Frameworks
+####Compatibility with Other Libaries and Frameworks
 
 You can use ChocolateChip-UI with a wide variety of other libraries and frameworks. ChocolateChip-UI is built on top of jQuery, so anything that is jQuery compatible should work as is. Before attempting to use any jQuery plugins with ChocolateChip-UI do check the plugin documentation to make sure that it works on mobile. 
 

03-getting started.markdown

@@ -169,3 +169,34 @@ gulp js ios && gulp watch_ios
 ```
 gulp js win && gulp watch_win
 ```
+
+###Building with ChocolateChipJS
+
+ChocolateChip-UI is built to run on jQuery, the popular and well-know JavaScript library. However, ChocolateChip-UI can optionally run on ChocolateChipJS. This is a mobile-first JavaScript library written to be small and fast, as much as 30% faster than jQuery. If you find that with jQuery your app's interactions feel sluggish, you might want to try using ChocolateChipJS. It's easy to build out examples of ChocolateChip-UI using ChocolateChipJS. Just pass Gulp the flag: --chocolatechipjs:
+
+
+```
+// Build everything, including examples with ChocolateChipJS instead of jQuery:
+gulp --chocolatechipjs
+
+// Build only the Android examples and demos with ChocolateChipJS instead of jQuery:
+gulp android_examples --chocolatechipjs
+
+// Build only the iOS examples and demos with ChocolateChipJS instead of jQuery:
+gulp ios_examples --chocolatechipjs
+
+// Build only the Windows examples and demos with ChocolateChipJS instead of jQuery:
+gulp win_examples --chocolatechipjs
+
+// Build the right-to-left version with ChocolateChipJS:
+gulp --dir rtl --chocolatechipjs
+
+// Build only the Android right-to-left examples with ChocolateChipJS:
+gulp android_examples --dir rtl
+
+// Build only the iOS right-to-left examples with ChocolateChipJS:
+gulp ios_examples --dir rtl
+
+// Build only the Windows right-to-left examples with ChocolateChipJS:
+gulp win_examples --dir rtl
+```

04-layouts.markdown

@@ -861,7 +861,7 @@ This list would look like this:
 
 ###Buttons: Types and Placement
 
-Besides layouts, ChocolateChip-UI provides a number of button types and ways of positioning them in layouts. A button is just an anchor tag with the class button. 
+Besides layouts, ChocolateChip-UI provides a number of button types and ways of positioning them in layouts. From version 3.8.0 and forward, a button is just a button. For earlier versions, a button is an anchor tag with the class button. 
 
 ####Default Buttons
 
@@ -870,7 +870,7 @@ Depending on what platform you are on, you will get the default look. The markup
 ```
 <ul class='list'>
   <li>
-    <a href="#" class='button'>Button</a>
+    <button>Button</button>
   </li>
 </ul>
 ```
@@ -898,7 +898,7 @@ You don't have to worry about implementing this button's look. Just put the clas
 
 ```
 <nav class='next'>
-  <a href='#' class='button back'>My App</a>
+  <button class='back'>My App</button>
   <h1>People</h1>
 </nav>
 <article id="people" class='next'>
@@ -932,7 +932,7 @@ To learn more about how back buttons work with navigation, please read the chapt
 
 ####Action Buttons
 
-ChocolateChip-UI provides a special type of button called an action button. These will usually sit by themselves on the screen. Their purpose is to enable the user to perform some very important function. You implement them by putting the class `action` on an anchor tag:
+ChocolateChip-UI provides a special type of button called an action button. These will usually sit by themselves on the screen. Their purpose is to enable the user to perform some very important function. You implement them by putting the class `action` on a button element:
 
 ```
 <article id='main' class='current'>
@@ -943,7 +943,7 @@ ChocolateChip-UI provides a special type of button called an action button. Thes
       </li>
     </ul>
     <br><br>
-    <a id='goToLast' href='javascript:void(null)' class="button action">Straight to Detail Article</a>
+    <button id='goToLast' href='javascript:void(null)' class="action">Straight to Detail Article</a>
   </section>
 </article>
 ```

05-navigation.markdown

@@ -116,7 +116,7 @@ We're going to look at what it takes to make a dynamic navigation list for some
   </section>
 </article>
 <nav class="next">
-  <a href="#" class="button back">Recipes</a>
+  <button href="#" class="back">Recipes</button>
   <h1 id='recipeTitle'>Recipe</h1>
 </nav>
 <article id="detail" class="next">
@@ -271,19 +271,19 @@ $(function() {
 Based on the above code, here is some CSS to style the tab buttons with icons for iOS:
 
 ```
-.tabbar > .button.music > .icon  {
+.tabbar > button.music > .icon  {
    -webkit-mask-image: url('../images/icons/Head_phones.svg');
 }
-.tabbar > .button.pictures > .icon  {
+.tabbar > button.pictures > .icon  {
    -webkit-mask-image: url('../images/icons/Camera.svg');
 }
-.tabbar > .button.documents > .icon  {
+.tabbar > button.documents > .icon  {
    -webkit-mask-image: url('../images/icons/Documents.svg');
 }
-.tabbar > .button.downloads > .icon  {
+.tabbar > button.downloads > .icon  {
    -webkit-mask-image: url('../images/icons/Download.svg');
 }
-.tabbar > .button.favorites > .icon  {
+.tabbar > button.favorites > .icon  {
    -webkit-mask-image: url('../images/icons/Favorite.svg');
 }    
 ```
@@ -305,15 +305,15 @@ The icon for the 'More' tab is an SVG data url on Android and iOS. On Windows it
 
 ```
 /* Android: */
-.tabbar > .button.more::before { 
+.tabbar > button.more::before { 
   background-color: red;
 }
 /* iOS: */
-.tabbar > .button.more > .icon {
+.tabbar > button.more > .icon {
   background-color: red;
 }
 /* Windows Phone 8: */
-.tabbar > .button.more::before {
+.tabbar > button.more::before {
   color: red;
 ```
 
@@ -335,9 +335,9 @@ To set up togglable panels you need to execute the function `UIPanelToggle` on a
       <div class='horizontal centered'>
         <!-- segmented control for toggling panels  -->
         <div class='segmented'>
-            <a class='button'>Radioactive</a>
-            <a class='button'>Hurt</a>
-            <a class='button'>Permanent</a>
+            <button>Radioactive</button>
+            <button>Hurt</button>
+            <button>Permanent</button>
         </div>
       </div>
       <!-- Container for togglable panels -->
@@ -432,8 +432,8 @@ In that article's navbar put a segmented control with the extra class of `paging
 
 ```
 <div class='segmented paging horizontal align-flush'>
-   <a class='button' href='javascript:void(null)' title='previous panel'></a>
-   <a class='button' href='javascript:void(null)' title='next panel'></a>
+   <button title='previous panel'></button>
+   <button title='next panel'></button>
 </div>
 ```
 

06-widgets.markdown

@@ -8,14 +8,14 @@ ChocolateChip-UI provides you with a number of useful widgets, such as popups, p
 
 The segmented control is a group of buttons for executing a small set of related tasks. The segmented control is also used for toggleing panels and paging sections, which are both descibed in the chapter "Navigation".
 
-There are two ways to create a segmented control, manually or dynamically. The segmented control is just a div with the class `segmented` which contains several anchors with the class `button`:
+There are two ways to create a segmented control, manually or dynamically. The segmented control is just a div with the class `segmented` which contains several buttons:
 
 
 ```
 <div class='segmented'>
-  <a class='button selected'>Radioactive</a>
-  <a class='button'>Hurt</a>
-  <a class='button'>Permanent</a>
+  <button class='selected'>Radioactive</button>
+  <button>Hurt</button>
+  <button>Permanent</button>
 </div>
 ```
 
@@ -223,12 +223,12 @@ $(function() {
    $.UISheet();
 
    // Get the sheet and append some markup:
-   $('.sheet').find('section').append("<ul class='list'></li><li><a class='button' href='javascript:void(null)'>Save</a></li><li><a class='button' href='javascript:void(null)'>Delete</a></li><li><a class='button' href='javascript:void(null)'>Cancel</a></li></ul>");
+   $('.sheet').find('section').append("<ul class='list'></li><li><button>Save</button></li><li><button>Delete</button></li><li><button>Cancel</button></li></ul>");
    $('.sheet .list').append ('<h2 style="text-align: center; margin: 20px;">The End</h2>');
 
    // After append the sheet to the document,
    // register an event to handle the buttons, etc.:
-   $('.sheet .list').on('singletap', '.button', function() {
+   $('.sheet .list').on('singletap', 'button', function() {
       $.UIHideSheet();
    });
 
@@ -251,7 +251,7 @@ $('#showSheet').on('singletap', function() {
 The sheet is created with a chevron inside its top bar which when tapped will close it. Inside the sheet you can wire up buttons or other elements to close it using the method `$.UIHideSheet`:
 
 ```
-$('.sheet .list').on('singletap', '.button', function() {
+$('.sheet .list').on('singletap', 'button', function() {
    $.UIHideSheet();
 });
 ```