Overflow and wrapping fixed. Started working on TAB navigation (unfinished)

sass/core.scss

@@ -2,12 +2,7 @@ body{
   background-color: $main-bg-color;
   font-family: $sys-font;
   color: $main-text-color;
-}
-
-.content-wrapper{
-  width:100%;
-  height:100%;
-  overflow:hidden;
+  overflow: hidden;
 }
 
 .simple-padding{
@@ -20,5 +15,20 @@ body{
   text-align: right;
 }
 
+// Overriding some purecss settings. WHY have the grid do anything
+// other than GRID related stuff! Leave text/font alone!
+.pure-g {
+  font-family: inherit;
+}
+
+.pure-g [class *= "pure-u"] {
+  font-family: inherit;
+}
 
+// Allow for the disabling of the flex-flow: wrap.
+// This allows me to use overflow:hidden without pure-g wrapping on
+// me! ... but only for those pure-g elements I want.
+.pure-g-nw{
+  flex-flow: row;
+}
 

sass/style.scss

@@ -8,5 +8,6 @@
 @import 'canvas';
 @import 'nespalette';
 @import 'modal';
+@import 'tabs';
 
 

sass/tabs.scss

@@ -0,0 +1,23 @@
+
+.tabnav {
+  background-color: $tabnav-bg;
+  color: $tabnav-text;
+  
+  li {
+    display: inline; 
+  }
+  a {
+    padding: 0 10px;
+    text-decoration: none;
+  }
+
+  div.tab-content {
+    background-color: $tabnav-content-bg;
+    color: $tabnav-content-text;
+  }
+}
+
+.tab-selected {
+  background-color: $tabnav-content-bg;
+  color: $tabnav-content-text;
+}

sass/variables.scss

@@ -8,3 +8,8 @@ $menu-bg-color: #6200EE;
 $menu-text-color: #FFFFFF;
 
 $canvas-bg-color: #212121;
+
+$tabnav-bg: #878787;
+$tabnav-text: #000;
+$tabnav-content-bg: #EFEFEF;
+$tabnav-content-text: #000;

views/docks.html

@@ -0,0 +1,10 @@
+          <div class="tabnav">
+            <ul tabname="assetlists">
+              <li class="tab-selected" tabid="palettes"><a href="#">Palettes</a></li>
+              <li tabid="Banks"><a href="#">Banks</a></li>
+              <li tabid="AttrTables"><a href="#">Attib. Tables</a></li>
+            </ul>
+            <div class="tab-content" contentfor="assetlists" tabid="palettes">
+              Stuff to go here!
+            </div>
+          </div>

views/index.html

@@ -3,9 +3,9 @@
 <%- include('modal.html'); %>
 <%- include('header.html'); %>
 
-    <div class="content-wrapper">
-      <div class="pure-g">
+    <div class="pure-g pure-g-nw">
 
+      <div class="pure-u-2-24 simple-padding">
       <%- include('tools.html', {
         toolbtns:[
           {emitargs:'{"id":"Welcome"}', faicon:"fa-brush"},
@@ -13,11 +13,15 @@
           {emitargs:'{"id":"Welcome"}', faicon:"fa-eye-dropper"}
         ] 
       }); %>      
-
+      </div>
+      <div class="pure-u-16-24">
       <%- include('workspace.html'); %>
-
       </div>
 
-      <%- include('footer.html', {version:version, author:author}); %>
+      <div class="pure-u-6-24 simple-padding">
+      <%- include('docks.html'); %>
+      </div>
     </div>
+
+    <%- include('footer.html', {version:version, author:author}); %>
 <%- include('tail.html'); %>

views/tools.html

@@ -1,4 +1,3 @@
-        <div class="pure-u-1-8 simple-padding">
           <div class="pure-button-group" role="group" aria-label="...">
             <% toolbtns.forEach((btn) => { %>
             <button emit="modal-open" emit-args="<%= btn.emitargs %>" class="pure-button">
@@ -6,4 +5,3 @@
             </button>
             <% }); %>
           </div>
-        </div>

views/workspace.html

@@ -1,5 +1,3 @@
-        <div class="pure-u-2-3">
           <%- include('canvas.html'); %>
           <%- include('ctrlpainter.html'); %>
           <%- include('palettectrl.html'); %>
-        </div>