Commits

Nate Arnold committed 712a5ee

Add stacked lists to replace hlists

Comments (0)

Files changed (11)

less/modules/brandingLogo/_brandingLogo_screen.less

 
 .brandingLogo {
     display: block;
-    width: 200px;
+    max-width: 200px;
     height: auto;
     margin: 20px auto;
 }

less/modules/hList/_hList_screen.less

  ----------------------------------------------------------------------- */
 
 // Clear Floats
-.hList:before,
-.hList:after {
-    content: " ";
-    display: table;
+.hList {
+    .mixin-clearfix();
 }
 
-.hList:after { clear: both; }
-
 .hList > * {
-    float: none;
-    width: 100%;
+    float: left;
+    width: 50%;
     text-align: center;
 }
 
 .hList > * + * {
-    margin-left: 0;
     margin-top: 5px;
 }
-
-.hList_spaced > * + * { margin-left: 0; }

less/modules/hList/_hList_small.less

  ----------------------------------------------------------------------- */
 
 .hList > * {
-    float: left;
     width: auto;
     text-align: left;
 }

less/modules/stackList/_stackList_screen.less

+
+/* ---------------------------------------------------------------------------
+ stackList -- Lays out horizontally on desktop but stacks vertically on mobile
+ ----------------------------------------------------------------------------- */
+
+// Clear Floats
+.stackList {
+    .mixin-clearfix();
+}
+
+.stackList > * {
+    text-align: center;
+}
+
+.stackList > * + * {
+    margin-top: 5px;
+}

less/modules/stackList/_stackList_small.less

+
+/* ---------------------------------------------------------------------
+ stackList Desktop Styles
+ ----------------------------------------------------------------------- */
+
+.stackList > * {
+    float: left;
+    width: auto;
+    text-align: left;
+}
+
+.stackList > * + * {
+    margin-left: 4px;
+    margin-top: 0;
+}
  ----------------------------------------------------------------------- */
 .brandingLogo {
   display: block;
-  width: 200px;
+  max-width: 200px;
   height: auto;
   margin: 20px auto;
 }
   clear: both;
 }
 .hList > * {
-  float: none;
-  width: 100%;
+  float: left;
+  width: 50%;
   text-align: center;
 }
 .hList > * + * {
-  margin-left: 0;
   margin-top: 5px;
 }
-.hList_spaced > * + * {
-  margin-left: 0;
-}
 /* ---------------------------------------------------------------------
  Inputs
  ----------------------------------------------------------------------- */
 /* ---------------------------------------------------------------------
  Pull Nav
  ----------------------------------------------------------------------- */
+/* ---------------------------------------------------------------------------
+ stackList -- Lays out horizontally on desktop but stacks vertically on mobile
+ ----------------------------------------------------------------------------- */
+.stackList:before,
+.stackList:after {
+  content: " ";
+  display: table;
+}
+.stackList:after {
+  clear: both;
+}
+.stackList > * {
+  text-align: center;
+}
+.stackList > * + * {
+  margin-top: 5px;
+}
 /* -----------------------------------------------------------
  Media Queries
  ---------------------------------------------------------- */
    hList
    ----------------------------------------------------------------------- */
   .hList > * {
-    float: left;
     width: auto;
     text-align: left;
   }
   .pullNav {
     float: right;
   }
