livingstyleguide 1.0.0.alpha.3 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7ab15e228a445c7b95dac21e5e7b08cd52ebbd65
-  data.tar.gz: 978c972a638c80ffb4e90179d31b0767656b0310
+  metadata.gz: b47b4660a87bc5faf44a6e8aa89e52fab1bd2f85
+  data.tar.gz: 9a7b6499d34577a3ba00d3ab898eef5741746fcf
 SHA512:
-  metadata.gz: 50f4df04107e5f799d4599f73092227ad3cc145cc96d5ef23155d04785d841e415645adca2a982a5ccedaeac23557fb80b4fb5bf62e35c9a5d717d8a78ca7c61
-  data.tar.gz: 6b59104477eeaddf0a38e5876fc0c8e913f2fbeb4d453fa477aa239bff2ae235fcf1040addb0fbdbb87f35c95e89b45841571b34fee245f62f0e1acaa55cce5e
+  metadata.gz: 782d2247f94ec877cb9ac41e9ed0628a428cc82cdaa59798f78fc273adabcaf0c98cd2a677ce943a175bd7014cfa974ada76e0ac430f5b2bda2f8823ec8a5194
+  data.tar.gz: 7400e8a9b9ee17c67d630c81272306371331fcea35295303997edc8aa3f0739fc927df002c3650a03770ab627dc76acd8488a5d1c2e59d45f6ba59d36b1fba47

data/README.md

@@ -12,21 +12,20 @@ your Sass.
    source: application.css.scss # replace with your default Sass/SCSS file name
    title: "My Living Style Guide"
    ```
-   
+
 2) Write documentation for each module *app/assets/stylesheets/partials/_buttons.md* (to describe *_buttons.sass* in the same folder):
-   ``` markdown
-   Buttons
-   =======
+   
+       Buttons
+       =======
 
-   ~~~ example
-   <button class="button">Example button</button>
-   ~~~ 
+       ~~~ example
+       <button class="button">Example button</button>
+       ~~~ 
+
+       ~~~ example
+       <button class="button -is-primary">Example button</button>
+       ~~~ 
 
