vivus 0.0.4 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4b26453f767a461be30b9633bd194e6886a943a7
-  data.tar.gz: da1761ef6d903eb45599c6a35d11ebd6ad7b16d8
+  metadata.gz: a66affde87ddb02379f5fc5189368b8a735f5fc8
+  data.tar.gz: e2091f6567c398970574f3de6249048fb84723b5
 SHA512:
-  metadata.gz: d25ce19b32fd34f512ab47bc0b64d2b56547951af814f7eb93fb185da7261109a3c847f474a242c7a4c173aa8fe8b77456e427bfabe6b0117026f3a5fb870b12
-  data.tar.gz: de318073341ba83255e2c8cc4ebef63210b90b441a02a4456131abe7dbdc1533cff5f6174a1759d75b0657da5e3d785032100c472bd6b1d067c67419fbe02096
+  metadata.gz: f34fe4a4b550ac8f1a6e3d65519578d2f354aaa09230d606e9b6159e4d0c43e16aed9ce16bdb695835af982a8afcbf0a6ee42474cebe4f53fbb45739001f46ec
+  data.tar.gz: 5d4113f3e35bb41cd53ab271b9a463c2a0ccbb1eda8bf1434a98f9067e7b2e267a979c0c448823a659b5a02ca5847b871e354d36bfc08685b56204de578ffde2

data/README.md

