studio - course nav: general flex-grid layout - WIP

cms/static/sass/_header.scss

-//studio global header and navigation
+// studio global header and navigation
+// ====================
+
 .wrapper-header {
   margin: 0 0 ($baseline*1.5) 0;
   padding: $baseline;
@@ -29,6 +31,27 @@
   }
 }
 
+// ====================
+
+// basic layout
+.wrapper-left, .wrapper-right {
+  @include box-sizing(border-box);
+}
+
+.wrapper-left {
+  width: flex-grid(10, 12);
+  float: left;
+  margin-right: flex-gutter();
+}
+
+.wrapper-right {
+  width: flex-grid(2, 12);
+  float: right;
+}
+
+// ====================
+
+// specific elements - branding
 .branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch {
   display: inline-block;
   vertical-align: top;
@@ -51,6 +74,9 @@
   }
 }
 
+// ====================
+
+// specific elements - course name/info
 .info-course {
   position: relative;
   max-width: 200px;
@@ -98,7 +124,9 @@
   }
 }
 
-// course info
+// ====================
+
+// specific elements - course nav
 .nav-course {
   width: 335px;
   margin-top: -($baseline/4);
@@ -160,9 +188,10 @@
   }
 }
 
-// account-based nav
+// ====================
+
+// specific elements - account-based nav
 .nav-account {
-  float: right;
   max-width: 300px;
   min-width: 175px;
   width: 20%;
@@ -188,7 +217,9 @@
   }
 }
 
-// dropdown UI
+// ====================
+
+// UI - dropdown
 .nav-dropdown {
 
   .nav-item {
@@ -236,7 +267,7 @@
     }
   }
 
-  // vendor
+  // UI - dropdown - vendor
   .arrow_box {
     position: relative;
     background: #fff;
@@ -267,7 +298,7 @@
     margin-left: -11px;
   }
 
-  // specific navs
+  // UI - dropdown - specific navs
   &.nav-account {
 
     .nav-sub {
@@ -305,7 +336,9 @@
   }
 }
 
-// is-signed in
+// ====================
+
+// STATE: is-signed in
 .is-signedin {
 
   &.course .branding {
@@ -334,10 +367,12 @@
   }
 }
 
-// not signed in
+// ====================
+
+// STATE: not signed in
 .not-signedin {
 
-  // unauthenticated nav
+  // STATE: not signed in - unauthenticated nav
   .nav-not-signedin {
     float: right;
     margin-top: ($baseline/4);
@@ -347,7 +382,6 @@
       display: inline-block;
       vertical-align: middle;
       margin: 0 $baseline 0 0;
-      font-weight: 500;
 
       &:last-child {
         margin-right: 0;
@@ -360,7 +394,7 @@
       }
     }
 
-    // specific items
+    // STATE: not signed in - specific items
     .nav-not-signedin-help {
 
     }
@@ -374,7 +408,7 @@
         @include font-size(14);
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
-        font-weight: 600 !important;
+        font-weight: 600;
       }
     }
 
@@ -386,14 +420,15 @@
         @include font-size(14);
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
-        font-weight: 600 !important;
+        font-weight: 600;
       }
     }
   }
 }
 
+// ====================
 
-// active/current nav states
+// STATE: active/current nav states
 body.howitworks .nav-not-signedin-hiw,
 body.signin .nav-not-signedin-signin,
 body.signup .nav-not-signedin-signup,
@@ -405,7 +440,9 @@ body.course.outline .nav-course-courseware
   }
 }
 
-// js enabled 
+// ====================
+
+// STATE: js enabled 
 .js {
 
   .nav-dropdown {

cms/templates/widgets/header.html

@@ -3,10 +3,7 @@
 <div class="wrapper-header wrapper">
   <header class="primary" role="banner">
 
-    <span class="wrapper wrapper-flex">
-      
-    </span>
-    
+    <div class="wrapper wrapper-left ">
       <h1 class="branding"><a href="/">edX Studio</a></h1>
       
       % if context_course:
@@ -62,7 +59,9 @@
         </ol>
       </nav>
       % endif
+    </div>
     
+    <div class="wrapper wrapper-right">
       % if user.is_authenticated():    
       <nav class="nav-account nav-is-signedin nav-dropdown">
         <h2 class="sr">Currently logged in as:</h2>
@@ -105,5 +104,6 @@
         </ol>
       </nav>
       % endif      
+    </div>
   </header>
 </div>
\ No newline at end of file