[ux] proper offset for guide and add grid classes

Author: Swaagie

client.js

@@ -11,10 +11,12 @@ pipe.once('package.json:render', function render(pagelet) {
    * @api private
    */
   placeholders.on('click mouseover', 'pre a:not(.trigger)', function guide() {
-    guides.hide();
+    var scroll = $(document).scrollTop()
+      , offset = scroll - guides.parent().offset().top;
 
+    guides.hide();
     placeholders.find('#'+ this.href.split('#').pop().replace('.', '\\.'))
-      .css('top', $(document).scrollTop() +'px')
+      .css('top', (offset < 0 ? scroll : offset) +'px')
       .show();
   });
 

css.styl

@@ -1,14 +1,15 @@
 .guides
 .example
   box-sizing: border-box
-  min-height: 1px
 
+.intro
 .guides
-  float: left
   font-family: "proxima-nova-1","proxima-nova-2",sans-serif
+
+.guides
+  float: left
   font-size: 21px
   position: relative
-  width: 30.75%
 
   code
     background-color: #F8F8F8
@@ -34,8 +35,6 @@
       text-decoration: underline
 
 .intro
-  width: 65.4%
-
   a
     color: #4183C4
     text-decoration: none
@@ -49,7 +48,7 @@
     small
       color: #888
       display: block
-      font-size: 16px
+      font-size: 14px
       font-weight: normal
       text-transform: uppercase
 
@@ -60,7 +59,6 @@
   margin-right: 3.8%
   padding: 12px
   position: relative
-  width: 65.4%
 
   .key
     color: navy