-   ~~~ example
-   <button class="button -is-primary">Example button</button>
-   ~~~ 
-   ```
-   
 3) Open <http://localhost:3000/assets/styleguide.html>.
    This will automatically:
    * Combine all Markdown files and convert them to HTML
@@ -34,6 +33,53 @@ your Sass.
    * Show the HTML source syntax highlighted close to each example
 
 
+## More
+
+### Haml Examples
+
+This will output the code as HTML but display the syntax highlighted
+source as Haml:
+
+    ~~~
+    @haml
+    %button.button Example button
+    ~~~
+
+
+### JavaScript example
+
+This will show and execute the JavaScript, e. g. you designed tabs and
+need few lines of jQuery to bring them alive.
+
+    ~~~ example
+    @javascript
+    $('.button').click(function() {
+      alert('Hello World!');
+    });
+    ~~~
+
+
+### CoffeeScript example
+
+Same example but using [CoffeeScript](http://coffeescript.org). It will be 
+executed as JavaScript and displayed as CoffeeScript:
+
+    ~~~ example
+    @javascript
+    $('.button').click ->
+      alert 'Hello World!'
+    ~~~
+
+
+### Font example
+
+Show which fonts should be used on your website—this will output and example text block (A—Z, a—z, 0—9, and some special characters) of the given font. It accepts valid CSS like for `font: 32px Comic Sans;`.
+
+    ~~~ example
+    @font-example 32px Comic Sans
+    ~~~
+
+
 ## Installation
 
 Add this line to your application's Gemfile:
@@ -63,5 +109,3 @@ Or install it yourself as:
 Copyright (c) 2012 – 2014 [Nico Hagenburger](http://www.hagenburger.net).
 See [MIT-LICENSE.md](MIT-LICENSE.md) for details.
 Get in touch with [@hagenburger](http://twitter.com/hagenburger) on Twitter.
-
-

data/lib/livingstyleguide/engine.rb

@@ -4,7 +4,10 @@ module LivingStyleGuide
     attr_accessor :markdown, :files, :options
 
     @@default_options = {
-      default_language: 'example'
+      default_language: 'example',
+      title: 'Living Style Guide',
+      header: '<h1 class="livingstyleguide--page-title">Living Style Guide</h1>',
+      footer: '<div class="livingstyleguide--footer"><a class="livingstyleguide--logo" href="http://livingstyleguide.org">Made with the LivingStyleGuide gem.</a></div>'
     }
 
     def self.default_options

data/lib/livingstyleguide/example.rb

@@ -7,7 +7,7 @@ class LivingStyleGuide::Example
   include Hooks::InstanceHooks
   include LivingStyleGuide::FilterHooks
 
-  FILTER_REGEXP = /^@([a-z\-_]+)(\s+(.+?))?$/
+  FILTER_REGEXP = /^@([a-z\-_]+)(?:\s+(.+?))?$/
 
   define_hooks :filter_before, :filter_after, :html, :pre_processor
   attr_reader :options

data/lib/livingstyleguide/filters.rb

@@ -5,4 +5,5 @@ require 'livingstyleguide/filters/javascript'
 require 'livingstyleguide/filters/coffee_script'
 require 'livingstyleguide/filters/add_wrapper_class'
 require 'livingstyleguide/filters/font_example'
+require 'livingstyleguide/filters/colors'
 

data/lib/livingstyleguide/filters/colors.rb

@@ -0,0 +1,29 @@
+LivingStyleGuide::Example.add_filter :colors do |file|
+  suppress_code_block
+
+
+  if file
+    colors = [LivingStyleGuide::VariablesImporter.variables(file)]
+  else
+    colors = []
+  end
+
+  html do |content|
+    content
+  end
+
+  pre_processor do |content|
+    colors += content.split(/\n+/).map{ |l| l.split(/\s+/) }
+    columns = colors.map{ |l| l.size }.max
+    colors_html = colors.flatten.map do |variable|
+      if variable == '-'
+        css_class = '-lsg-empty'
+      elsif variable[0] != '$'
+        variable = "$#{variable}"
+      end
+      %Q(<li class="livingstyleguide--color-swatch #{css_class || variable}">#{variable}</li>\n)
+    end.join("\n")
+    %(<ul class="livingstyleguide--color-swatches -lsg-#{columns}-columns">\n#{colors_html}\n</ul>\n)
+  end
+end
+

data/lib/livingstyleguide/markdown_extensions.rb

@@ -21,23 +21,14 @@ module LivingStyleGuide
     end
 
     def header(text, header_level)
-      id = %Q( id="#{slug(text)}")
+      id = slug(text)
       klass = %w(page-title headline sub-headline sub-sub-headline)[header_level]
       header_level += 1
-      %Q(<h#{header_level} class="livingstyleguide--#{klass}"#{id}>#{text}</h#{header_level}>\n)
+      %Q(<h#{header_level} class="livingstyleguide--#{klass}" id="#{id}"><a class="livingstyleguide--anchor" href="##{id}"></a>#{text}</h#{header_level}>\n)
     end
 
     def paragraph(text)
-      if text =~ /^\{\{variables:(.+)\}\}$/
-        uri = $1
-        result = %Q(<ul class="livingstyleguide--color-swatches">\n)
-        VariablesImporter.variables(uri).each do |variable|
-          result << %Q(<li class="livingstyleguide--color-swatch $#{variable}">$#{variable}</li>\n)
-        end
-        result << "</ul>\n"
-      else
-        %Q(<p class="livingstyleguide--paragraph">#{text}</p>\n)
-      end
+      %Q(<p class="livingstyleguide--paragraph">#{text}</p>\n)
     end
 
     def list(contents, list_type)

data/lib/livingstyleguide/tilt_template.rb

@@ -2,6 +2,7 @@ require 'tilt'
 require 'erb'
 require 'compass'
 require 'yaml'
+require 'json'
 
 module ::Tilt
   class LivingStyleGuideTemplate < Template
@@ -36,11 +37,14 @@ module ::Tilt
 
     private
     def parse_options(data)
-      @options = YAML.load(data)
+      data.strip!
+      @options = (data[0] == '{') ? JSON.parse(data) : YAML.load(data)
+      @options = {} unless @options
       @options.keys.each do |key|
         @options[key.gsub('-', '_').to_sym] = @options.delete(key)
       end
       @options[:syntax] = @options.has_key?(:styleguide_sass) ? :sass : :scss
+      @options[:source] ||= File.basename(file, '.html.lsg')
     end
 
     private
@@ -49,6 +53,7 @@ module ::Tilt
         %Q(@import "#{@options[:source]}"),
         style_variables,
         %Q(@import "livingstyleguide"),
+        %Q(@import "#{::LivingStyleGuide::VariablesImporter::VARIABLE_IMPORTER_STRING}"),
         @options[:styleguide_sass] || @options[:styleguide_scss]
       ].flatten.join(@options[:syntax] == :sass ? "\n" : ';')
     end

data/lib/livingstyleguide/variables_importer.rb

@@ -5,7 +5,7 @@ require 'compass'
 module LivingStyleGuide
   class VariablesImporter < Sass::Importers::Base
     VALID_FILE_NAME = /\A#{Sass::SCSS::RX::IDENT}\Z/
-    VARIABLE_IMPORTER_REGEX = %r{^variables:(((.+/)?([^\*.]+))/(.+?)(\.s[ac]ss)?)$}
+    VARIABLE_IMPORTER_STRING = 'LivingStyleGuide::VariablesImporter'
     VALID_EXTENSIONS = %w(*.sass *.scss)
 
     TEMPLATE_FOLDER = File.join(File.expand_path('../', __FILE__), 'variables_importer')
@@ -13,9 +13,9 @@ module LivingStyleGuide
     CONTENT_TEMPLATE = ERB.new(File.read(CONTENT_TEMPLATE_FILE))
 
     def find(uri, options)
-      if uri =~ VARIABLE_IMPORTER_REGEX
-        uri = $1
-        return self.class.sass_engine(uri, self.class.variables(uri), self, options)
+      if uri =~ /^#{VARIABLE_IMPORTER_STRING}$/
+        @options = options
+        return self.class.sass_engine(uri, all_variables, self, options)
       end
       nil
     end
@@ -61,6 +61,20 @@ module LivingStyleGuide
       variables
     end
 
+    def all_variables
+      variables = []
+      test = /^#{File.dirname(@options[:filename])}/
+      @options[:living_style_guide].files.each do |file|
+        if file =~ test
+          sass = File.read(file)
+          variables << sass.scan(%r(\$([a-z\-_]+)\s*:))
+        end
+      end
+      variables.flatten!
+      variables.uniq!
+      variables
+    end
+
     def self.sass_options(uri, importer, options)
       options.merge! :filename => uri.gsub(%r{\*/},"*\\/"), :syntax => :scss, :importer => importer
     end

data/lib/livingstyleguide/variables_importer/content.erb

@@ -1,19 +1,21 @@
 <% variables.each do |variable| %>
-  .\$<%= variable %> {
-    @if type-of($<%= variable %>) == color {
-      @extend %livingstyleguide--color-swatch !optional;
-      @if (lightness($<%= variable %>) < lightness($livingstyleguide--color)) {
-        color: $livingstyleguide--background-color;
-      }
+  $<%= variable %>: null !default;
+  @if $<%= variable %> != null {
+    .\$<%= variable %> {
+      @if type-of($<%= variable %>) == color {
+        @if (lightness($<%= variable %>) < lightness($livingstyleguide--color)) {
+          color: $livingstyleguide--background-color;
+        }
 
-      &:before {
-        background: $<%= variable %>;
+        &:before {
+          background: $<%= variable %>;
+        }
       }
-    }
 
-    &:after {
-      @extend %livingstyleguide--code !optional;
-      content: "#{$<%= variable %>}";
+      &:after {
+        @extend %livingstyleguide--code !optional;
+        content: "#{$<%= variable %>}";
+      }
     }
   }
 <% end %>

data/lib/livingstyleguide/version.rb

@@ -1,3 +1,3 @@
 module LivingStyleGuide
-  VERSION = "1.0.0.alpha.3"
+  VERSION = "1.0.0"
 end

data/livingstyleguide.gemspec

@@ -8,8 +8,8 @@ Gem::Specification.new do |gem|
   gem.version       = LivingStyleGuide::VERSION
   gem.authors       = ["Nico Hagenburger"]
   gem.email         = ["nico@hagenburger.net"]
-  gem.description   = %q{Living Style Guide}
-  gem.summary       = %q{Living Style Guide}
+  gem.description   = %q{Automatically generate beautiful frontend style guides with Sass and Markdown. See http://livingstyleguide.org for details.}
+  gem.summary       = %q{Generate beautiful frontend style guides}
   gem.homepage      = ""
 
   gem.files         = `git ls-files`.split($/)

data/sache.json

@@ -0,0 +1,6 @@
+{
+  "name": "The LivingStyleGuide",
+  "tags": ["livingstyleguide", "documentation", "testing", "dry"],
+  "description": "Automatically generate beautiful frontend style guides with Sass and Markdown. See http://livingstyleguide.org for details."
+}
+

data/stylesheets/_livingstyleguide.scss

@@ -31,16 +31,16 @@ $livingstyleguide--width: 640px !default;
 $livingstyleguide--gap-width: 10px !default;
 $livingstyleguide--full-width-padding: $livingstyleguide--gap-width !default;
 
-$livingstyleguide--code-background-color: #505050 !default;
-$livingstyleguide--code-color: white !default;
+$livingstyleguide--code-background-color: #dddddd !default;
+$livingstyleguide--code-color: #505050 !default;
 $livingstyleguide--code-border-width: $livingstyleguide--border-width !default;
 $livingstyleguide--code-border-color: $livingstyleguide--border-color !default;
 $livingstyleguide--code-border-radius: $livingstyleguide--border-radius !default;
 
 $livingstyleguide--color-swatch-color: black !default;
-$livingstyleguide--color-swatch-border-width: $livingstyleguide--border-width !default;
-$livingstyleguide--color-swatch-border-color: $livingstyleguide--border-color !default;
-$livingstyleguide--color-swatch-border-radius: $livingstyleguide--border-radius !default;
+$livingstyleguide--color-swatch-border-width: 4px !default;
+$livingstyleguide--color-swatch-border-color: rgba(black, 0.05) !default;
+$livingstyleguide--color-swatch-border-radius: 50% !default;
 $livingstyleguide--color-swatches-per-line: 2 !default;
 
 $livingstyleguide--highlight-color: #f6ffa3 !default;

data/stylesheets/livingstyleguide/_code.scss

@@ -61,7 +61,7 @@
 }
 
 .livingstyleguide--code-block {
-  display: none;
+  display: block;//none;
   line-height: $livingstyleguide--code-line-height;
   padding: 3px 6px;
   width: $livingstyleguide--width;

data/stylesheets/livingstyleguide/_color-swatches.scss

@@ -1,4 +1,4 @@
-%livingstyleguide--color-swatch {
+.livingstyleguide--color-swatch {
   color: $livingstyleguide--color-swatch-color;
   display: block;
   float: left;
@@ -6,22 +6,16 @@
   font-size: $livingstyleguide--code-font-size;
   font-weight: bold;
   height: 4em * $livingstyleguide--base-line-height;
-  line-height: $livingstyleguide--base-line-height;
+  line-height: 1em * $livingstyleguide--base-line-height;
   list-style: none;
   margin: 0 $livingstyleguide--gap-width $livingstyleguide--gap-width 0;
-  padding-top: 1em * $livingstyleguide--base-line-height;
   position: relative;
   text-align: center;
-  width: floor(
-      ($livingstyleguide--width - ($livingstyleguide--color-swatches-per-line - 1) * $livingstyleguide--gap-width)
-      /
-      $livingstyleguide--color-swatches-per-line
-    );
   z-index: 1;
   @include box-sizing(border-box);
 
   &:before {
-    border: $livingstyleguide--color-swatch-border-width $livingstyleguide--code-border-color solid;
+    border: $livingstyleguide--color-swatch-border-width $livingstyleguide--color-swatch-border-color solid;
     content: "";
     display: block;
     height: 100%;
@@ -49,3 +43,22 @@
   @include clearfix;
   @include box-sizing(border-box);
 }
+
+@for $i from 1 through 12 {
+  .livingstyleguide--color-swatches.-lsg-#{$i}-columns .livingstyleguide--color-swatch {
+    $size: floor(($livingstyleguide--width - ($i - 1) * $livingstyleguide--gap-width) / $i);
+    height: $size;
+    padding-top: $size / 2 + ($size / 5 - 20px);
+    width: $size;
+  }
+}
+
+.livingstyleguide--color-swatch.-lsg-empty {
+  @include hide-text;
+
+  &:before,
+  &:after {
+    display: none;
+  }
+}
+

data/stylesheets/livingstyleguide/_content.scss

@@ -36,6 +36,29 @@
   -webkit-font-smoothing: antialiased;
 }
 
+.livingstyleguide--anchor {
+  color: inherit;
+  margin-left: -1em;
+  position: absolute;
+  text-decoration: none;
+  width: 1em;
+  @include opacity(0);
+
+  .livingstyleguide--headline:hover &,
+  .livingstyleguide--sub-headline:hover &,
+  .livingstyleguide--sub-sub-headline:hover & {
+    @include opacity(0.5);
+
+    &:hover {
+      @include opacity(1);
+    }
+  }
+
+  &:before {
+    content: "#";
+  }
+}
+
 .livingstyleguide--page-title {
   display: block;
   font-size: $livingstyleguide--page-title-font-size;

data/stylesheets/livingstyleguide/_layout.scss

@@ -2,3 +2,29 @@
   background: $livingstyleguide--background-color;
   display: block;
 }
+
+.livingstyleguide--container {
+  display: block;
+  min-height: 50vh;
+}
+
+.livingstyleguide--footer {
+  margin: (4 * $livingstyleguide--gap-width) auto;
+  width: $livingstyleguide--width;
+}
+
+.livingstyleguide--logo {
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZUAAADICAYAAAAgPHymAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAFX9JREFUeNrsnTF62zgaQJlsiu1Ge4LRnCBKldLyCWx320Uut5g4PoGtE8SePYClE9gptzLd7UwT5QSjdLvVKt12u0DyMwPDBAmKIAmS732fPlsSRRIg8D8AJMFnCQDk8vbtzzP151a9Tn755e8bcgSgnGdkAYBTKPfqNVGvnXodIhYApAJQVygZiAUAqQAEEQpiAUAqAEGFglgAkApAUKEgFgCkAhBUKIgFAKkABBUKYgFAKgBBhYJYAJAKQFChIBYApAIIJahQEAsAUgGEElQoiAUAqQBCaQTEAkgFAKEgFgCkAhCfUBALjJrnZAEglEJWe/5Ob+9etg+AVAAQSnKqehqn+i9iAfCD4S9AKG6hrIz1LdSfmz3XxVAYIBUAhPJkvYgFAKkAQqkvFMQCgFQAoQQVCmIBQCqAUIIKBbEAIBVAKEGFglgAkAoglKBCQSwASAUQSlChIBYApAIIJahQEAsAUgGEElQoiAUAqQBCaWr/EAsgFQCEglgAkAoglMiEglgAqQAgFMQCgFQAocQrFMQCSAUAoSAWAKQCCCVeoSAWQCoACAWxACAVQCjxCgWxAFIBQCiIBQCpAELpRXoRCwyS52QBDEAoY0Pn073kGwA9FYCGhDKG4S96LIBUAFrsoQz5RD1iAaQC0KJQohZLA0JBLIBUAFo6hzKkmx8RCyAVgA6FEpVYWhAKYgGkAgilJfo8oSRiAaQCEJFQOhVLB0JBLIBUAKH4SEH+1gnQfXpIV4g0IxbohD+RBRC7ULQMfv31t83r168/q/fHe67nWP9er6cPQgmQ5j+r11/V7/+h1vMvSiIgFUAoVu+iD2IJJZRAaUYsgFQAoeQF1z6IJbRQEAsgFYCk+ckhYxRLU0JBLIBUAKG0MNtwTGJpWiiIBZAKIJQGg2tMYmlLKIgFkAoglAaDawxiaVsoiAWQCiCUBoNrl2LpSiiIBZAKIJQGg2sXYulaKIgFkAoglAaDa5tiiUUoiAWQCiCUBoNrG2KJTSiIBZAKIJQGg2uTYolVKIgFkAoglBYmdgwpltiFglggJpilGAYnFGuf6wpB7+8idqEETDOzGwNSAYTSsFiSkaUZscDeMPwFgxaKJsBQ2NjSzFAYIBVAKBGJZQhpRiyAVAChRCCWIaUZsQBSAYTSoViGmGbEAkgFEEoHYhlymhELIBVAKC2KZQxpRizgBZcUgykULZLfawhlpYLrac/SrC+7XdRYxdjSrC83/kmleUeNAXoqUNaS/a9qif67Rut91tTz3xsKrjqwXtZczdjS/DcllH9SWwCpgK9Yonv+e4PBNdQNkWNJcy+G+QCpAGLps1DGkmaEAkgFEEtLQhl6mhEKIBVALC0LZahpRiiAVACxdCSUoaUZoQBSAcTSsVCGkmaEAkgFEEsDwVUH1tnI0oxQYG+ekwXgiwSaOjf63UjA61NwPR1hmhEK0FMBeixNBdcxphkAqQBiaTC4jjHNAEgFRi+WJoPrGNMMgFRgtGJpI7iOMc0ASAVGJ5Y2g+sY0wyAVGA0YukiuI4xzQBIBQYvli6D6xjTDIBUYLBiiSG4jjHNAEgFBieWmILrGNMMgFRgMGKJMbiOMc0ASAV6L5aYg+sY0wyAVKC3YulDcB1jmgFMnpEF0DQhAqP87U1wHWOaA+RXqvZ3a30+VX/meemwfyPLLuRr/XlqfeZim61fLT/Xf/Vvq+wn/MGLkQY5XXCOkj+mNNetwmtdUKTQ6O8m6rVTrwf1WqnvdjnryQrsgfFxtvzWseyTAl1USLNKpV5T66tVXwq2rrAqHXUCZN1nobQeXMeY5pq8kbpgl+mpfLfy/M2PUl9Sx3ay79eO7+eZlCruJ4xVKqqiH0uFXarXB/lYy+VefZeNZa9FKBMpRPr1qmA9S+Mrva6P6ntdqe9yKoddmF+q14Va/k4tf25t470Mo+j1fOlzvgcIsr0LrmNMc8dlTDcKdf2aZj0NaXhdWg1K/f0l4R+phGwR2QFfd5N14btQn7+ylr9T32lJzNR35gnUC/U6yekmpyKn9yIDu5t9mSO6pYhonW1Db0+E8iqvl4RY+hFcx5hmGDdjfEhXNqxls3N8nhi9FpOZa9xVPvd+WqBIY508Prmr/18PRShmkE3qPfSqd8F1jGkGpAIwpCAbXXAdY5oBqQAMIchGG1zHmGZAKgB9DrLRB9cxphnGxQuyALoOsoFOZPcmuI4xzT3jQB2fS8d3U7IHqQyxcG+HFEw6vPS2zyAUQCoADYrlRv++D4GWqVei58F1H4s6dgdkD1JpMjhcdlW4EUs/xYJQYOhwoh6iE0tS70T2jQRuhAJAT6V3AfCyIIBckEP0WBAK0FMBoMeCUACQCiCW+MSCULzJmwopkc8mjt+4plyCDmH4K46WbDYb8onxsZ6M8lZ9dzW0+b+qiqWvQ2EIpRJrOVbT5NujKDR6/rwz/V59fps8nT08MSd5ld/qz6d6NmLX3HyAVIbENOeKsR8Smd7erCD6fz0dfvJt9uK8qe9XY3lQUB/FglAqH2M9G/hOpHAkH+v6cGg85+iN0Wv54OjFfk7cz0rRbEu+LxPROuFZKkjFs1AUFba83yxLtrP0XP+nRB4QllPRzlVluk7yH9JFjyVSsSCUvY9x6grqkh+rkt/rOnTpscyqZB8KyyHaKIbHCUOviD1gIxQYO38iC6BP/Prrb5vXr1/rIY7jPVdxrH+v14NQAJAKQJRiQSgASAUQSxCxIBQApAKIJYhYEAoAUgHEEkQsCAUAqQBiCSIWhAKAVACxBBELQgFAKoBYgogFoQAgFUAsQcSCUACQCiCWIGJBKABIBRBLELEgFAB/mPsLBk0AIWgZLBAKAFIBCCUWhALgCcNfMHgCDIUhFACkAtCZWBAKIBUAxIJQAJAKQDxiQSiAVMgCQCwIBQCpAMQjFoQCgFQAsQQRC0IBQCoAQcSCUACQCkAQsSAUAKQCEEQsCAUAqQAEEQtCAUAqAEHEglAAkApAELEgFACkAhBELAgFAADq8/btz1NyAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYMQ869sOv3378/+Mt8tffvn75R7ruFd/5vI2Ves4LNnOlVrm3GO9E/XnP0X757v/1j5u1XI/eaZNr+8ie69+98zjN1P15yz59ujcqfV1ql7rph6nK3n2Tr2O1Gu2z7btNFfk6/HPOXZex9zaD/37ibzdqN+/qnNcHNvQZeJ+3/zed7uO/XgjZWZifLVTrzs5bmmIuliWB6407VnXythJufzgUycqrttmr/jWNc/xqpON8f/M8zf2cttA+zJVhXPWRCLVehfqz0cJ7NOcRXSFuFHLfQz9aF1J0+8SbGcF276XoN8YqvLurGM+3yMt5j5+GGrFUGl9L0F9YaU5kff6c33MbgaY/ImINKsTkwSQiifbiKSSSKuwCaHc5AQGV9qCVSIR1L3ntnWAv23hmJst61nFtM4L1jUkodxIA8SHxUDFYtaJ2wQe8YIscPJJWiRfWyc6wEhrtqwV4+rt1EXvy3nA4DAToZjoYYtrPWwhAXVu9SImUokOA+yCLTOdV9dGMM62nfWO5lqCeUMOMkRwmZPGy+SPISefoZUPVsCcS574cGDtU1tSOWxrW5KfC+vjpc4jtQ8baSgcS55PDLF8Ut9f9WiE4txRt3U9sIdpneUyr9HiM7yHVMbRU8laJWmFwLLzkFAV9BDYPGAAeW+9PzUrhuy7Dqh30tpcGJWo1n6I0OZWRT608mulltPb/90IUDpYrZo64CJT+3j6SmU+5F6KNDLOzPItx2xj5J+uM1dqWX2MPhoNggv9WeD60BS7grKty8KlDP+ZjY+jJstl32D4y18qU5/A31AvJeNNoAAxtYNgSUvrXIJIqP2wf3+SF3Dks3NLrLOGj3vqEEWZJM1e18MA64N9Qn5pCiXnuJ1arfzjoWSEXMCxrVpOkMrIyWmtxCCV44bWsyzJi53VEqtbiUwxbKSFmxS0DpMWK7ApBN/zKvMCMQ2FI6s1f+VRf7aOXvwQWJvS5IQ9UvHuCvtWCrnM0eRLA/ujC28IsfxYItCyYDutuf2Zr3xzrspquvKme4i8q/MpbTLbQ5p3ActMbKQF+YNUwEmVYDZpqbV61FGA2FkSrVOJzLz6XHXbLfdQfVrY84H3UmwpfPL8zZcEkAo4pVIWRJu8nHhXseXcBkPu7qcOYeT1UEdzfwoAUqnPlwqt85dWizekVMxhhFBDYODm0VBfyU2f85Z6qABIZWAt1rLW+aTBwPLZ6jUdcWhaPe5FvRX7MvIN2QdIBVxsKwQX87vQ5wB+tAIdPZUGqXheZU4vBQCp+AaXbU5wf0LO8MinwLui12+O1XcxBPb1BkXjNfQWeVrWmJAr/oZ+f0odVkZ5OSc7xgF31PsF05kR3F1B3/5N8NazCmI7I4jpIbC7tjJBLu3tqiW+NgJ2W/vwYMjk63mVnEbGvEBENMq+5deWnEAq8JitIZW5Y5kmr/yyg1bWQ9F/T0cSnFYd9VTM6fR1fts3/HE+BcCC4a9yHg1lOe6ctW8mbCq4dD0ENqZWtt3reJmz2JxeCgBS2aenUtQrsT9rsrVqD3dxFVjzvZXc455zeTnnUwCQSiNSaezub2Pm4Iy+9lT6cnl00TxgsxLhAyAVyA3kqfVR3vBXm1cADWEIbGMF63kPeiq2SMzzKdvAN7sCIJWB45xYMicgNh1chjAEtrbe38Y4y2tOg2LuEExKFQH4xgu5x2Lq07rUwy9GEN3Yz8Aw5kH6fiWM5/o3kT/AZ2MEFDst0zalIsdAi+X7VWDq/XlPHoD0PVhbadBl5nf12UmEM/ya+/nSIRXOp0DnGM9JmhqxKLV70VVjsu+TLeXx5Km+pFj/c+Gxz4fSIru33pu8l0SlyR+PnPVZ/2HkrT1vqbQUFD9YAVn/v+pZHTiVvDMfVXyvCqa+bHcZkSQfjLyeOXqn9FSga6HYT6M0v7uSB4sle8bkG7WOtGiIV0SlnxB7yPCXH0UTS5qt17YCYe+HwEQaeXfmv5NeyyKSXTWFMc15aibnU6BrobwzhJLdpJwa8eidWuay5mbKJPS9vr5QFUJv7NLYwXupNEv5LmQgedbT45ZamTpx/N/KzW8yBLYyDqQeApv0aQjMEMsrKfB2/urWkX4m+nmXQ2J6GNeayWBmNSTopUDXHBll8cQYttJl9lbied78dbr3cei5jYVa3zKvASXbOcve01Pxw87IueP/Nu+otp/b0dsbIaXx8irJv9pKD4l1fSI/tfbJPOacT4FYeDAblvJ/yPJ55vj8ndm4Rip+Qc93eONzi/t0lzwebjvqeR5vpNV0kiNxLcyPNZ82WauyGv+/SZp9zAFArCzsxp3dS0Eq1TB7IS8lQ+cFy7RB3o2Quz5nspalev2UfJvV1kzLVHotXYgltfbj+/HmfArEPgqgTztUGOYqYpI8vRjg2GpkMaFkBXTwMK9Uci3TJnoIbGG0Go7ris33EvOmz3Oo9V/JeaOb5PGVbnqM+Ke2e1HWeZWYein65tHSstuk/HIeqZwHE25+u1l57tOAjfj86JlcTZbt35MT+HWk8l4q2qMCXlL47h0Z2IdnLXxKrEtL7fS23WrVrXor2B0k9Z+Rvkj8LjF/1kL6dNpOVBpvDHlOfa+bb6C3Yp+3iuF8ynuPZZaJcTFOQ/sw98i/w2TcfD1H6LFc7VsscmJtXpydOWLyuqB+TaQuXskVmtOQUtlnGGLe4wKxtTLW7rF01Wq9MwLucQCpNI51eePKQ8bnVjdbnz9qWyoPOVJJE4A48Ym1E8dyrsbSSmKNPodyZTQ+U3M9daSiN2CfmH5TMnSyLAnWfZFKNkz0MoJ0mENg08RvdoSuubAC87asxyJ34C9yZN5mTyXGIQo9pLSrUnahM3aJ3/B0iHK1NEYv5gXlYu1R1r/3YGRderTgVmKN3tfrUFJZ2+PqakMHRUEt9H0vbSJTi5gfTa3g9rmj/bKHwKY113eZN1QiY8H3HR6Czx0f/411/GPppZx3PbWN6yRwzv1HY2cT6IS5bz3OjoFTKnvE5LUc06zXfm1LkKu/qrc0zK5jW89RKcO8Cuwlh6kVvpAFMEKurDhoPw0Vqewx1JBhX/HS5RCD2YXlaZAA0FQPKBvu0qzyhoCRyv5SaesRwj4HOk2GP27+A8UPjAYddFdHst5K3jnydu9TKZjUbNWTm8jMIY+FQzZdoYfA3nkuu92jgk4b2u954nd+gkDSLeZ5ux89f3NQcRuTPZaL5X6OTcfH5mtMUjH2k1G/dZ09K8in6T4xWXonf3HtTNs3P7pO2vWlpZ060hBDwV5XkIp50lvfkDXz6GkdOKS0bwWcVQw8PL+k+6A5NxoCVRsiG4/1zjwnRj2IIJibebDr+ErApezP14lYHctcO45P8Jj83HGQi1aYJo+nVc777cYKQGnJqy9Ti7jypPMgJ1LwLQT21PlnJT3M7JktZhmoK+fvlbNs6hW5yWoSQSAZMw9WC3dRcszmllQePOvOu5L1Tq2A3tV9WW8C1ocQdf8wp15ndf2VdYVg1ZhcFqcfTbf/ImcHz0sScFjw3XnOZ6ukfw+QcqVv65gSI5ZeltcQmFweuzUqve42PxTcRXtjBfV1zf28tvZTT3N/mNfaE+GYd41vZTJNaJeV1arVM2ps8nq40gi5sVryd46yeGeVxQt9T1LBem+tYNZ6bJEZHqYlvYAuxHLiuWylmFx2GbQhta/0fe6vN3JvTGG3PfA0MJvk6fh+LFKpMgR2blXQG8nLD5LG7JLpMyu9ad37IkTOV8a+6vXrB3PpbvydfK8r7UK2P4mpAgcKTD73/Kw9pqPJmy5p7wBRcsxWyeMbUPUEn9fG6ET2WAD7mC0rlsWPRlnYGL2TCzuYNzDs5JqfS2/3pfTYzX24q1AfZp7Hvcrxj46+S2WatH8H+TZ5OudXGkNm5PRAipa9s4JEIv8XDWvsfFtDHmTjwOYkne8lSDpby3qiyYG0/OcVh5ycgarFfT6X7ZnH7CIpvsGx9JhJWbyyGkQX0mtx/Sxt6GZq3/m5spGB0yrCSqpNVdXLc4dcUlydTzmBNia8h4ZUpTz1aEWaPbRXoVqGxuOEffd3JfsL3TVasmOWhj5mMpqwrFDGTzrMCl0XTtU+n/Ttaav0VPKp2n3fOVpckz2lsLIq1a7G/m9LWoX77KOumB8qBIpL6bFcSCtqmlOBrpvohhuzEGdDJvPk6eWiqWx/n96geax2gcvetma58e0V5wW0zmb7zcTSxDGzyuJxgPXuU9dKhVJRJFXW7XP8AfpHx4/uBcoM9Jj/CzAAHk2STj6TiEcAAAAASUVORK5CYII=');
+  background-size: 100%;
+  display: block;
+  height: 100px;
+  margin: auto;
+  width: 203px;
+  @include hide-text;
+
+  &:hover {
+    -webkit-transform: translateZ(0);
+    @include filter(brightness(0.7));
+  }
+}
+

data/templates/layouts/default.html.erb

@@ -18,7 +18,9 @@ for(var e,l='article aside footer header nav section time picture'.split(' ');e=
 
 <body class="livingstyleguide">
 <%= header %>
+<div class="livingstyleguide--container">
 <%= html %>
+</div>
 <%= footer %>
 </body>
 

data/test/fixtures/markdown/variables.md

@@ -1 +1,4 @@
-{{variables:variables/other-colors}}
+~~~
+@colors variables/other-colors
+~~~
+

data/test/fixtures/standalone/styleguide-as-json.html.lsg

@@ -0,0 +1,9 @@
+{
+  "source": "style.scss",
+  "title": "My Nice & Beautiful Living Style Guide",
+  "javascript-before": ["modernizr.js"],
+  "javascript-after": ["http://code.jquery.com/jquery-2.0.3.js", "application.js"],
+  "header": "<h1>Super Style Guide</h1>",
+  "footer": "<p>Made by me</p>"
+}
+

data/test/integration/markdown_test.rb

@@ -54,7 +54,7 @@ class MarkdownTest < Minitest::Test
 
   def test_text
     assert_markdown <<-HTML, 'text.md'
-      <h2 class="livingstyleguide--headline" id="hello-world">Hello World</h2>
+      <h2 class="livingstyleguide--headline" id="hello-world"><a class="livingstyleguide--anchor" href="#hello-world"></a>Hello World</h2>
       <p class="livingstyleguide--paragraph">Lorem ipsum <strong>dolor</strong> sit amet,
         <code class="livingstyleguide--code-span livingstyleguide--code">&lt;consectetur&gt; adipiscing</code> elit.
         Sed a pulvinar turpis.</p>
@@ -63,13 +63,13 @@ class MarkdownTest < Minitest::Test
         <li class="livingstyleguide--unordered-list-item">Ipsum</li>
         <li class="livingstyleguide--unordered-list-item">Dolor</li>
       </ul>
-      <h3 class="livingstyleguide--sub-headline" id="more-lorem">More Lorem</h3>
+      <h3 class="livingstyleguide--sub-headline" id="more-lorem"><a class="livingstyleguide--anchor" href="#more-lorem"></a>More Lorem</h3>
       <ol class="livingstyleguide--ordered-list">
         <li class="livingstyleguide--ordered-list-item">Lorem</li>
         <li class="livingstyleguide--ordered-list-item">Ipsum</li>
         <li class="livingstyleguide--ordered-list-item">Dolor</li>
       </ol>
-      <h4 class="livingstyleguide--sub-sub-headline" id="even-more-lorem">Even More Lorem</h4>
+      <h4 class="livingstyleguide--sub-sub-headline" id="even-more-lorem"><a class="livingstyleguide--anchor" href="#even-more-lorem"></a>Even More Lorem</h4>
     HTML
   end
 
@@ -106,7 +106,7 @@ class MarkdownTest < Minitest::Test
 
   def test_variables
     assert_markdown <<-HTML, 'variables.md'
-      <ul class="livingstyleguide--color-swatches">
+      <ul class="livingstyleguide--color-swatches -lsg-2-columns">
         <li class="livingstyleguide--color-swatch $blue">$blue</li>
         <li class="livingstyleguide--color-swatch $green">$green</li>
       </ul>

data/test/integration/standalone_test.rb

@@ -10,6 +10,12 @@ class MarkdownTest < Minitest::Test
     assert_match %r(<title>My Nice &amp; Beautiful Living Style Guide</title>), html
   end
 
+  def test_default_source
+    html = render('test/fixtures/standalone/style.html.lsg')
+    assert_match %r(background: red), html
+    assert_match %r(<button class="button">), html
+  end
+
   def test_custom_styles
     html = render('test/fixtures/standalone/styleguide-with-style.html.lsg')
     assert_match %r(.livingstyleguide--ordered-list { color: red;), html
@@ -39,6 +45,20 @@ class MarkdownTest < Minitest::Test
     assert_match %r(<p>Made by me</p>), html
   end
 
+  def test_json
+    html = render('test/fixtures/standalone/styleguide-as-json.html.lsg')
+    assert_match %r(<title>My Nice &amp; Beautiful Living Style Guide</title>), html
+    assert_match %r(<script src="modernizr.js"></script>.*</head>), html
+    assert_match %r(<script src="http://code.jquery.com/jquery-2.0.3.js"></script> <script src="application.js"></script> </body>), html
+    assert_match %r(<h1>Super Style Guide</h1>), html
+    assert_match %r(<p>Made by me</p>), html
+  end
+
+  def test_variables
+    html = render('test/fixtures/standalone/styleguide.html.lsg')
+    assert_match %r(\.\\\$my-base-color), html
+  end
+
   private
   def render(file)
     Tilt.new(file).render.gsub(/\s+/, ' ')

data/test/integration/variables_test.rb

@@ -30,36 +30,4 @@ class VariablesImporterTest < Minitest::Test
     css.strip!
     %Q(      #{css}\n)
   end
-
-  def test_output_of_variables
-    css = render <<-SCSS
-      $livingstyleguide--color: black;
-      %livingstyleguide--code {
-        test: code;
-      }
-      %livingstyleguide--color-swatch {
-        test: color;
-      }
-      @import "variables/colors";
-      @import "variables:variables/colors";
-    SCSS
-
-    assert_equal <<-CSS, css
-      .\\$my-wonderful_red:after, .\\$blue:after {
-        test: code;
-      }
-      .\\$my-wonderful_red {
-        test: color;
-      }
-      .\\$my-wonderful_red:before {
-        background: red;
-      }
-      .\\$my-wonderful_red:after {
-        content: "red";
-      }
-      .\\$blue:after {
-        content: "blue";
-      }
-    CSS
-  end
 end

data/test/unit/filters/colors_test.rb

@@ -0,0 +1,65 @@
+# encoding: utf-8
+
+require 'example_test_helper'
+
+class ColorsTest < ExampleTestCase
+
+  def test_colors_of_file
+    LivingStyleGuide::VariablesImporter.stub :variables, %w(red blue) do
+      assert_render_equals <<-INPUT, <<-OUTPUT
+        @colors variables/colors
+      INPUT
+        <ul class="livingstyleguide--color-swatches -lsg-2-columns">
+          <li class="livingstyleguide--color-swatch $red">$red</li>
+          <li class="livingstyleguide--color-swatch $blue">$blue</li>
+        </ul>
+      OUTPUT
+    end
+  end
+
+  def test_defined_colors
+    assert_render_equals <<-INPUT, <<-OUTPUT
+      @colors
+      $orange $green
+    INPUT
+      <ul class="livingstyleguide--color-swatches -lsg-2-columns">
+        <li class="livingstyleguide--color-swatch $orange">$orange</li>
+        <li class="livingstyleguide--color-swatch $green">$green</li>
+      </ul>
+    OUTPUT
+  end
+
+  def test_rows
+    assert_render_equals <<-INPUT, <<-OUTPUT
+      @colors
+      $pink $purple $gray
+      $turquoise $cyan $black
+    INPUT
+      <ul class="livingstyleguide--color-swatches -lsg-3-columns">
+        <li class="livingstyleguide--color-swatch $pink">$pink</li>
+        <li class="livingstyleguide--color-swatch $purple">$purple</li>
+        <li class="livingstyleguide--color-swatch $gray">$gray</li>
+        <li class="livingstyleguide--color-swatch $turquoise">$turquoise</li>
+        <li class="livingstyleguide--color-swatch $cyan">$cyan</li>
+        <li class="livingstyleguide--color-swatch $black">$black</li>
+      </ul>
+    OUTPUT
+  end
+
+  def test_skipped_cells
+    assert_render_equals <<-INPUT, <<-OUTPUT
+      @colors
+      $pink $purple
+      -     $turquoise
+    INPUT
+      <ul class="livingstyleguide--color-swatches -lsg-2-columns">
+        <li class="livingstyleguide--color-swatch $pink">$pink</li>
+        <li class="livingstyleguide--color-swatch $purple">$purple</li>
+        <li class="livingstyleguide--color-swatch -lsg-empty">-</li>
+        <li class="livingstyleguide--color-swatch $turquoise">$turquoise</li>
+      </ul>
+    OUTPUT
+  end
+
+end
+

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: livingstyleguide
 version: !ruby/object:Gem::Version
-  version: 1.0.0.alpha.3
+  version: 1.0.0
 platform: ruby
 authors:
 - Nico Hagenburger
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-02-06 00:00:00.000000000 Z
+date: 2014-02-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: minisyntax
@@ -178,7 +178,8 @@ dependencies:
     - - '>='
       - !ruby/object:Gem::Version
         version: '0'
-description: Living Style Guide
+description: Automatically generate beautiful frontend style guides with Sass and
+  Markdown. See http://livingstyleguide.org for details.
 email:
 - nico@hagenburger.net
 executables:
@@ -204,6 +205,7 @@ files:
 - lib/livingstyleguide/filters.rb
 - lib/livingstyleguide/filters/add_wrapper_class.rb
 - lib/livingstyleguide/filters/coffee_script.rb
+- lib/livingstyleguide/filters/colors.rb
 - lib/livingstyleguide/filters/font_example.rb
 - lib/livingstyleguide/filters/full_width.rb
 - lib/livingstyleguide/filters/haml.rb
@@ -221,6 +223,7 @@ files:
 - lib/livingstyleguide/variables_importer/content.erb
 - lib/livingstyleguide/version.rb
 - livingstyleguide.gemspec
+- sache.json
 - stylesheets/_livingstyleguide.scss
 - stylesheets/livingstyleguide/_code.scss
 - stylesheets/livingstyleguide/_color-swatches.scss
@@ -243,7 +246,9 @@ files:
 - test/fixtures/standalone/config.rb
 - test/fixtures/standalone/modules/_buttons.md
 - test/fixtures/standalone/modules/_buttons.scss
+- test/fixtures/standalone/style.html.lsg
 - test/fixtures/standalone/style.scss
+- test/fixtures/standalone/styleguide-as-json.html.lsg
 - test/fixtures/standalone/styleguide-with-header-footer.html.lsg
 - test/fixtures/standalone/styleguide-with-javascript.html.lsg
 - test/fixtures/standalone/styleguide-with-sass.html.lsg
@@ -263,6 +268,7 @@ files:
 - test/unit/filter_hooks_test.rb
 - test/unit/filters/add_wrapper_class_test.rb
 - test/unit/filters/coffee_script_test.rb
+- test/unit/filters/colors_test.rb
 - test/unit/filters/font_example_test.rb
 - test/unit/filters/full_width_test.rb
 - test/unit/filters/haml_test.rb
@@ -283,15 +289,15 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>'
+  - - '>='
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.1.11
 signing_key: 
 specification_version: 4
-summary: Living Style Guide
+summary: Generate beautiful frontend style guides
 test_files:
 - test/example_test_helper.rb
 - test/fixtures/markdown/code-block-and-example.md
@@ -309,7 +315,9 @@ test_files:
 - test/fixtures/standalone/config.rb
 - test/fixtures/standalone/modules/_buttons.md
 - test/fixtures/standalone/modules/_buttons.scss
+- test/fixtures/standalone/style.html.lsg
 - test/fixtures/standalone/style.scss
+- test/fixtures/standalone/styleguide-as-json.html.lsg
 - test/fixtures/standalone/styleguide-with-header-footer.html.lsg
 - test/fixtures/standalone/styleguide-with-javascript.html.lsg
 - test/fixtures/standalone/styleguide-with-sass.html.lsg
@@ -329,6 +337,7 @@ test_files:
 - test/unit/filter_hooks_test.rb
 - test/unit/filters/add_wrapper_class_test.rb
 - test/unit/filters/coffee_script_test.rb
+- test/unit/filters/colors_test.rb
 - test/unit/filters/font_example_test.rb
 - test/unit/filters/full_width_test.rb
 - test/unit/filters/haml_test.rb