app/ayanova/src/views/login.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container fluid>
     <v-layout row wrap="">
-      <v-flex xs12 class="text-xs-center" mt-5>
+      <v-flex xs12 class="text-xs-center" mt-5 ml-5 pl-5>
         <v-img :src="require('../assets/logo.svg')" class="my-3" contain height="200"></v-img>
       </v-flex>
       <v-flex xs12 sm6 offset-sm3 mt-3>
@@ -26,7 +26,7 @@
                 required
               ></v-text-field>
             </v-flex>
-            <v-flex class="text-xs-center" mt-5>
+            <v-flex class="text-xs-center" mt-1>
               <v-btn color="primary" v-on:click="login()">
                 <v-icon>fa-sign-in-alt</v-icon>
               </v-btn>

devdocs/specs/core-ui-design.txt

@@ -272,6 +272,10 @@ BREAKPOINTS
 =-=-=-=-=-=
 
 Plan: Layout and design each component for the smallest screen size first, then add more elements to each one as the size increases.
+    - “when in doubt, just remove.” (or place in a menu out of main view)
+    - It makes no sense to target individual devices anymore. Instead, add breakpoints where your design breaks. 
+    If you start with your design for the smallest device and start to drag your browser window wider, when do the lines become too long to read comfortably? 
+    When could you make better use of the screen? That is the point at which to add a Media Query and write some additional CSS.
     - NAV For example a menu can be fully shown as icons in a larger size but might be behind another click in smaller
     - Functionality: figure out what the minimum most important things to show at small size then add more "optional" stuff as it increases
         - Grid: show the Name column first and selector, then add the most relevant columns in order of relevancy