studiomohawk · March 16, 2012 00:55 · Mar 1, 2012 · Mar 1, 2012 · Oct 24, 2011 · Oct 24, 2011
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ Used to provide structural templates.
 ```
 t-template-name
 t-template-name--modifier-name
-t-template-name__element-name--element-modifier-name
+t-template-name__subcomponent-name--subcomponent-modifier-name
 ```
 
 **Examples**
@@ -24,11 +24,6 @@ t-media__img
 t-media__img--large
 t-media__opt
 t-media__body
-
-t-header
-t-content
-t-sidebar
-t-footer
 ```
 
 ## State Components
@@ -68,7 +63,7 @@ js-action-save
 js-ui-collapsible
 js-ui-dropdown
 js-ui-dropdown--control
-js-ui-dropdown--tray
+js-ui-dropdown--menu
 js-ui-carousel
 ```
 
@@ -79,7 +74,8 @@ Could reuse the Template Component naming convention, for example:
 ```
 specific-name
 specific-name--modifier-name
-specific-name__element-name--element-modifier-name
+specific-name__subcomponent-name
+specific-name__subcomponent-name--subcomponent-modifier-name
 ```
 
 Or just let anything go.
diff --git a/README.md b/README.md
@@ -38,16 +38,16 @@ Used to indicate the state of a component
 **Pattern**
 
 ```
-s-state-type
+is-state-type
 ```
 
 **Examples**
 
 ```
-s-hidden
-s-collapsed
-s-expanded
-s-selected
+is-hidden
+is-collapsed
+is-expanded
+is-selected
 ```
 
 ## JavaScript Components

diff --git a/html-example.html b/html-example.html
@@ -1,4 +1,8 @@
-<!-- what if we used more white-space around class values? does it make the code more readable and surface/separate the components among the rest of the info in the HTML? -->
+<!-- 
+What if we used more white-space around class values? 
+Does it make the code more readable and surface/separate the components 
+among the rest of the info in the HTML?
+-->
 
 <div class=" t-unit  t-media ">
     <div class=" t-media__img ">
@@ -7,7 +11,7 @@
         </a>
     </div>
     <form class=" t-media__opt  js-action-rate ">
-        <button class=" product-rating ">
+        <button class=" product-rating " type="submit">
             <div class=" product-rating__panel ">
                 <span class=" product-rating__points ">
                     5
@@ -22,7 +26,7 @@
         </button>
     </form>
     <div class=" t-media__body ">
-        <h2 class="h2">
+        <h2 class=" h2 ">
             <a href="#">Product title</a>
         </h2>
         <p>[content]</p>

diff --git a/README.md b/README.md
@@ -0,0 +1,85 @@
+## Template Components
+
+Used to provide structural templates.
+
+**Pattern**
+
+```
+t-template-name
+t-template-name--modifier-name
+t-template-name__element-name--element-modifier-name
+```
+
+**Examples**
+
+```
+t-icon
+t-icon--large
+
+t-btn
+t-btn--large
+
+t-media
+t-media__img
+t-media__img--large
+t-media__opt
+t-media__body
+
+t-header
+t-content
+t-sidebar
+t-footer
+```
+
+## State Components
+
+Used to indicate the state of a component
+
+**Pattern**
+
+```
+s-state-type
+```
+
+**Examples**
+
+```
+s-hidden
+s-collapsed
+s-expanded
+s-selected
+```
+
+## JavaScript Components
+
+Used to provide JS-only hooks for a component. Can be used to provide a JS-enhanced UI or to abstract other JS behaviours.
+
+**Pattern**
+
+```
+js-action-name
+```
+
+**Examples**
+
+```
+js-submit
+js-action-save
+js-ui-collapsible
+js-ui-dropdown
+js-ui-dropdown--control
+js-ui-dropdown--tray
+js-ui-carousel
+```
+
+## About theming Components
+
+Could reuse the Template Component naming convention, for example:
+
+```
+specific-name
+specific-name--modifier-name
+specific-name__element-name--element-modifier-name
+```
+
+Or just let anything go.
diff --git a/html-example.html b/html-example.html
@@ -0,0 +1,35 @@
+<!-- what if we used more white-space around class values? does it make the code more readable and surface/separate the components among the rest of the info in the HTML? -->
+
+<div class=" t-unit  t-media ">
+    <div class=" t-media__img ">
+        <a href="#">
+            <img class=" product-img " src="http://example.com" alt="">
+        </a>
+    </div>
+    <form class=" t-media__opt  js-action-rate ">
+        <button class=" product-rating ">
+            <div class=" product-rating__panel ">
+                <span class=" product-rating__points ">
+                    5
+                </span>
+                <span class=" product-rating__label ">
+                    upvotes
+                </span>
+            </div>
+            <strong class=" product-rating__action  t-btn  btn-normal ">
+                Upvote
+            </strong>
+        </button>
+    </form>
+    <div class=" t-media__body ">
+        <h2 class="h2">
+            <a href="#">Product title</a>
+        </h2>
+        <p>[content]</p>
+        <ul class=" t-uilist--hz ">
+            <li><a class=" tag " href="#">tag name</a></li>
+            <li><a class=" tag " href="#">tag name</a></li>
+            <li><a class=" tag " href="#">tag name</a></li>
+        </ul>
+    </div>
+</div>