+  /* ---------------------------------------------------------------------
+   stackList Desktop Styles
+   ----------------------------------------------------------------------- */
+  .stackList > * {
+    float: left;
+    width: auto;
+    text-align: left;
+  }
+  .stackList > * + * {
+    margin-left: 4px;
+    margin-top: 0;
+  }
 }
 @media (min-width: 979px) {
   /* ---------------------------------------------------------------------
 @import "modules/label/_label_screen";
 @import "modules/link/_link_screen";
 @import "modules/pullNav/_pullNav_screen";
+@import "modules/stackList/_stackList_screen";
 
 
 /* -----------------------------------------------------------

less/screen_small.less

 @import "modules/hList/_hList_small";
 @import "modules/input/_input_small";
 @import "modules/pullNav/_pullNav_small";
+@import "modules/stackList/_stackList_small";

public/Assets/styles/screen.css

 
 .brandingLogo {
   display: block;
-  width: 200px;
+  max-width: 200px;
   height: auto;
   margin: 20px auto;
 }
 }
 
 .hList > * {
-  float: none;
-  width: 100%;
+  float: left;
+  width: 50%;
   text-align: center;
 }
 
 .hList > * + * {
-  margin-left: 0;
   margin-top: 5px;
 }
 
-.hList_spaced > * + * {
-  margin-left: 0;
-}
-
 /* ---------------------------------------------------------------------
  Inputs
  ----------------------------------------------------------------------- */
  Pull Nav
  ----------------------------------------------------------------------- */
 
+/* ---------------------------------------------------------------------------
+ stackList -- Lays out horizontally on desktop but stacks vertically on mobile
+ ----------------------------------------------------------------------------- */
+
+.stackList:before,
+.stackList:after {
+  content: " ";
+  display: table;
+}
+
+.stackList:after {
+  clear: both;
+}
+
+.stackList > * {
+  text-align: center;
+}
+
+.stackList > * + * {
+  margin-top: 5px;
+}
+
 /* -----------------------------------------------------------
  Media Queries
  ---------------------------------------------------------- */
    ----------------------------------------------------------------------- */
 
   .hList > * {
-    float: left;
     width: auto;
     text-align: left;
   }
   .pullNav {
     float: right;
   }
+
+  /* ---------------------------------------------------------------------
+   stackList Desktop Styles
+   ----------------------------------------------------------------------- */
+
+  .stackList > * {
+    float: left;
+    width: auto;
+    text-align: left;
+  }
+
+  .stackList > * + * {
+    margin-left: 4px;
+    margin-top: 0;
+  }
 }
 
 @media (min-width: 979px) {

public/dashboard.html

 
             <div class="header-section">
                 <div class="container">
-                    <div class="grid">
+                    <!-- MOBILE MENU -->
+                    <div class="grid isVisibleSmall">
+                        <div class="grid-col grid-col_2of12">
+                            <a class="btn btn_alt">
+                                <i class="fa fa-reorder fa-lg"></i>
+                            </a>
+                        </div>
+                        <div class="grid-col grid-col_8of12">
+                            <img class="brandingLogo" src="Assets/images/brandingLogo-chamberlain@2x.png" alt="">
+                        </div>
+                        <div class="grid-col grid-col_2of12">
+                            <div class="pullNav">
+                                <a class="btn btn_alt" href="#">
+                                    <span class="btn-hidden">Languages</span>
+                                    <i class="fa fa-globe fa-lg"></i>
+                                    <i class="fa fa-caret-down fa-lg"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div><!-- END .grid -->
+                    <!-- END MOBILE MENU -->
+
+                    <!-- DESKTOP MENU -->
+                    <div class="grid isHiddenSmall">
                         <div class="grid-col grid-col_4of12">
                             <img class="brandingLogo" src="Assets/images/brandingLogo-chamberlain@2x.png" alt="">
                         </div>
                         <div class="grid-col grid-col_8of12">
                             <div class="pullNav" role="navigation">
                                 <ul class="hList">
-                                    <li class="isHiddenSmall">
-                                        <a class="btn" href="#">Sign Up</a>
+                                    <li>
+                                        <a class="btn btn_alt" href="#">
+                                            <i class="fa fa-user fa-lg"></i>
+                                            <span class="btn-hidden">Account</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="btn btn_alt" href="#">
+                                            <i class="fa fa-question-circle fa-lg"></i>
+                                            <span class="btn-hidden">Help</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="btn btn_alt" href="index.html">Sign Out</a>
                                     </li>
                                     <li>
                                         <a class="btn btn_alt" href="#">
                             </div>
                         </div>
                     </div><!-- END .grid -->
+                    <!-- END DESKTOP MENU -->
+
                 </div>
             </div><!-- END .header-section -->
 
                         <div class="grid-col grid-col_4of12">
                             <img class="appLogo" src="Assets/images/myq-logo.png" alt="">
                         </div>
-
-                        <div class="grid-col grid-col_8of12">
-                            <div class="pullNav">
-                                <ul class="hList">
-                                    <li>
-                                        <label class="label" for="username">Username</label>
-                                        <input class="input" type="text" name="username" placeholder="Username"/>
-                                    </li>
-                                    <li>
-                                        <label class="label" for="password">Password</label>
-                                        <input class="input" type="password" name="password" placeholder="Password"/>
-                                        <a class="label label_sm isHiddenSmall" href="#">Forgot Password?</a>
-                                    </li>
-                                    <li>
-                                        <a class="btn btn_baseline" href="dashboard.html">Login</a>
-                                    </li>
-                                    <li class="isVisibleSmall">
-                                        <a class="btn" href="#">Sign Up</a>
-                                        <a class="label label_sm" href="#">Forgot Password?</a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
                     </div><!-- END .grid -->
                 </div>
             </div><!-- END .header-section -->

public/index.html

 
                         <div class="grid-col grid-col_8of12">
                             <div class="pullNav" role="navigation">
-                                <ul class="hList">
+                                <ul class="stackList">
                                     <li class="isHiddenSmall">
                                         <a class="btn" href="#">Sign Up</a>
                                     </li>
 
                         <div class="grid-col grid-col_8of12">
                             <div class="pullNav">
-                                <ul class="hList">
+                                <ul class="stackList">
                                     <li>
                                         <label class="label" for="username">Username</label>
                                         <input class="input" type="text" name="username" placeholder="Username"/>