diff --git a/src/scss/cdb-components/boxes.scss b/src/scss/cdb-components/boxes.scss
index 5f4e5e2..aaf1a2b 100644
--- a/src/scss/cdb-components/boxes.scss
+++ b/src/scss/cdb-components/boxes.scss
@@ -6,7 +6,7 @@
 
 
 ```
-  <div class="CDB-Box-Modal">&nbsp;</div>
+  <div class="CDB-Box-modal">&nbsp;</div>
 ```
 */
 
@@ -14,7 +14,7 @@
 @import '../cdb-variables/sizes';
 @import '../cdb-variables/colors';
 
-.CDB-Box-Modal {
+.CDB-Box-modal {
   border: 1px solid $cMainLine;
   border-radius: 4px;
   background: $cWhite;
diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/headers.scss
index 5bc7394..497bcd7 100644
--- a/src/scss/cdb-components/headers.scss
+++ b/src/scss/cdb-components/headers.scss
@@ -6,8 +6,8 @@
 
 ```
 <div class="CDB-HeaderInfo is-block">
-  <div class="CDB-HeaderInfo-Title u-bSpace">
-    <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
+  <div class="CDB-HeaderInfo-title u-bSpace">
+    <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
     <div class="CDB-HeaderInfo-Actions">
       <a href="#">
           <div class="CDB-Shape">
@@ -21,12 +21,12 @@
     </div>
   </div>
   <ul class="CDB-HeaderInfo-List">
-    <li class="CDB-HeaderInfo-ListItem">
+    <li class="CDB-HeaderInfo-listItem">
       <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
         PUBLIC
       </button>
     </li>
-    <li class="CDB-HeaderInfo-ListItem">
+    <li class="CDB-HeaderInfo-listItem">
       <ul class="CDB-AvatarList u-iBlock">
         <li class="CDB-AvatarList-item">
           <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia" />
@@ -42,7 +42,7 @@
         </li>
       </ul>
     </li>
-    <li class="CDB-HeaderInfo-ListItem">
+    <li class="CDB-HeaderInfo-listItem">
       <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock u-altTextColor">Published 8 days ago</p>
     </li>
   </ul>
@@ -53,19 +53,19 @@
 <br/>
 
 <div class="CDB-HeaderInfo">
-  <button class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
     <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
   </button>
-  <div class="CDB-HeaderInfo-Inner">
-    <div class="CDB-HeaderInfo-Title u-bSpace">
-      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected </h2>
+  <div class="CDB-HeaderInfo-inner">
+    <div class="CDB-HeaderInfo-title u-bSpace">
+      <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected </h2>
       <ul class="CDB-HeaderInfo-Actions">
-        <li class="CDB-HeaderInfo-ActionsItem">
+        <li class="CDB-HeaderInfo-actionsItem">
           <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
             <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
           </button>
         </li>
-        <li class="CDB-HeaderInfo-ActionsItem">
+        <li class="CDB-HeaderInfo-actionsItem">
           <a href="#">
               <div class="CDB-Shape">
                 <div class="CDB-Shape-threePoints is-blue is-small">
@@ -93,13 +93,13 @@
 <br/>
 
 <div class="CDB-HeaderInfo">
-  <button class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
     <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
   </button>
-  <div class="CDB-HeaderInfo-Inner">
-    <div class="CDB-HeaderInfo-Title u-bSpace">
-      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
-      <div class="CDB-HeaderInfo-Actions">
+  <div class="CDB-HeaderInfo-inner">
+    <div class="CDB-HeaderInfo-title u-bSpace">
+      <h2 class="CDB-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
+      <div class="CDB-HeaderInfo-actions">
         <a href="#">
             <div class="CDB-Shape">
               <div class="CDB-Shape-threePoints is-blue is-small">
@@ -120,10 +120,10 @@
 <br/>
 
 <div class="CDB-HeaderInfo">
-  <button class="u-rSpace--xl CDB-HeaderInfo-Back">
+  <button class="u-rSpace--xl CDB-HeaderInfo-back">
     <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
   </button>
-  <div class="CDB-HeaderInfo-Inner">
+  <div class="CDB-HeaderInfo-inner">
     <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text u-bSpace--m">
     <div class="CDB-Shape u-iBlock">
       <ul class="CDB-Shape-Dataset is-small is-grey">
@@ -142,11 +142,11 @@
 <div class="CDB-HeaderInfo">
   <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
 
-  <div class="CDB-HeaderInfo-Inner CDB-Text">
-    <div class="CDB-HeaderInfo-Title u-bSpace--m">
-      <h2 class="CDB-Text CDB-HeaderInfo-TitleText CDB-Size-large">Type</h2>
+  <div class="CDB-HeaderInfo-inner CDB-Text">
+    <div class="CDB-HeaderInfo-title u-bSpace--m">
+      <h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large">Type</h2>
       
-      <div class="CDB-HeaderInfo-Actions">
+      <div class="CDB-HeaderInfo-actions">
         <a href="#">
           <div class="CDB-Shape">
             <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
@@ -178,7 +178,7 @@
     display: block;
   }
 }
-.CDB-HeaderInfo-ListItem {
+.CDB-HeaderInfo-listItem {
   display: inline-block;
   margin-right: 8px;
   vertical-align: middle;
@@ -188,17 +188,17 @@
   }
 }
 
-.CDB-HeaderInfo-Inner {
+.CDB-HeaderInfo-inner {
   @include flex(1);
 }
-.CDB-HeaderInfo-Back {
+.CDB-HeaderInfo-back {
   margin-top: 7px;
 }
-.CDB-HeaderInfo-Title {
+.CDB-HeaderInfo-title {
   @include display-flex();
   @include align-items(center);
 }
-.CDB-HeaderInfo-TitleText {
+.CDB-HeaderInfo-titleText {
   @include flex(1);
   width: 0;
   padding-right: 16px;
@@ -206,7 +206,7 @@
   white-space: nowrap;
   overflow: hidden;
 }
-.CDB-HeaderInfo-ActionsItem {
+.CDB-HeaderInfo-actionsItem {
   display: inline-block;
   margin-left: 4px;
   vertical-align: middle;
diff --git a/src/scss/cdb-components/lists.scss b/src/scss/cdb-components/lists.scss
index ff40d44..f9e3cac 100644
--- a/src/scss/cdb-components/lists.scss
+++ b/src/scss/cdb-components/lists.scss
@@ -13,7 +13,7 @@
 @import '../cdb-variables/sizes';
 @import '../cdb-variables/colors';
 
-.CDB-ListDecoration-Item {
+.CDB-ListDecoration-item {
   border-bottom: 1px solid $cSecondaryLine;
 
   &:last-child {
@@ -21,7 +21,7 @@
   }
 }
 
-.CDB-ListDecoration-ItemLink {
+.CDB-ListDecoration-itemLink {
   display: block;
   padding: 12px 16px;
 }
diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss
index 75ea375..e55d332 100644
--- a/src/scss/cdb-components/menu.scss
+++ b/src/scss/cdb-components/menu.scss
@@ -7,26 +7,26 @@
 
 ```
 <nav class="CDB-NavMenu">
-  <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
-    <li class="CDB-NavMenu-Item">
-      <button class="CDB-NavMenu-Link">DATA</button>
+  <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">DATA</button>
     </li>
-    <li class="CDB-NavMenu-Item">
-      <button class="CDB-NavMenu-Link">STYLE</button>
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">STYLE</button>
     </li>
-    <li class="CDB-NavMenu-Item is-selected">
-      <button class="CDB-NavMenu-Link">POP-UP</button>
+    <li class="CDB-NavMenu-item is-selected">
+      <button class="CDB-NavMenu-link">POP-UP</button>
       <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
-        <li class="CDB-NavSubmenu-Item is-selected">
-          <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button>
+        <li class="CDB-NavSubmenu-item is-selected">
+          <button class="CDB-NavSubmenu-link">CLICK <span class="CDB-NavSubmenu-status u-hintTextColor">NONE</span></button>
         </li>
-        <li class="CDB-NavSubmenu-Item">
-          <button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button>
+        <li class="CDB-NavSubmenu-item">
+          <button class="CDB-NavSubmenu-link">HOVER <span class="CDB-NavSubmenu-status u-hintTextColor">NONE</span></button>
         </li>
       </ul>
     </li>
-    <li class="CDB-NavMenu-Item">
-      <button class="CDB-NavMenu-Link">LEGEND</button>
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">LEGEND</button>
     </li>
   </ul>
   <div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;">
@@ -39,26 +39,26 @@
 
 <div style="background: #2E3C43; height: 100px; padding: 20px;">
   <nav class="CDB-NavMenu is-dark">
-    <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
-      <li class="CDB-NavMenu-Item CDB-Text">
-        <button class="CDB-NavMenu-Link">DATA</button>
+    <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
+      <li class="CDB-NavMenu-item CDB-Text">
+        <button class="CDB-NavMenu-link">DATA</button>
       </li>
-      <li class="CDB-NavMenu-Item">
-        <button class="CDB-NavMenu-Link">STYLE</button>
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">STYLE</button>
       </li>
       <li class="CDB-NavMenu-item is-selected">
-        <button class="CDB-NavMenu-Link">POP-UP</button>
+        <button class="CDB-NavMenu-link">POP-UP</button>
         <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
-          <li class="CDB-NavSubmenu-Item is-selected">
-            <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></button>
+          <li class="CDB-NavSubmenu-item is-selected">
+            <button class="CDB-NavSubmenu-link">CLICK <span class="CDB-NavSubmenu-status">NONE</span></button>
           </li>
-          <li class="CDB-NavSubmenu-Item">
-            <button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></button>
+          <li class="CDB-NavSubmenu-item">
+            <button class="CDB-NavSubmenu-link">HOVER <span class="CDB-NavSubmenu-status">NONE</span></button>
           </li>
         </ul>
       </li>
-      <li class="CDB-NavMenu-Item">
-        <button class="CDB-NavMenu-Link">LEGEND</button>
+      <li class="CDB-NavMenu-item">
+        <button class="CDB-NavMenu-link">LEGEND</button>
       </li>
     </ul>
   </nav>
@@ -68,27 +68,27 @@
 <br/><br/>
 
 <nav class="CDB-NavMenu">
-  <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
-    <li class="CDB-NavMenu-Item">
-      <button class="CDB-NavMenu-Link">DATA</button>
+  <ul class="CDB-NavMenu-inner CDB-Text is-semibold CDB-Size-medium">
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">DATA</button>
     </li>
-    <li class="CDB-NavMenu-Item">
-      <button class="CDB-NavMenu-Link">STYLE</button>
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">STYLE</button>
     </li>
-    <li class="CDB-NavMenu-Item is-selected">
-      <button class="CDB-NavMenu-Link">POP-UP</button>
+    <li class="CDB-NavMenu-item is-selected">
+      <button class="CDB-NavMenu-link">POP-UP</button>
     </li>
-    <li class="CDB-NavMenu-Item">
-      <button class="CDB-NavMenu-Link">LEGEND</button>
+    <li class="CDB-NavMenu-item">
+      <button class="CDB-NavMenu-link">LEGEND</button>
     </li>
   </ul>
 
   <ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu">
-    <li class="CDB-NavSubmenu-Item is-selected">
-      <button class="CDB-NavSubmenu-Link u-upperCase">Click</button>
+    <li class="CDB-NavSubmenu-item is-selected">
+      <button class="CDB-NavSubmenu-link u-upperCase">Click</button>
     </li>
-    <li class="CDB-NavSubmenu-Item">
-      <button class="CDB-NavSubmenu-Link u-upperCase">Hover</button>
+    <li class="CDB-NavSubmenu-item">
+      <button class="CDB-NavSubmenu-link u-upperCase">Hover</button>
     </li>
   </ul>
 </nav>
@@ -102,7 +102,7 @@
   position: relative;
 }
 
-.CDB-NavMenu-Inner {
+.CDB-NavMenu-inner {
   position: relative;
   margin-bottom: 18px;
   border-bottom: 1px solid $cMainLine;
@@ -114,7 +114,7 @@
   padding: $baseSize 0 0 $baseSize * 2;
 }
 
-.CDB-NavMenu-Link {
+.CDB-NavMenu-link {
   display: block;
   margin-bottom: -1px;
   padding: 4px 0 11px;
@@ -122,14 +122,14 @@
   color: $cBlue;
 }
 
-.CDB-NavMenu-Item,
-.CDB-NavSubmenu-Item {
+.CDB-NavMenu-item,
+.CDB-NavSubmenu-item {
   display: inline-block;
   margin-right: 8px;
   vertical-align: middle;
 }
 
-.CDB-NavMenu-Item.is-selected .CDB-NavMenu-Link {
+.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
   border-bottom: 1px solid $cBlack;
   color: $cMainText;
 }
@@ -150,7 +150,7 @@
   margin-bottom: 18px;
 }
 
-.CDB-NavSubmenu-Link {
+.CDB-NavSubmenu-link {
   display: block;
   margin-bottom: -1px;
   padding-bottom: 12px;
@@ -158,38 +158,38 @@
   color: $cBlue;
 }
 
-.CDB-NavSubmenu-Item.is-selected .CDB-NavSubmenu-Link {
+.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
   border-bottom: 1px solid $cMainLine;
   color: $cMainText;
 }
 
-.CDB-NavSubmenu-Status {
+.CDB-NavSubmenu-status {
   margin-left: 2px;
 }
 
 .CDB-Navmenu.is-dark {
 
-  .CDB-NavMenu-Inner,
+  .CDB-NavMenu-inner,
   .CDB-NavSubmenu {
     border-bottom: 1px solid $cSecondaryText;
   }
 
-  .CDB-NavMenu-Link,
-  .CDB-NavSubmenu-Link {
+  .CDB-NavMenu-link,
+  .CDB-NavSubmenu-link {
     color: $cAltText;
   }
 
-  .CDB-NavMenu-Item.is-selected .CDB-NavMenu-Link {
+  .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
     border-bottom: 1px solid $cMainLine;
     color: $cWhite;
   }
 
-  .CDB-NavSubmenu-Item.is-selected .CDB-NavSubmenu-Link {
+  .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
     border-bottom: 1px solid $cMainLine;
     color: $cWhite;
   }
 
-  .CDB-NavSubmenu-Status {
+  .CDB-NavSubmenu-status {
     color: $cSecondaryText;
   }
 }