Tab experiments -- NOT FOR MERGING

_layouts/default.html

@@ -36,6 +36,7 @@
     <script src="{{ "/js/sidebar_toggle.js" }}"></script>
     <script src="{{ "/js/customscripts.js" }}"></script>
     <script src="{{ "/js/prism.js" }}"></script>
+    <script src="{{ "/js/tabs.js" }}"></script>
 
     <script async="" defer="" src="//survey.g.doubleclick.net/async_survey?site=at3ul57xpub2vk3oxt2ytw365i"></script>
   </body>

_sass/_tabs.scss

@@ -0,0 +1,33 @@
+// Tabs (e.g. in Getting Started, to select which OS to use for instruction)
+
+$tab-accent-color: $brand-color;
+
+ul.tabs__top-bar {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.tabs__top-bar li {
+  background: none;
+  color: $grey-color;
+  display: inline-block;
+  padding: 10px 15px;
+  cursor: pointer;
+}
+
+ul.tabs__top-bar li.current{
+  background: $tab-accent-color;
+  color: $background-color;
+}
+
+.tabs__content{
+  display: none;
+  border: 2px solid $tab-accent-color;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+
+.tabs__content.current{
+  display: inherit;
+}

css/main.scss

@@ -61,7 +61,8 @@ $on-laptop:        800px;
         "code_pre",
         "catalog",
         "homepage",
-        "responsive_embeds"
+        "responsive_embeds",
+        "tabs"
 ;
 
 aside > :not(pre) > code[class*="language-"], aside > pre[class*="language-"] {

js/tabs.js

@@ -0,0 +1,38 @@
+function setupTabs() {
+    var tabs = $('.tabs__top-bar li');
+    var tabContents = $('.tabs__content');
+
+    function clearTabsCurrent() {
+      tabs.removeClass('current');
+      tabContents.removeClass('current');
+    }
+
+    tabs.click(function () {
+      clearTabsCurrent();
+
+      var tab_id = $(this).attr('data-tab');
+
+      $(this).addClass('current');
+      $("#" + tab_id).addClass('current');
+    });
+
+    // The following selects the correct default tab in /guides/get-started
+    function selectOperatingSystemInTabs(osName) {
+      clearTabsCurrent();
+
+      $("li[data-tab='tab-sdk-install-" + osName + "']").addClass('current');
+      $('#tab-sdk-install-' + osName).addClass('current');
+    }
+
+    if (window.navigator.userAgent.indexOf("Mac") != -1) {
+      selectOperatingSystemInTabs('mac');
+    } else if (window.navigator.userAgent.indexOf("Linux") != -1 &&
+               window.navigator.userAgent.indexOf("Android") == -1) {
+      // Doesn't auto-select the Linux tab when on Android.
+      selectOperatingSystemInTabs('linux');
+    }
+}
+
+$(document).ready(function () {
+    setupTabs();
+});

tab-testing.md

@@ -0,0 +1,45 @@
+---
+layout: page
+title: Tab Testing
+permalink: /tabs/
+---
+
+This is a tab testing page; let's give js tabs shot:
+
+## Thar be Tab here
+
+Tabs below
+
+<ul class="tabs__top-bar">
+    <li class="tab-link current" data-tab="tab-sdk-install-windows">Windows</li>
+    <li class="tab-link" data-tab="tab-sdk-install-linux">Linux</li>
+    <li class="tab-link" data-tab="tab-sdk-install-mac">Mac</li>
+</ul>
+
+<div id="tab-sdk-install-windows" class="tabs__content current" markdown="1">
+This is where Windows install instructions live
+</div>
+
+<div id="tab-sdk-install-linux" class="tabs__content" markdown="1">
+This is where Linux install instructions live
+</div>
+
+<div id="tab-sdk-install-mac" class="tabs__content" markdown="1">
+This is where Mac install instructions live
+</div>
+
+End of tabs
+
+
+## Which JSON serialization method is right for me?
+
+This article covers two general strategies for working with JSON:
+
+* Manual serialization and deserialization
+* Automated serialization and deserialization via code generation
+
+Different projects come with different complexities and use cases. For smaller
+proof-of-concept projects or quick prototypes, using code generators might be
+overkill. For apps with several JSON models with more complexity, doing
+serialization by hand can quickly become tedious, repetitive and lend itself to
+lots of small errors.