Added classes to do the styling instead of the existing IDs.(B3ST#65)

xipasduarte · Sep 1, 2015 · fe5aa7e · fe5aa7e
1 parent 4e86cc3
commit fe5aa7e
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 23 deletions.
diff --git a/app/styles/scss/_footer.scss b/app/styles/scss/_footer.scss
@@ -1,6 +1,6 @@
 /* Footer */
 
-#footer {
+.site-footer {
   background-color: $color-background;
   border-top:       1px solid $color-background-border;
   clear:            both;

diff --git a/app/styles/scss/_mixins.scss b/app/styles/scss/_mixins.scss
diff --git a/app/styles/scss/_wordpress.scss b/app/styles/scss/_wordpress.scss
@@ -1,22 +1,26 @@
 body.admin-bar {
   padding-top: 28px;
 
-  #content-wrapper,
-  .navbar-fixed-top {
-    top: 28px;
-  }
-
   @media screen and (max-width: 782px) {
     padding-top: 46px;
+  }
+
+  .site-body {
+    top: 28px;
 
-    #content-wrapper,
-    .navbar-fixed-top {
+    @media screen and (max-width: 782px) {
       top: 46px;
     }
   }
 
-  @media screen and (max-width: 600px) {
-    .navbar-fixed-top {
+  .navbar-fixed-top {
+    top: 28px;
+
+    @media screen and (max-width: 782px) {
+      top: 46px;
+    }
+
+    @media screen and (max-width: 600px) {
       position: absolute;
     }
   }

diff --git a/app/styles/scss/style.scss b/app/styles/scss/style.scss
@@ -11,7 +11,7 @@
 /**
  * Import theme mixins.
  */
-@import "mixins";
+@import "mixins/mixins";
 
 /**
  * Import accessibility styles.
@@ -42,14 +42,14 @@ body {
   }
 }
 
-#header {
+.site-header {
   min-height: 50px;
 }
 
-#content-wrapper {
+.site-body {
   @extend .container;
 
-  #main {
+  .site-body__main {
     @include make-md-column(9);
     @include make-xs-column(12);
 
@@ -64,7 +64,7 @@ body {
     }
   }
 
-  #sidebar {
+  .site-body__sidebar {
     @extend .container;
     @include make-md-column(3);
     @include make-xs-column(12);
@@ -75,7 +75,7 @@ body {
   }
 
   #b3-error,
-  #sidebar {
+  .site-body__sidebar {
     margin-top: 40px;
   }
 }
@@ -108,7 +108,6 @@ body {
   clear:        both;
   margin-left:  auto;
   margin-right: auto;
-
 }
 
 .alignnone {

diff --git a/index.php b/index.php
@@ -15,13 +15,13 @@
     <?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?> role="document">
-    <div id="header" role="header"></div>
-    <div id="content-wrapper">
-        <div id="main" role="main"></div>
-        <div id="sidebar"></div>
+    <div id="header" class="site-header" role="header"></div>
+    <div id="content-wrapper" class="site-body">
+        <div id="main" class="site-body__main" role="main"></div>
+        <div id="sidebar" class="site-body__sidebar"></div>
     </div>
-    <div id="footer" role="footer"></div>
-    <div id="notifications"></div>
+    <div id="footer" class="site-footer" role="footer"></div>
+    <div id="notifications" class="site-notifications"></div>
     <?php wp_footer(); ?>
 </body>
 </html>