Resolving docs conflicts.

CONTRIBUTING.md

@@ -146,6 +146,8 @@ project:
 If you have any other questions about contributing, please feel free to contact
 us.
 
+**Don't edit files in `dist/`.** You should edit files in `lib/`.
+
 ## Special thanks to @necolas
 
-For writing the original [issue-guidelines](https://github.com/necolas/issue-guidelines/) from which these were adapted.
+For writing the original [issue-guidelines](https://github.com/necolas/issue-guidelines/) from which these were adapted.

README.md

@@ -4,7 +4,7 @@ Prototype mobile apps with simple HTML, CSS and JS components.
 
 ## Getting Started
 
-- Clone the repo `git clone https://github.com/maker/ratchet.git` or just [download](http://maker.github.io/ratchet/ratchet.zip) the bundled CSS and JS
+- Clone the repo with `git clone https://github.com/maker/ratchet.git` or just [download](http://maker.github.io/ratchet/ratchet.zip) the bundled CSS and JS
 - [Read the docs](http://maker.github.io/ratchet) to learn about the components and how to get a prototype on your phone
 - We will have example apps to check out very soon!
 
@@ -45,18 +45,18 @@ A small list of "gotchas" are provided below for designers and developers starti
 
 Connor Sears
 
-- http://twitter.com/connors
-- http://github.com/connors
+- https://twitter.com/connors
+- https://github.com/connors
 
 Dave Gamache
 
-- http://twitter.com/dhg
-- http://github.com/dhg
+- https://twitter.com/dhg
+- https://github.com/dhg
 
 Jacob Thornton
 
-- http://twitter.com/fat
-- http://github.com/fat
+- https://twitter.com/fat
+- https://github.com/fat
 
 
 ## License

_includes/nav.html

@@ -9,7 +9,7 @@
           <li><a href="#table-views">Table views</a></li>
           <li><a href="#buttons">Buttons</a></li>
           <li><a href="#segmentedControllers">Segmented controllers</a></li>
-          <li><a href="#counts">Counts</a></li>
+          <li><a href="#badges">Badges</a></li>
           <li><a href="#forms">Forms</a></li>
           <li><a href="#toggles">Toggles</a></li>
           <li><a href="#popovers">Popovers</a></li>

components.html

@@ -369,28 +369,28 @@ base_url: "../"
   </article>
 
   <article class="component">
-    <h3 class="component-title">Table view with counts</h3>
+    <h3 class="component-title">Table view with badges</h3>
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
-        <li>Item 1 <span class="count">4</span></li>
-        <li>Item 2 <span class="count">1</span></li>
-        <li>Item 3 <span class="count">5</span></li>
+        <li>Item 1 <span class="badge">4</span></li>
+        <li>Item 2 <span class="badge">1</span></li>
+        <li>Item 3 <span class="badge">5</span></li>
       </ul>
     </div>
 
 {% highlight html %}
 <ul class="table-view">
-  <li>Item 1 <span class="count">4</span></li>
-  <li>Item 2 <span class="count">1</span></li>
-  <li>Item 3 <span class="count">5</span></li>
+  <li>Item 1 <span class="badge">4</span></li>
+  <li>Item 2 <span class="badge">1</span></li>
+  <li>Item 3 <span class="badge">5</span></li>
 </ul>
 {% endhighlight %}
 
   </article>
 
   <article class="component">
-    <h3 class="component-title">Table view with counts and chevrons</h3>
+    <h3 class="component-title">Table view with badges and chevrons</h3>
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
@@ -398,21 +398,21 @@ base_url: "../"
           <a>
             Item 1
             <span class="chevron"></span>
-            <span class="count">4</span>
+            <span class="badge">4</span>
           </a>
         </li>
         <li>
           <a>
             Item 2
             <span class="chevron"></span>
-            <span class="count">1</span>
+            <span class="badge">1</span>
           </a>
         </li>
         <li>
           <a>
             Item 3
             <span class="chevron"></span>
-            <span class="count">5</span>
+            <span class="badge">5</span>
           </a>
         </li>
       </ul>
@@ -424,21 +424,21 @@ base_url: "../"
     <a>
       Item 1
       <span class="chevron"></span>
-      <span class="count">4</span>
+      <span class="badge">4</span>
     </a>
   </li>
   <li>
     <a>
       Item 2
       <span class="chevron"></span>
-      <span class="count">1</span>
+      <span class="badge">1</span>
     </a>
   </li>
   <li>
     <a>
       Item 3
       <span class="chevron"></span>
-      <span class="count">5</span>
+      <span class="badge">5</span>
     </a>
   </li>
 </ul>
@@ -567,25 +567,25 @@ base_url: "../"
   </article>
 
   <article class="component" id="buttonsCounts">
-    <h3 class="component-title">Buttons with counts</h3>
+    <h3 class="component-title">Buttons with badges</h3>
 
     <div class="component-example">
-      <a class="button">Count button<span class="count count-filled">1</span></a>
-      <a class="button-primary">Count button<span class="count-primary count-filled">1</span></a>
-      <a class="button-positive">Count button<span class="count-positive count-filled">1</span></a>
-      <a class="button-negative">Count button<span class="count-negative count-filled">1</span></a>
+      <a class="button">Badge button<span class="badge badge-filled">1</span></a>
+      <a class="button-primary">Badge button<span class="badge-primary badge-filled">1</span></a>
+      <a class="button-positive">Badge button<span class="badge-positive badge-filled">1</span></a>
+      <a class="button-negative">Badge button<span class="badge-negative badge-filled">1</span></a>
     </div>
 
 {% highlight html %}
-<a class="button">Count button<span class="count count-filled">1</span></a>
-<a class="button-primary">Count button<span class="count-primary count-filled">1</span></a>
-<a class="button-positive">Count button<span class="count-positive count-filled">1</span></a>
-<a class="button-negative">Count button<span class="count-negative count-filled">1</span></a>
-
-<a class="button-filled">Count button<span class="count count-filled">1</span></a>
-<a class="button-filled button-primary">Count button<span class="count-primary count-filled">1</span></a>
-<a class="button-filled button-positive">Count button<span class="count-positive count-filled">1</span></a>
-<a class="button-filled button-negative">Count button<span class="count-negative count-filled">1</span></a>
+<a class="button">Badge button<span class="badge badge-filled">1</span></a>
+<a class="button-primary">Badge button<span class="badge-primary badge-filled">1</span></a>
+<a class="button-positive">Badge button<span class="badge-positive badge-filled">1</span></a>
+<a class="button-negative">Badge button<span class="badge-negative badge-filled">1</span></a>
+
+<a class="button-filled">Badge button<span class="badge badge-filled">1</span></a>
+<a class="button-filled button-primary">Badge button<span class="badge-primary badge-filled">1</span></a>
+<a class="button-filled button-positive">Badge button<span class="badge-positive badge-filled">1</span></a>
+<a class="button-filled button-negative">Badge button<span class="badge-negative badge-filled">1</span></a>
 {% endhighlight %}
 
   </article>
@@ -676,32 +676,32 @@ base_url: "../"
 
   </article>
 
-  <!-- Counts -->
-  <article class="component" id="counts">
-    <h3 class="component-title">Counts</h3>
-    <p class="component-description">Counts come in four flavors and should be used to indicate "how many" of something there are.</p>
+  <!-- Badges -->
+  <article class="component" id="badges">
+    <h3 class="component-title">Badges</h3>
+    <p class="component-description">Badges come in four flavors and should be used to indicate "how many" of something there are.</p>
 
     <div class="component-example">
-      <span class="count">1</span>
-      <span class="count-primary">2</span>
-      <span class="count-positive">3</span>
-      <span class="count-negative">4</span>
-      <span class="count count-filled">1</span>
-      <span class="count-primary count-filled">2</span>
-      <span class="count-positive count-filled">3</span>
-      <span class="count-negative count-filled">4</span>
+      <span class="badge">1</span>
+      <span class="badge-primary">2</span>
+      <span class="badge-positive">3</span>
+      <span class="badge-negative">4</span>
+      <span class="badge badge-filled">1</span>
+      <span class="badge-primary badge-filled">2</span>
+      <span class="badge-positive badge-filled">3</span>
+      <span class="badge-negative badge-filled">4</span>
     </div>
 
 {% highlight html %}
-<span class="count">1</span>
-<span class="count-primary">2</span>
-<span class="count-positive">3</span>
-<span class="count-negative">4</span>
-
-<span class="count count-filled">1</span>
-<span class="count-primary count-filled">2</span>
-<span class="count-positive count-filled">3</span>
-<span class="count-negative count-filled">4</span>
+<span class="badge">1</span>
+<span class="badge-primary">2</span>
+<span class="badge-positive">3</span>
+<span class="badge-negative">4</span>
+
+<span class="badge badge-filled">1</span>
+<span class="badge-primary badge-filled">2</span>
+<span class="badge-positive badge-filled">3</span>
+<span class="badge-negative badge-filled">4</span>
 {% endhighlight %}
 
   </article>

dist/ratchet.css

@@ -1,12 +1,12 @@
 /*
-* =====================================================
-* Ratchet v2.0.0
-* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
-* Licensed under http://www.opensource.org/licenses/MIT
-*
-* Designed and built by @connors, @dhg, and @fat.
-* =====================================================
-*/
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
 
 /*! normalize.css v2.1.3 | MIT License | git.io/normalize */
 article,
@@ -788,11 +788,11 @@ input[type="button"] {
   transform: rotate(-45deg);
 }
 
-[class*="count"] {
+[class*="badge"] {
   display: inline-block;
   color: #929292;
 }
-[class*="count"].count-filled {
+[class*="badge"].badge-filled {
   padding: 2px 9px;
   color: #fff;
   font-size: 13px;
@@ -801,40 +801,40 @@ input[type="button"] {
   border-radius: 100px;
 }
 
-.count-primary {
+.badge-primary {
   color: #007aff;
 }
-.count-primary.count-filled {
+.badge-primary.badge-filled {
   background-color: #007aff;
 }
 
-.count-positive {
+.badge-positive {
   color: #4cd964;
 }
-.count-positive.count-filled {
+.badge-positive.badge-filled {
   background-color: #4cd964;
 }
 
-.count-negative {
+.badge-negative {
   color: #dd524d;
 }
-.count-negative.count-filled {
+.badge-negative.badge-filled {
   background-color: #dd524d;
 }
 
-[class*="button"] [class*="count"] {
+[class*="button"] [class*="badge"] {
   font-size: 12px;
   padding-top: 2px;
   padding-bottom: 2px;
   margin: -2px -4px -2px 4px;
 }
 
-.button-filled .count-filled,
-[class*="button"]:active .count-filled {
+.button-filled .badge-filled,
+[class*="button"]:active .badge-filled {
   background-color: rgba(0, 0, 0, 0.2);
 }
 
-.button-block [class*="count"] {
+.button-block [class*="badge"] {
   position: absolute;
   right: 0;
   margin-right: 10px;

dist/ratchet.js

@@ -1,12 +1,12 @@
 /*
-* =====================================================
-* Ratchet v2.0.0
-* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
-* Licensed under http://www.opensource.org/licenses/MIT
-*
-* Designed and built by @connors, @dhg, and @fat.
-* =====================================================
-*/
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
 /* ----------------------------------
  * MODAL v1.0.0
  * Licensed under The MIT License

dist/template.html

@@ -37,7 +37,7 @@
   <body>
 
   <!-- Make sure all your bars are the first things in your <body> -->
-  <header class="bar-title">
+  <header class="bar-nav">
     <h1 class="title">Ratchet</h1>
   </header>
 

dist/theme-classic.css

@@ -1,12 +1,12 @@
 /*
-* =====================================================
-* Ratchet v2.0.0
-* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
-* Licensed under http://www.opensource.org/licenses/MIT
-*
-* Designed and built by @connors, @dhg, and @fat.
-* =====================================================
-*/
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
 
 .bar-header-secondary ~ .content {
   padding-top: 108px;

examples/components/classic/index.html

@@ -49,10 +49,10 @@
       <li>Item1</li>
       <li>Item2</li>
       <li>Item3</li>
-      <li class="table-view-divider">With counts</li>
-      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
-      <li>Item2 <span class="count">1</span></li>
-      <li>Item3 <span class="count">1</span></li>
+      <li class="table-view-divider">With badges</li>
+      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
+      <li>Item2 <span class="badge">1</span></li>
+      <li>Item3 <span class="badge">1</span></li>
       <li class="table-view-divider">With chevrons</li>
       <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
       <li>Item2 <span class="chevron"></span></li>
@@ -330,11 +330,11 @@
   <a class="button-positive">Button</a>
   <a class="button-negative">Button</a>
 
-  <!-- Buttons w/ counts -->
-  <a class="button">Button <span class="count">1</span></a>
-  <a class="button-primary">Button <span class="count">1</span></a>
-  <a class="button-positive">Button <span class="count">1</span></a>
-  <a class="button-negative">Button <span class="count">1</span></a>
+  <!-- Buttons w/ badges -->
+  <a class="button">Button <span class="badge">1</span></a>
+  <a class="button-primary">Button <span class="badge">1</span></a>
+  <a class="button-positive">Button <span class="badge">1</span></a>
+  <a class="button-negative">Button <span class="badge">1</span></a>
 
   <!-- Buttons at block level -->
   <a class="button-block">Block level button</a>
@@ -342,41 +342,41 @@
   <a class="button-positive button-block">Block level button</a>
   <a class="button-negative button-block">Block level button</a>
 
-  <!-- Buttons at block level w/ counts -->
-  <a class="button-block">Block level button <span class="count">1</span></a>
-  <a class="button-primary button-block">Block level button <span class="count">1</span></a>
-  <a class="button-positive button-block">Block level button <span class="count">1</span></a>
-  <a class="button-negative button-block">Block level button <span class="count">1</span></a>
+  <!-- Buttons at block level w/ badges -->
+  <a class="button-block">Block level button <span class="badge">1</span></a>
+  <a class="button-primary button-block">Block level button <span class="badge">1</span></a>
+  <a class="button-positive button-block">Block level button <span class="badge">1</span></a>
+  <a class="button-negative button-block">Block level button <span class="badge">1</span></a>
 
   <!-- TOGGLE ============================================================ -->
   <div class="toggle">
     <div class="toggle-handle"></div>
   </div>
 
-  <!-- COUNTS ============================================================ -->
-  <span class="count">1</span>
-  <span class="count-primary">2</span>
-  <span class="count-positive">3</span>
-  <span class="count-negative">4</span>
-  <span class="count">5</span>
+  <!-- BADGES ============================================================ -->
+  <span class="badge">1</span>
+  <span class="badge-primary">2</span>
+  <span class="badge-positive">3</span>
+  <span class="badge-negative">4</span>
+  <span class="badge">5</span>
 
   <!-- LIST ============================================================ -->
   <ul class="table-view">
     <li>Item1</li>
     <li>Item2</li>
     <li>Item3</li>
-    <li class="table-view-divider">With counts</li>
-    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
-    <li>Item2 <span class="count">1</span></li>
-    <li>Item3 <span class="count">1</span></li>
+    <li class="table-view-divider">With badges</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
+    <li>Item2 <span class="badge">1</span></li>
+    <li>Item3 <span class="badge">1</span></li>
     <li class="table-view-divider">With chevrons</li>
     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
     <li>Item2 <span class="chevron"></span></li>
     <li>Item3 <span class="chevron"></span></li>
-    <li class="table-view-divider">With chevrons &amp; counts</li>
-    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count-primary">1</span></li>
-    <li>Item2 <span class="chevron"></span><span class="count-negative">1</span></li>
-    <li>Item3 <span class="chevron"></span><span class="count-positive">1</span></li>
+    <li class="table-view-divider">With chevrons &amp; badges</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li>
+    <li>Item2 <span class="chevron"></span><span class="badge-negative">1</span></li>
+    <li>Item3 <span class="chevron"></span><span class="badge-positive">1</span></li>
     <li class="table-view-divider">With buttons</li>
     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
     <li>Item2 <a class="button-primary">Button</a></li>
@@ -410,18 +410,18 @@
     <li>Item1</li>
     <li>Item2</li>
     <li>Item3</li>
-    <li class="table-view-divider">With counts</li>
-    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
-    <li>Item2 <span class="count">1</span></li>
-    <li>Item3 <span class="count">1</span></li>
+    <li class="table-view-divider">With badges</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
+    <li>Item2 <span class="badge">1</span></li>
+    <li>Item3 <span class="badge">1</span></li>
     <li class="table-view-divider">With chevrons</li>
     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
     <li>Item2 <span class="chevron"></span></li>
     <li>Item3 <span class="chevron"></span></li>
-    <li class="table-view-divider">With chevrons &amp; counts</li>
-    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count">1</span></li>
-    <li>Item2 <span class="chevron"></span><span class="count">1</span></li>
-    <li>Item3 <span class="chevron"></span><span class="count">1</span></li>
+    <li class="table-view-divider">With chevrons &amp; badges</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li>
+    <li>Item2 <span class="chevron"></span><span class="badge">1</span></li>
+    <li>Item3 <span class="chevron"></span><span class="badge">1</span></li>
     <li class="table-view-divider">With buttons</li>
     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
     <li>Item2 <a class="button-primary">Button</a></li>

examples/components/default/index.html

@@ -49,10 +49,10 @@
       <li>Item1</li>
       <li>Item2</li>
       <li>Item3</li>
-      <li class="table-view-divider">With counts</li>
-      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
-      <li>Item2 <span class="count">1</span></li>
-      <li>Item3 <span class="count">1</span></li>
+      <li class="table-view-divider">With badges</li>
+      <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
+      <li>Item2 <span class="badge">1</span></li>
+      <li>Item3 <span class="badge">1</span></li>
       <li class="table-view-divider">With chevrons</li>
       <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
       <li>Item2 <span class="chevron"></span></li>
@@ -330,11 +330,11 @@
   <a class="button-positive">Button</a>
   <a class="button-negative">Button</a>
 
-  <!-- Buttons w/ counts -->
-  <a class="button">Button <span class="count">1</span></a>
-  <a class="button-primary">Button <span class="count">1</span></a>
-  <a class="button-positive">Button <span class="count">1</span></a>
-  <a class="button-negative">Button <span class="count">1</span></a>
+  <!-- Buttons w/ badges -->
+  <a class="button">Button <span class="badge">1</span></a>
+  <a class="button-primary">Button <span class="badge">1</span></a>
+  <a class="button-positive">Button <span class="badge">1</span></a>
+  <a class="button-negative">Button <span class="badge">1</span></a>
 
   <!-- Buttons at block level -->
   <a class="button-block">Block level button</a>
@@ -342,41 +342,41 @@
   <a class="button-positive button-block">Block level button</a>
   <a class="button-negative button-block">Block level button</a>
 
-  <!-- Buttons at block level w/ counts -->
-  <a class="button-block">Block level button <span class="count">1</span></a>
-  <a class="button-primary button-block">Block level button <span class="count">1</span></a>
-  <a class="button-positive button-block">Block level button <span class="count">1</span></a>
-  <a class="button-negative button-block">Block level button <span class="count">1</span></a>
+  <!-- Buttons at block level w/ badges -->
+  <a class="button-block">Block level button <span class="badge">1</span></a>
+  <a class="button-primary button-block">Block level button <span class="badge">1</span></a>
+  <a class="button-positive button-block">Block level button <span class="badge">1</span></a>
+  <a class="button-negative button-block">Block level button <span class="badge">1</span></a>
 
   <!-- TOGGLE ============================================================ -->
   <div class="toggle">
     <div class="toggle-handle"></div>
   </div>
 
-  <!-- COUNTS ============================================================ -->
-  <span class="count">1</span>
-  <span class="count-primary">2</span>
-  <span class="count-positive">3</span>
-  <span class="count-negative">4</span>
-  <span class="count">5</span>
+  <!-- BADGES ============================================================ -->
+  <span class="badge">1</span>
+  <span class="badge-primary">2</span>
+  <span class="badge-positive">3</span>
+  <span class="badge-negative">4</span>
+  <span class="badge">5</span>
 
   <!-- LIST ============================================================ -->
   <ul class="table-view">
     <li>Item1</li>
     <li>Item2</li>
     <li>Item3</li>
-    <li class="table-view-divider">With counts</li>
-    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
-    <li>Item2 <span class="count">1</span></li>
-    <li>Item3 <span class="count">1</span></li>
+    <li class="table-view-divider">With badges</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
+    <li>Item2 <span class="badge">1</span></li>
+    <li>Item3 <span class="badge">1</span></li>
     <li class="table-view-divider">With chevrons</li>
     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
     <li>Item2 <span class="chevron"></span></li>
     <li>Item3 <span class="chevron"></span></li>
-    <li class="table-view-divider">With chevrons &amp; counts</li>
-    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count-primary">1</span></li>
-    <li>Item2 <span class="chevron"></span><span class="count-negative">1</span></li>
-    <li>Item3 <span class="chevron"></span><span class="count-positive">1</span></li>
+    <li class="table-view-divider">With chevrons &amp; badges</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li>
+    <li>Item2 <span class="chevron"></span><span class="badge-negative">1</span></li>
+    <li>Item3 <span class="chevron"></span><span class="badge-positive">1</span></li>
     <li class="table-view-divider">With buttons</li>
     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
     <li>Item2 <a class="button-primary">Button</a></li>
@@ -410,18 +410,18 @@
     <li>Item1</li>
     <li>Item2</li>
     <li>Item3</li>
-    <li class="table-view-divider">With counts</li>
-    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
-    <li>Item2 <span class="count">1</span></li>
-    <li>Item3 <span class="count">1</span></li>
+    <li class="table-view-divider">With badges</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
+    <li>Item2 <span class="badge">1</span></li>
+    <li>Item3 <span class="badge">1</span></li>
     <li class="table-view-divider">With chevrons</li>
     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
     <li>Item2 <span class="chevron"></span></li>
     <li>Item3 <span class="chevron"></span></li>
-    <li class="table-view-divider">With chevrons &amp; counts</li>
-    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count">1</span></li>
-    <li>Item2 <span class="chevron"></span><span class="count">1</span></li>
-    <li>Item3 <span class="chevron"></span><span class="count">1</span></li>
+    <li class="table-view-divider">With chevrons &amp; badges</li>
+    <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li>
+    <li>Item2 <span class="chevron"></span><span class="badge">1</span></li>
+    <li>Item3 <span class="chevron"></span><span class="badge">1</span></li>
     <li class="table-view-divider">With buttons</li>
     <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
     <li>Item2 <a class="button-primary">Button</a></li>

index.html

@@ -29,4 +29,4 @@ base_url: "./"
         <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
       </li>
     </ul>
-  </section>-->
+  </section>-->

lib/sass/badges.scss

@@ -1,12 +1,12 @@
 //
-// Counts
+// Badges
 // --------------------------------------------------
 
-[class*="count"] {
+[class*="badge"] {
   display: inline-block;
   color: $default-color;
 
-  &.count-filled {
+  &.badge-filled {
     padding: 2px 9px;
     color: #fff;
     font-size: 13px;
@@ -17,32 +17,32 @@
 }
 
 
-// Count modifiers
+// Badge modifiers
 // --------------------------------------------------
 
-// Main count
-.count-primary {
+// Main badge
+.badge-primary {
   color: $primary-color;
 
-  &.count-filled {
+  &.badge-filled {
     background-color: $primary-color;
   }
 }
 
-// Positive count
-.count-positive {
+// Positive badge
+.badge-positive {
   color: $positive-color;
 
-  &.count-filled {
+  &.badge-filled {
     background-color: $positive-color;
   }
 }
 
-// Negative count
-.count-negative {
+// Negative badge
+.badge-negative {
   color: $negative-color;
 
-  &.count-filled {
+  &.badge-filled {
     background-color: $negative-color;
   }
 }
@@ -52,21 +52,21 @@
 // --------------------------------------------------
 
 // Generic styles for all counts within default buttons
-[class*="button"] [class*="count"] {
+[class*="button"] [class*="badge"] {
   font-size: 12px;
   padding-top: 2px;
   padding-bottom: 2px;
   margin: -2px -4px -2px 4px;
 }
 // Styles for filled counts within filled buttons
-.button-filled .count-filled,
-[class*="button"]:active .count-filled {
+.button-filled .badge-filled,
+[class*="button"]:active .badge-filled {
   background-color: rgba(0,0,0,.2);
 }
 // Position counts within block level buttons
-// Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
+// Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
 // stays at true center of button
-.button-block [class*="count"] {
+.button-block [class*="badge"] {
   position: absolute;
   right: 0;
   margin-right: 10px;

lib/sass/ratchet.scss

@@ -15,7 +15,7 @@
 @import "forms.scss";
 @import "buttons.scss";
 @import "chevrons.scss";
-@import "counts.scss";
+@import "badges.scss";
 @import "segmented-controllers.scss";
 @import "popovers.scss";