Adding the basic Angular tabs and changed markup to keep it pretty

app/assets/javascripts/darkswarm/all.js.coffee

@@ -5,6 +5,7 @@
 #
 #= require angular
 #= require angular-resource
+#= require mm-foundation-tpls-0.1.0.min.js
 #
 #= require ../shared/jquery.timeago
 #= require foundation

app/assets/javascripts/darkswarm/darkswarm.js.coffee

@@ -1,4 +1,4 @@
-window.Darkswarm = angular.module("Darkswarm", ["ngResource", "filters"]).config ($httpProvider) ->
+window.Darkswarm = angular.module("Darkswarm", ["ngResource", "filters", 'mm.foundation']).config ($httpProvider) ->
   $httpProvider.defaults.headers.post['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content') 
   $httpProvider.defaults.headers['common']['X-Requested-With'] = 'XMLHttpRequest' 
   $httpProvider.defaults.headers.common.Accept = "application/json, text/javascript, */*"

app/assets/stylesheets/darkswarm/header.css.sass

@@ -1,3 +1,6 @@
 /*body { background: #ff0000; }*/
 nav.top-bar
   margin-bottom: 0px
+
+body > section[role='main']
+  padding: 0px

app/assets/stylesheets/darkswarm/shop.css.sass

@@ -75,41 +75,6 @@ product
           display: block
           padding-top: 14px
 
-  tabs
-    background: url("/assets/matte.png") top left repeat
-    display: block
-    .section-container.auto
-      margin-bottom: 0
-      & > section 
-        transition:height 0s linear 0.5s
-        & > .content
-          background: none
-          border: none
-          img
-            margin: 0px 0px 0px 40px
-          p
-            max-width: 555px
-            @media all and (max-width: 768px)
-              height: auto !important
-          ul
-            list-style-type: none
-            padding-left: none
-          .panel
-            padding-bottom: 1.25em
-
-        & > .title, &.active > .title
-          text-transform: uppercase
-          line-height: 50px
-          @media all and (max-width: 768px)
-            line-height: 30px !important
-          border: none
-          &, &:hover
-            background: none
-          a
-            padding: 0px 2.2em
-            @media all and (max-width: 768px)
-              line-height: inherit !important
-
   products
     display: block
     padding-top: 2.3em 

app/assets/stylesheets/darkswarm/tabs.css.sass

@@ -1,34 +1,37 @@
-dl.tabs
+@import "darkswarm/typography"
+
+#tabs
   background: url("/assets/matte.png") top left repeat
   display: block
-  .section-container.auto
-    margin-bottom: 0
-    & > section 
-      transition:height 0s linear 0.5s
-      & > .content
-        background: none
-        border: none
-        img
-          margin: 0px 0px 0px 40px
-        p
-          max-width: 555px
-          @media all and (max-width: 768px)
-            height: auto !important
-        ul
-          list-style-type: none
-          padding-left: none
-        .panel
-          padding-bottom: 1.25em
+  dl dd a
+    @include avenir
+    background: transparent
+    text-transform: uppercase
+    line-height: 50px
+    font-size: 0.875em
+    @media all and (max-width: 768px)
+      line-height: 30px !important
+    border: none
+    &, &:hover
+      background: none
+    padding: 0px 2.2em
+    @media all and (max-width: 768px)
+      line-height: inherit !important
 
-      & > .title, &.active > .title
-        text-transform: uppercase
-        line-height: 50px
+  .tabs-content
+    margin-bottom: 0
+    & > .content
+      background: none
+      border: none
+      img
+        margin: 0px 0px 0px 40px
+      p
+        max-width: 555px
         @media all and (max-width: 768px)
-          line-height: 30px !important
-        border: none
-        &, &:hover
-          background: none
-        a
-          padding: 0px 2.2em
-          @media all and (max-width: 768px)
-            line-height: inherit !important
+          height: auto !important
+      ul
+        list-style-type: none
+        padding-left: none
+      .panel
+        padding-bottom: 1.25em
+

app/assets/stylesheets/darkswarm/typography.css.sass

@@ -22,9 +22,12 @@ a
   &:hover
     text-decoration: underline
 
-h1, h2, h3, h4, h5, h6, .avenir
+@mixin avenir
   color: #333333
   font-family: "AvenirBla_IE", "AvenirBla"
+
+h1, h2, h3, h4, h5, h6, .avenir
+  @include avenir
   padding: 0px
 
 

app/views/shop/_tabs.html.haml

@@ -1,16 +1,12 @@
-%dl.tabs{"data-tab" => ""}
-  %dd
-    %a{href: "#about"} About Us
-  %dd
-    %a{href: "#producers"} Our Producers
-  %dd
-    %a{href: "#groups"} Our Groups
-  %dd
-    %a{href: "#contact"} Contact
+#tabs{"ng-controller" => "TabsCtrl"}
+  .row
+    %tabset
+      - for name, heading in { about: "About Us", 
+        producers: "Producers", 
+        groups: "Groups", 
+        contact: "Contact"} 
 
-.tabs-content
-  -#.section-container.auto{"data-section" => "", "data-options" => "one_up: false"}
-  = render 'shop/shop/about_us'
-  = render 'shop/shop/producers'
-  = render 'shop/shop/groups'
-  = render 'shop/shop/contact'
+        %tab{heading: heading, 
+        active: "#{name}.active",
+        select: "select(#{name})"}
+          = render "shop/shop/#{name}"