@@ -0,0 +1,52 @@
+# Vivus Styleguide
+
+## Idea
+
+Styleguides can be a pain to keep as a living documentation for your CSS.
+
+By analysing the comments in your [SASS](http://sass-lang.com/) files, and by adding markdown to your stylesheets, you can generate a living, breathing documentation styleguide that has examples of how the CSS is used.
+
+To get running, checkout the branch (it's still waaaay alpha) and add this to your Gemfile:
+```
+gem 'vivus'
+```
+
+Add this to your routes.rb
+```
+if Rails.env.development?
+  mount Vivus::Engine, at: "styleguide"
+end
+```
+
+Then hit up ```localhost:3000/styleguide```
+
+To document your CSS, use this as a template
+```
+/*
+[Name] The name of the component (e.g. Success Buttons)
+[Section] A section that groups components together (e.g. Buttons)
+[Description]
+
+Write some documentation explaining the use / concept of the CSS
+you've got below. This bit will be markdown rendered.
+
+- You can use three backticks (`) to indicate a code block
+- ```<div class="example"></div>```
+- Code blocks will be syntax highlighted
+
+When you've documented it nicely, use the Example markers to
+indicate a block of HTML that uses the CSS.
+
+Keeps your documentation right near the CSS.
+So, if you update / refactor the CSS, update the HTML example if
+need be.
+
+[Example]
+<div class="example">
+  <a href="#" class="button">Some text<a>
+</div>
+[Url] A web address pointing to further documentation / example (optional)
+*/
+```
+
+This project rocks and uses MIT-LICENSE.

data/app/assets/javascripts/vivus/application.js

@@ -1,31 +1,30 @@
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// the compiled file.
-//
-// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
-// GO AFTER THE REQUIRES BELOW.
-//
 //= require jquery
 //= require highlight.pack
 //= require_tree .
 
 $(document).ready(function() {
-    $('pre').each(function(i, el) {
-        hljs.highlightBlock(el);
+    $('pre, code').each(function(i, el) {
+      hljs.highlightBlock(el);
     });
 
-    $('code').each(function(i, el) {
-        hljs.highlightBlock(el);
-    });
+    $('h1.vivus-section-title').each(function(i, el) {
+      var text = $(el).text().toLowerCase();
+      var link = text.replace(/ /g, '-');
+      var anchor = "<a href='#" + link + "'>" + $(el).text() + "</a>";
+      $('#vivus-navigation > ul').append("<li class=" + $(el).prop("tagName").toLowerCase() + ">" + anchor + "<ul></ul></li>");
+      $(el).prepend("<a name='" + link + "'></a>");
+    })
+
+    $('h2.vivus-name').each(function(i, el) {
+      var section = $(el).parents(".vivus-section");
+      var section_title = section.children("h1.vivus-section-title").text().toLowerCase().replace(/ /g, '-');
+
+      var anchor = "<a href='#" + section_title + "|" + $(el).text().toLowerCase().replace(/ /g, '-') + "'>" + $(el).text() + "</a>"
 
-    $('.vivus-documentation').find('h1, h2, h3, h4, h5, h6').each(function(i, el) {
-        $('#vivus-navigation ul').append("<li class=" + $(el).prop("tagName").toLowerCase() + "><a href='#" + $(el).text().toLowerCase().replace(/ /g, '-') + "'>" + $(el).text() + "</a></li>");
-        $(el).prepend("<a name='" + $(el).text().toLowerCase().replace(/ /g, '-') + "'></a>");
+      var navParent =  $('#vivus-navigation ul').find("a[href='#" + section_title + "']").parent();
+
+      $(navParent).find("ul").append("<li class=" + $(el).prop("tagName").toLowerCase() + ">" + anchor + "</li>");
+      $(el).prepend("<a name='" + section_title + "|" + $(el).text().toLowerCase().replace(/ /g, '-') +"'></a>");
     })
 
     $('.vivus-documentation *:contains("TODO:")').html(function(_, html) {
@@ -35,4 +34,13 @@ $(document).ready(function() {
     $('.vivus-documentation *:contains("NOTE:")').html(function(_, html) {
        return html.split('NOTE:').join("<span class='note'>NOTE:</span>");
     });
+
+    $('a.vivus-tab').click(function(event) {
+      event.preventDefault();
+      var link = $(event.currentTarget);
+      var tabs = $(link).parent();
+      var blocks = $(tabs).parent().find('.vivus-block');
+      tabs.children("a").toggleClass("vivus-active");
+      blocks.toggleClass("vivus-block-opened");
+    });
 });

data/app/assets/stylesheets/vivus/application.css.scss

@@ -1,12 +1,12 @@
 @import "core/constants";
 @import "core/mixins";
 @import "core/mediaqueries";
-@import "core/typography";
 
 body#vivus {
   margin: 0;
   padding: 0;
 
   @import 'module/nav';
-  @import 'module/block';
+  @import 'module/section';
+  @import 'module/component';
 }

data/app/assets/stylesheets/vivus/module/component.scss

@@ -0,0 +1,106 @@
+li.vivus-component {
+  list-style: none;
+  margin-bottom: 40px;
+
+  .vivus-documentation {
+    margin: 0 0 40px 0;
+    font-size: 15px;
+    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+    font-weight: 300;
+
+    > h1 {
+      color: #C93312;
+    }
+
+    > h2 {
+      margin-top: 50px;
+    }
+
+    > ul, ol {
+      list-style-position: inside;
+      margin-bottom: 40px;
+    }
+
+    .todo {
+      color: #C93312;
+    }
+
+    code {
+      font-size: 13px;
+      color: #660000;
+      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+      font-weight: 300;
+      @import 'syntax-highlighting';
+    }
+  }
+
+  .vivus-example {
+    @include clearfix;
+    margin: 0 0 40px 0;
+    padding: 10px 0;
+    font-size: 15px;
+    border-bottom: 1px solid #eee;
+
+    .vivus-title {
+      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+      font-weight: 300;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #eee;
+    }
+  }
+
+  .vivus-code {
+    > pre {
+      font-family: monospace;
+      word-wrap: break-word;
+      margin: 0px;
+      padding: 10px;
+      font-size: 14px;
+      margin-bottom: 20px;
+
+      @import 'syntax-highlighting';
+    }
+  }
+
+  .vivus-example, .vivus-code { display: none }
+
+  .vivus-block-opened { display: block }
+
+  .vivus-tabbed {
+    $tab_height: 32px;
+    $border_color: #999;
+
+    height: $tab_height;
+    border-bottom: 1px solid $border_color;
+    margin-bottom: 10px;
+
+    .vivus-tab{
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+
+      border: 1px solid #bbb;
+      border-bottom: none;
+      position:relative;
+      z-index: 2;
+      float: right;
+      display: block;
+      font-weight: bold;
+      color: #b2b2b2;
+      height: $tab_height - 7px;
+      padding: 6px 32px 0 32px;
+      bottom: -1px;
+      margin-right: 10px;
+      font-size: 11px;
+
+      &.vivus-active{
+        border-color: $border_color;
+        color: #333333;
+        background-color: white;
+      }
+
+      &:hover{
+        color: #333333;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/vivus/module/nav.scss

@@ -6,7 +6,7 @@
   margin: 0;
   background-color: #24281A;
   z-index: 1000000;
-  overflow-y: scroll;
+  overflow-y: auto;
 
   @include respond-to("small") {
     display: none;
@@ -17,7 +17,8 @@
   left: 0;
   top: 0;
 
-  font-family: "Open Sans", droid_sans_monoregular, mono, sans;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-weight: 300;
 
   ul {
     padding: 0;
@@ -31,44 +32,38 @@
       a {
         line-height: 1.45;
         text-decoration: none;
-        color: #D5D5D3;
-
-        &:hover {
-          color: #F3DF6C;
-        }
       }
 
       &.h1 {
         font-size: 15px;
 
-        margin: 20px 0 5px 20px;
+        margin: 20px 0 10px 20px;
 
         a {
           color: #F3DF6C;
         }
-      }
-
-      &.h2 {
-        font-size: 13px;
-        color: #C3CED0;
-        margin: 0 0 5px 30px;
-      }
 
-      &.h3 {
-
-      }
+        ul {
+          margin-top: 10px;
+        }
 
-      &.h4 {
 
-      }
+        .h2 {
+          font-size: 13px;
+          color: #C3CED0;
+          margin: 0 10px 5px 10px;
 
-      &.h5 {
+          a {
+            color: #D5D5D3;
 
+            &:hover {
+              color: #F3DF6C;
+            }
+          }
+        }
       }
 
-      &.h6 {
 
-      }
     }
   }
 }

data/app/assets/stylesheets/vivus/module/section.scss

@@ -0,0 +1,26 @@
+#vivus-body {
+  margin-left: 250px;
+  max-width: 950px;
+  padding: 30px;
+
+  @include respond-to("small") {
+    margin: 0;
+    padding: 20px;
+  }
+
+  ul.vivus-sections {
+    margin: 0;
+    padding: 0;
+
+    li.vivus-section {
+      list-style: none;
+      margin-bottom: 40px;
+
+      ul.vivus-components {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/vivus/module/syntax-highlighting.scss

@@ -1,56 +1,56 @@
 /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
 
 /* Tomorrow Comment */
-.comment,
-.title {
+.hljs-comment,
+.hljs-title {
   color: #8e908c;
 }
 
 /* Tomorrow Red */
-.variable,
-.attribute,
-.tag,
-.regexp,
-.ruby .constant,
-.xml .tag .title,
-.xml .pi,
-.xml .doctype,
-.html .doctype,
-.css .id,
-.css .class,
-.css .pseudo {
+.hljs-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-regexp,
+.hljs-ruby .hljs-constant,
+.hljs-xml .hljs-tag .hljs-title,
+.hljs-xml .hljs-pi,
+.hljs-xml .hljs-doctype,
+.hljs-html .hljs-doctype,
+.hljs-css .hljs-id,
+.hljs-css .hljs-class,
+.hljs-css .hljs-pseudo {
   color: #c82829;
 }
 
 /* Tomorrow Orange */
-.number,
-.preprocessor,
-.pragma,
-.built_in,
-.literal,
-.params,
-.constant {
+.hljs-number,
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-built_in,
+.hljs-literal,
+.hljs-params,
+.hljs-constant {
   color: #f5871f;
 }
 
 /* Tomorrow Yellow */
-.ruby .class .title,
-.css .rules .attribute {
+.hljs-ruby .hljs-class .hljs-title,
+.hljs-css .hljs-rules .hljs-attribute {
   color: #eab700;
 }
 
 /* Tomorrow Green */
-.string,
-.value,
-.inheritance,
-.header,
-.ruby .symbol,
-.xml .cdata {
+.hljs-string,
+.hljs-value,
+.hljs-inheritance,
+.hljs-header,
+.hljs-ruby .hljs-symbol,
+.hljs-xml .hljs-cdata {
   color: #718c00;
 }
 
 /* Tomorrow Aqua */
-.css .hexcolor {
+.hljs-css .hljs-hexcolor {
   color: #3e999f;
 }