Added a new basic section for styleguide

styleguide/_template.html

@@ -9,48 +9,49 @@
 <script>
     var j = jQuery.noConflict(true);
     j(function() {
-
-        // Show current section
-        var hash = window.location.hash.replace(/#/g, '');
-        if (hash) {
-          setTimeout(function() {
-            showSection(hash.split('-')[0]);
-          }, 0);
+      // Click on link with subheadings
+      j('#styleguide-menu .submenulink').click(function(event) {
+        var jqCurSubmenu = j('[data-submenu="' + j(this).data('section') + '"]');
+        var isCurSubmenuOn = jqCurSubmenu.hasClass('on');
+        j('#styleguide-menu .on').removeClass('on');
+        if (!isCurSubmenuOn) {
+          jqCurSubmenu.addClass('on');
+          j(this).addClass('on');
         }
+        showSection(j(this).data('section'));
+      });
 
-        // Show section in Styleguide
-        j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
+      // Click on link without subheadings
+      j('#styleguide-menu .sectionlink').click(function(event) {
+        j('#styleguide-menu .on').removeClass('on');
+        j(this).addClass('on');
+        showSection(j(this).data('section'));
+      });
 
-        // Click on link with subheadings
-        j('#styleguide-menu .submenulink').click(function(event) {
-            var jqCurSubmenu = j('[data-submenu="' + j(this).data('section') + '"]');
-            var isCurSubmenuOn = jqCurSubmenu.hasClass('on');
-            j('#styleguide-menu .on').removeClass('on');
-            if (!isCurSubmenuOn) {
-                jqCurSubmenu.addClass('on');
-                j(this).addClass('on');
-            }
-            showSection(j(this).data('section'));
-        });
+      // Show/Hide sections
+      function showSection(section) {
+        j('#styleguide .section').hide();
+        var jqCurSections = j('#styleguide .section[data-section="' + section + '"]');
+        jqCurSections.show();
+      }
 
-        // Click on link without subheadings
-        j('#styleguide-menu .sectionlink').click(function(event) {
-            j('#styleguide-menu .on').removeClass('on');
-            j(this).addClass('on');
-            showSection(j(this).data('section'));
-        });
-
-        // Show/Hide sections
-        function showSection(section) {
-            j('#styleguide .section').hide();
-            var jqCurSections = j('#styleguide .section[data-section="' + section + '"]');
-            jqCurSections.show();
-        }
+      // Show current section
+      var currentElement = window.location.hash.replace(/#/g, '');
+      if (currentElement) {
+        var section = currentElement.split('-')[0];
+        j('.submenulink[data-section="' + section + '"]').click();
+      } else {
+        // Show section in Styleguide
+        j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
+      }
     });
 </script>
 
 <div id="styleguide-menu">
 	<ul>
+    <li>
+      <a class="submenulink" href="#Basics" data-section="Basics">Basics</a>
+    </li>
 	{{#each menu}}
 		<li>
 			{{#if headings.0.name}}
@@ -70,6 +71,21 @@
 </div>
 
 <div id="styleguide">
+  <div class="section" id="Basics" data-section="Basics" data-heading="Basics">
+    <div class="comment">
+      <h1>Basics</h1>
+      <p>Important notes about this styleguide</p>
+    </div>
+    <div class="result">
+      <ul>
+        <li>All new elements added in this repository should have included a 'CDB-' namespace.</li>
+      </ul>
+    </div>
+    <div class="markup">
+
+    </div>
+  </div>
+
 	{{#each sections}}
 		<div class="section" id="{{id}}" data-section="{{section}}" data-heading="{{heading}}">