Dashify property names

_includes/header.html

@@ -1,11 +1,11 @@
 <nav class="site-navigation">
-  <a href="{{ site.repository_url }}" class="site-nav_item">
+  <a href="{{ site.repository_url }}" class="site-navigation-item">
     github
   </a>
-  <a href="{{ site.documentation_url }}" class="site-nav_item">
+  <a href="{{ site.documentation_url }}" class="site-navigation-item">
     docs
   </a>
-  <a href="{{ site.thoughtbot_url }}" class="site-nav_item">
+  <a href="{{ site.thoughtbot_url }}" class="site-navigation-item">
     thoughtbot
   </a>
 </nav>

index.html

@@ -5,40 +5,40 @@
 <main>
 
   <section class="install">
-    <header class="install_header">
+    <header class="install-header">
       <h1>01. Install</h1>
     </header>
-    <section class="install_direction">
-      <div class="install_direction_step">
-        <p>Install high_voltage in your local system</p>
-        <code class="install_direction_sample">$ gem install high_voltage</code>
+    <section class="install-direction">
+      <div class="install-direction-step">
+        <p class="install-direction-instructions">Install high_voltage in your local system</p>
+        <code class="install-direction-sample">$ gem install high_voltage</code>
       </div>
-      <div class="install_direction_step">
-        <p>Include high_voltage in your gemfile</p>
-        <code class="install_direction_sample">gem "high_voltage"</code>
+      <div class="install-direction-step">
+        <p class="install-direction-instructions">Include high_voltage in your gemfile</p>
+        <code class="install-direction-sample">gem "high_voltage"</code>
       </div>
     </section>
-    <section class="install_direction install_direction-optional">
-      <div class="install_direction_step">
-        <p>For Rails versions prior to 3.0, use the 0.9.2 tag of high_voltage</p>
-        <code class="install_direction_sample">$ gem "high_voltage", "~> 0.9.2"</code>
+    <section class="install-direction install_direction-optional">
+      <div class="install-direction-step">
+        <p class="install-direction-instructions">For Rails versions prior to 3.0, use the 0.9.2 tag of high_voltage</p>
+        <code class="install-direction-sample">$ gem "high_voltage", "~> 0.9.2"</code>
       </div>
     </section>
   </section>
 
   <section class="usage">
-    <header class="usage_header">
+    <header class="usage-header">
       <h1>02. USAGE</h1>
     </header>
-    <div class="usage_content">
-      <p class="usage_directions">Write your static pages and put them in the <code>/app/views/pages</code> directory</p>
+    <div class="usage-content">
+      <p class="usage-directions">Write your static pages and put them in the <code>/app/views/pages</code> directory</p>
       {% include usage_illustration-small.svg %}
       {% include usage_illustration-large.svg %}
     </div>
   </section>
 
   <footer class="refrences">
-    <p class="refrences_documentation">
+    <p class="refrences-documentation">
       For advanced configuration options <span>—</span> consult project <a href="{{ site.documentation_url }}">documentation</a>
     </p>
     <a href="https://www.youtube.com/watch?v=HD5tnb2RBYg">{% include dangerdanger.svg %}</a>

stylesheets/modules/_install.scss

@@ -2,8 +2,8 @@
   margin-bottom: $gutter-width;
 }
 
-.install_header,
-.install_direction {
+.install-header,
+.install-direction {
   @extend %container;
   background-color: $section-background-color;
   border: 1px solid $base-border-color;
@@ -13,45 +13,43 @@
   }
 }
 
-.install_direction {
+.install-direction {
   padding: 0;
   text-transform: lowercase;
 }
 
-.install_direction p,
-.install_direction_sample {
+.install-direction-instructions,
+.install-direction-sample {
   padding: $gutter-width;
   margin: 0;
 }
 
-.install_direction_step {
+.install-direction-step {
   @include clearfix;
 }
 
-.install_direction p {
+.install-direction-instructions {
   float: left;
 }
 
-.install_direction_sample,
-.install_direction-optional {
+.install-direction-sample {
   border-bottom: 1px solid $base-border-color;
   border-left: 1px solid $base-border-color;
   float: right;
   font-size: 1.25em;
   min-width: 25rem;
 
-  .install_direction_step:last-child & {
+  .install-direction-step:last-child & {
     border-bottom-style: none;
   }
 }
 
-.install_direction-optional {
+.install-direction-optional {
   border-color: $alt-border-color;
   border-top-color: $base-border-color;
   background-color: white;
 
-  .install_direction_sample {
+  .install-direction-sample {
     border-color: $alt-border-color;
   }
 }
-

stylesheets/modules/_navigation.scss

@@ -5,7 +5,7 @@
   text-align: right;
 }
 
-.site-nav_item {
+.site-navigation-item {
   color: $dark-gray;
   text-decoration: none;
 

stylesheets/modules/_refrences.scss

@@ -5,14 +5,14 @@
   text-transform: lowercase;
 }
 
-.refrences_documentation {
+.refrences-documentation {
   border: 1px solid $base-accent-color;
   padding: $gutter-width;
   float: left;
   font-size: 1.25em;
 }
 
-.refrences_dangerdanger {
+.refrences-dangerdanger {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -21,15 +21,15 @@
 
 @media screen and (min-width : $large-screen) {
 
-  .refrences_documentation {
+  .refrences-documentation {
 
     span:after {
       content: "";
       display: block;
     }
   }
 
-  .refrences_dangerdanger {
+  .refrences-dangerdanger {
     float: right;
   }
 }

stylesheets/modules/_usage.scss

@@ -2,14 +2,14 @@
   margin-bottom: $gutter-width;
 }
 
-.usage_header,
-.usage_content {
+.usage-header,
+.usage-content {
   @extend %container;
   background-color: $section-background-color;
   border: 1px solid $base-border-color;
 }
 
-.usage_content {
+.usage-content {
   border-top-style: none;
   position: relative;
 
@@ -19,32 +19,32 @@
   }
 }
 
-.usage_directions {
+.usage-directions {
   max-width: 25em;
   padding: $gutter-width;
 }
 
-.usage_illustration-small {
+.usage-illustration-small {
   display: block;
 }
 
-.usage_illustration-large {
+.usage-illustration-large {
   display: none;
 }
 
 @media screen and (min-width : $large-screen) {
 
-  .usage_directions {
+  .usage-directions {
     @include position(absolute, 0em null null 0em);
     border-right: 1px solid $base-border-color;
     border-bottom: 1px solid $base-border-color;
   }
 
-  .usage_illustration-small {
+  .usage-illustration-small {
     display: none;
   }
 
-  .usage_illustration-large {
+  .usage-illustration-large {
     display: block;
     font-size: 1.25em;
   }