livingstyleguide 2.0.0.alpha.8 → 2.0.0.alpha.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5e3b015481d2b291fe4ba908445a84a459d76419
-  data.tar.gz: 116a75025030319420a75c8fa6a74110a81252fa
+  metadata.gz: e03cd21e33364ddfbf67d1a6d9f9c76e07d44ba2
+  data.tar.gz: 7f1ebb09b674d7846a915b3fb8547c9e191e62eb
 SHA512:
-  metadata.gz: 1eaa5240a3bf3afb259c544b76207a060ae9fcadb0da48edeb52af8d31d314a036741e59043fb1a78fa7628866a951d1e0fd2a17ec918cf058d50824592a5956
-  data.tar.gz: 7d06db6a008fea6c480440f241c9497baadf0a3fab357cacaf06f62c8048f410a1aacded48de4e300c1c09c36a05654e532e8a4c0955f4dbfbaca6b059f6b3e3
+  metadata.gz: 532de7e59bd8e913945e6983bf635533f662c9cc702ce1b086dccc2a33dbd64aa4e0359520272cbc5afde6e64e304aaa698ac2ebb3dc0aa742377653cd19c9a3
+  data.tar.gz: 68cad8cb19c4cc277794f312fac26d010bd3018a239f8610c06cf18a363859574fe31014b05f8e00ba9a549285daec12453a78e342542372ae53726871758f35

data/assets/javascripts/livingstyleguide.js

@@ -65,7 +65,7 @@
   }
 
   document.addEventListener('DOMContentLoaded', function() {
-    var switches = document.getElementsByClassName('livingstyleguide--code-switch');
+    var switches = document.getElementsByClassName('lsg--code-switch');
     for (var i = 0; i < switches.length; i++) {
       switches[i].addEventListener('click', toggleCode);
     }

data/lib/livingstyleguide/document.rb

@@ -3,6 +3,7 @@
 require 'tilt'
 require 'erb'
 require 'digest'
+require 'pathname'
 
 class LivingStyleGuide::Document < ::Tilt::Template
   attr_accessor :source, :type, :filters, :template, :classes, :html
@@ -63,7 +64,7 @@ class LivingStyleGuide::Document < ::Tilt::Template
 
   def path
     if file
-      File.dirname(file)
+      Pathname.new(File.dirname(file)).cleanpath.to_s
     elsif options.has_key?(:livingstyleguide)
       options[:livingstyleguide].path
     else
@@ -86,8 +87,8 @@ class LivingStyleGuide::Document < ::Tilt::Template
     result = ERB.new(erb).result(@filters.get_binding)
     @source = result
     @html = render_html(result, locals)
-    @classes.unshift "livingstyleguide--#{@type}-example"
-    @classes.unshift "livingstyleguide--example"
+    @classes.unshift "lsg--#{@type}-example"
+    @classes.unshift "lsg--example"
     ERB.new(template_erb).result(binding).gsub(/\n\n+/, "\n")
   end
 
@@ -154,7 +155,7 @@ class LivingStyleGuide::Document < ::Tilt::Template
             code_with_highlights << %Q(</strong>)
             inside_highlight = false
           else
-            code_with_highlights << %Q(<strong class="livingstyleguide--code-highlight">)
+            code_with_highlights << %Q(<strong class="lsg--code-highlight">)
             inside_highlight = true
           end
           next_position = positions.shift
@@ -243,7 +244,8 @@ class LivingStyleGuide::Document < ::Tilt::Template
   private
   def generate_id
     if @file
-      @file.sub('/_', '/').gsub(/\.\w+/, '')
+      id = Pathname.new(@file).cleanpath.to_s
+      id.sub('/_', '/').gsub(/\.\w+/, '')
     else
       "section-#{Digest::SHA256.hexdigest(data)[0...6]}"
     end

data/lib/livingstyleguide/engine.rb

@@ -108,7 +108,7 @@ module LivingStyleGuide
     def style_variables
       return unless @options.has_key?(:style)
       @options[:style].map do |key, value|
-        "$livingstyleguide--#{key}: #{value}"
+        "$lsg--#{key}: #{value}"
       end
     end
 

data/lib/livingstyleguide/filters/colors.rb

@@ -2,10 +2,13 @@ LivingStyleGuide.add_filter :colors do |arguments, options, content|
   colors = content.split(/\n+/).map{ |l| l.strip.split(/\s+/) }
   columns = colors.map{ |l| l.size }.max
   colors = colors.flatten
+
+  document.head << ERB.new(File.read("#{File.dirname(__FILE__)}/../templates/colors-example.html.erb")).result
+
   document.scss << <<-SCSS
-    $livingstyleguide--variables: () !default;
-    $livingstyleguide--variables: join(
-      $livingstyleguide--variables, (#{
+    $lsg--variables: () !default;
+    $lsg--variables: join(
+      $lsg--variables, (#{
         colors.reject{ |c| c == '-' }.map do |variable|
           %Q("#{variable}": #{variable})
         end.join(', ')
@@ -16,7 +19,7 @@ LivingStyleGuide.add_filter :colors do |arguments, options, content|
     if variable == '-'
       css_class = '-lsg-empty'
     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
+      %Q(<li class="lsg--color-swatch #{css_class || variable}"><span>#{variable}</span></li>\n)
+    end.join("\n")
+      %(<ul class="lsg--color-swatches -lsg-#{columns}-columns">\n#{colors_html}\n</ul>\n)
+    end

data/lib/livingstyleguide/filters/css.rb

@@ -1,16 +1,19 @@
-LivingStyleGuide.add_filter :css, :scss do |arguments, options, source|
+LivingStyleGuide.add_filter :css do |arguments, options, css|
   file = arguments.first
-  if file =~ /\.(css|scss|sass)$/
+  if file =~ /\.css$/
     if document.file
       file = File.join(File.dirname(document.file), file)
     end
     document.depend_on file
     document.scss << %Q(@import "#{file}";\n)
   else
-    if options[:preprocessor] == "sass"
-      source = Sass::Engine.new(source).to_tree.to_scss
+    scope = "#" + document.id.gsub(/[\/\.]/, '\\\0')
+    scoped_css = css.gsub(/(?<=\}|\A|;)[^@\};]+?(?=\{)/) do |selector|
+      selector.split(",").map do |single_selector|
+        "#{scope} #{single_selector}"
+      end.join(",")
     end
-    document.scss << "##{document.id.gsub('/', '\\/')} {\n#{source}\n}\n"
+    document.scss << scoped_css
   end
   nil
 end

data/lib/livingstyleguide/filters/data.rb

@@ -1,13 +1,5 @@
-require 'json'
-require 'yaml'
-
 LivingStyleGuide.add_filter :data do |arguments, options, data|
-  if options[:format] == "yaml"
-    data = Psych.load(data)
-  else
-    data = "{#{data}}" unless data.strip =~ /^[\[\{]/
-    data = JSON.parse(data)
-  end
+  data = LivingStyleGuide.parse_data(data)
   if data.is_a?(Array)
     document.locals = [] unless document.locals.is_a?(Array)
     document.locals.push(*data)

data/lib/livingstyleguide/filters/import_and_use.rb

@@ -17,10 +17,7 @@ LivingStyleGuide.add_filter :import do |arguments, options, data|
     raise "Error: Please use `@css #{glob}` instead of `@import #{glob}` for importing Sass."
   end
 
-  if data
-    Kernel.require 'json'
-    data = JSON.parse("{#{data}}")
-  end
+  data = LivingStyleGuide.parse_data(data)
 
   map_files glob do |file|
     html = ::Tilt.new(file, livingstyleguide: document).render(document.scope, data)

data/lib/livingstyleguide/filters/sass.rb

@@ -0,0 +1,28 @@
+LivingStyleGuide.add_filter :scss do |arguments, options, scss|
+  file = arguments.first
+  if file
+    if document.file
+      file = File.join(File.dirname(document.file), file)
+    end
+    document.depend_on file
+    document.scss << %Q(@import "#{file}";\n)
+  else
+    document.scss << "##{document.id.gsub(/[\/\.]/, '\\\0')} {\n#{scss}\n}\n"
+  end
+  nil
+end
+
+LivingStyleGuide.add_filter :sass do |arguments, options, sass|
+  file = arguments.first
+  if file
+    if document.file
+      file = File.join(File.dirname(document.file), file)
+    end
+    document.depend_on file
+    document.scss << %Q(@import "#{file}";\n)
+  else
+    scss = Sass::Engine.new(sass).to_tree.to_scss
+    document.scss << "##{document.id.gsub(/[\/\.]/, '\\\0')} {\n#{scss}\n}\n"
+  end
+  nil
+end

data/lib/livingstyleguide/filters/style.rb

@@ -1,7 +1,7 @@
 LivingStyleGuide.add_filter :style do |arguments, options, block|
   options.delete :block_type
   options.each do |key, value|
-    document.scss << %Q($livingstyleguide--#{key.to_s.gsub("_", "-")}: #{value};\n)
+    document.scss << %Q($lsg--#{key.to_s.gsub("_", "-")}: #{value};\n)
   end
   nil
 end

data/lib/livingstyleguide/filters.rb

@@ -30,6 +30,7 @@ require 'livingstyleguide/filters/add_wrapper_class'
 require 'livingstyleguide/filters/font_example'
 require 'livingstyleguide/filters/colors'
 require 'livingstyleguide/filters/css'
+require 'livingstyleguide/filters/sass'
 require 'livingstyleguide/filters/style'
 require 'livingstyleguide/filters/data'
 require 'livingstyleguide/filters/layout'

data/lib/livingstyleguide/markdown_extensions.rb

@@ -14,19 +14,20 @@ module LivingStyleGuide
   }
 
   class RedcarpetHTML < ::Redcarpet::Render::HTML
-
     def initialize(options = {}, document)
       @options = options
-      @options[:prefix] ||= 'livingstyleguide--'
+      @options[:prefix] ||= 'lsg--'
       @document = document
+      @header = nil
+      @ids = {}
       super @options
     end
 
     def header(text, header_level)
-      id = slug(text)
+      @header = id = slug(text)
       klass = %w(page-title headline sub-headline sub-sub-headline)[header_level]
       header_level += 1
-      %Q(<h#{header_level} class="#{@options[:prefix]}#{klass}" id="#{id}"><a class="livingstyleguide--anchor" href="##{id}"></a>#{text}</h#{header_level}>\n)
+      %Q(<h#{header_level} class="#{@options[:prefix]}#{klass}" id="#{id}"><a class="lsg--anchor" href="##{id}"></a>#{text}</h#{header_level}>\n)
     end
 
     def paragraph(text)
@@ -46,6 +47,7 @@ module LivingStyleGuide
       language = language.to_s.strip.to_sym
       language = @options[:default_language] if language == :''
       document = Document.new(livingstyleguide: @document) { code }
+      document.id = document_id
       document.type = language == :example ? :html : language
       document.template = template_for(language)
       document.render(@document.scope)
@@ -64,6 +66,17 @@ module LivingStyleGuide
       text.downcase.gsub(/[ _\.\-!\?\(\)\[\]]+/, '-').gsub(/^-|-$/, '')
     end
 
+    private
+    def document_id
+      file = File.basename(@document.file, ".lsg").sub(/^_/, "") if @document.file
+      id = [file, @header].compact.uniq.join("-")
+      if id != ""
+        @ids[id] ||= 0
+        @ids[id] += 1
+        [id, @ids[id]].join("-")
+      end
+    end
+
     private
     def template_for(language)
       language == :example ? :example : :code

data/lib/livingstyleguide/templates/code.html.erb

@@ -1,3 +1,3 @@
 <section class="<%= classes.join(' ') %>" id="<%= id %>">
-  <pre class="livingstyleguide--code-block"><code class="livingstyleguide--code"><%= highlighted_source %></code></pre>
+  <pre class="lsg--code-block"><code class="lsg--code"><%= highlighted_source %></code></pre>
 </section>

data/lib/livingstyleguide/templates/colors-example.html.erb

@@ -0,0 +1,64 @@
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    if (testCopy()) {
+      var colorSwatches = document.getElementsByClassName('lsg--color-swatch');
+      for (var i = 0; i < colorSwatches.length; i++) {
+
+        if (!colorSwatches[i].classList.contains('-lsg-empty')) {
+          colorSwatches[i].appendChild(createSpan());
+          colorSwatches[i].addEventListener('click', function(event) {
+            if (event.altKey) {
+              var copyHexColors = window.getComputedStyle(this, ':after').getPropertyValue('content');
+              copyHexColors = copyHexColors.replace(/'/g, "");
+              selectElementRange(createDiv(copyHexColors));
+            }
+            else {
+              selectElementRange(this.children[0]);
+            }
+          });
+        }
+      }
+    }
+  });
+
+  function createDiv(copyHexColors) {
+    var divCopy = document.createElement('div');
+    divCopy.className = '-lsg-remove';
+    divCopy.setAttribute('style', 'opacity:0; position: absolute; top: -10000px');
+    divCopy.appendChild(document.createTextNode(copyHexColors));
+    document.body.appendChild(divCopy);
+    return divCopy
+  }
+
+  function createSpan() {
+    var spanHover = document.createElement('span');
+    spanHover.className = 'lsg--copy-color';
+    spanHover.appendChild(document.createTextNode("Click to copy variable\nAlt + click to copy HEX code"));
+    return spanHover
+  }
+
+  function selectElementRange(copyElementSelect) {
+    var range = document.createRange();
+    range.selectNode(copyElementSelect);
+    window.getSelection().removeAllRanges();
+    window.getSelection().addRange(range);
+
+    document.execCommand('copy');
+
+    if (copyElementSelect.classList.contains('-lsg-remove')) {
+       document.body.removeChild(copyElementSelect);
+    }
+
+    window.getSelection().removeAllRanges();
+  }
+
+  function testCopy() {
+    try {
+      document.execCommand('copy');
+      return true;
+    }
+    catch(err) {
+      return false;
+    }
+  }
+</script>

data/lib/livingstyleguide/templates/example.html.erb

@@ -1,6 +1,6 @@
 <section class="<%= classes.join(' ') %>" id="<%= id %>">
-  <div class="livingstyleguide--html">
+  <div class="lsg--html">
     <%= html %>
   </div>
-  <pre class="livingstyleguide--code-block"><code class="livingstyleguide--code"><%= highlighted_source %></code></pre>
+  <pre class="lsg--code-block"><code class="lsg--code"><%= highlighted_source %></code></pre>
 </section>

data/lib/livingstyleguide/templates/font-example.html.erb

@@ -1,3 +1,3 @@
-<div class="livingstyleguide--font-example" style="font: <%= font %>">
+<div class="lsg--font-example" style="font: <%= font %>">
   <%= text %>
 </div>

data/lib/livingstyleguide/templates/javascript.html.erb

@@ -1,4 +1,4 @@
 <section class="<%= classes.join(' ') %>" id="<%= id %>">
   <script><%= html %></script>
-  <pre class="livingstyleguide--code-block"><code class="livingstyleguide--code"><%= highlighted_source %></code></pre>
+  <pre class="lsg--code-block"><code class="lsg--code"><%= highlighted_source %></code></pre>
 </section>

data/lib/livingstyleguide/templates/layout.html.erb

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

data/lib/livingstyleguide/version.rb

@@ -1,3 +1,3 @@
 module LivingStyleGuide
-  VERSION = '2.0.0.alpha.8'
+  VERSION = '2.0.0.alpha.9'
 end

data/lib/livingstyleguide.rb

@@ -1,6 +1,8 @@
 Encoding.default_external = Encoding::UTF_8
 Encoding.default_internal = Encoding::UTF_8
 
+require "yaml"
+
 begin
   require 'compass'
 rescue LoadError
@@ -10,8 +12,8 @@ module LivingStyleGuide
   @@default_options = {
     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>',
+    header: '<h1 class="lsg--page-title">Living Style Guide</h1>',
+    footer: '<div class="lsg--footer"><a class="lsg--logo" href="http://livingstyleguide.org">Made with the LivingStyleGuide gem.</a></div>',
     root: '/'
   }
 
@@ -22,6 +24,16 @@ module LivingStyleGuide
   def self.add_filter(*keys, &block)
     Filters.add_filter(*keys, &block)
   end
+
+  def self.parse_data(data)
+    if data
+      if Psych.respond_to?(:safe_load)
+        Psych.safe_load(data)
+      else
+        Psych.load(data)
+      end
+    end
+  end
 end
 
 require 'livingstyleguide/version'

data/stylesheets/_livingstyleguide.scss

@@ -1,52 +1,52 @@
 //// INTEGRATION ////
 
-$livingstyleguide--layout-selector: body !default;
+$lsg--layout-selector: body !default;
 
 //// TYPOGRAPHY ////
 
-$livingstyleguide--base-font: 'Georgia', 'Times New Roman', serif !default;
-$livingstyleguide--base-font-size: 14px !default;
-$livingstyleguide--base-font-weight: normal !default;
-$livingstyleguide--base-line-height: 1.4 !default;
-$livingstyleguide--base-text-align: left !default;
-$livingstyleguide--page-title-font-size: 30px !default;
-$livingstyleguide--headline-font: $livingstyleguide--base-font !default;
-$livingstyleguide--headline-font-size: 22px !default;
-$livingstyleguide--headline-text-align: left !default;
-$livingstyleguide--sub-headline-font-size: 16px !default;
-$livingstyleguide--sub-sub-headline-font-size: $livingstyleguide--base-font-size !default;
-$livingstyleguide--headline-font-weight: bold !default;
-$livingstyleguide--headline-line-height: 1.1 !default;
-$livingstyleguide--code-font: Courier, "Courier New", monospace !default;
-$livingstyleguide--code-font-size: 12px !default;
-$livingstyleguide--code-font-weight: normal !default;
-$livingstyleguide--code-line-height: 1.5 !default;
+$lsg--base-font: 'Georgia', 'Times New Roman', serif !default;
+$lsg--base-font-size: 14px !default;
+$lsg--base-font-weight: normal !default;
+$lsg--base-line-height: 1.4 !default;
+$lsg--base-text-align: left !default;
+$lsg--page-title-font-size: 30px !default;
+$lsg--headline-font: $lsg--base-font !default;
+$lsg--headline-font-size: 22px !default;
+$lsg--headline-text-align: left !default;
+$lsg--sub-headline-font-size: 16px !default;
+$lsg--sub-sub-headline-font-size: $lsg--base-font-size !default;
+$lsg--headline-font-weight: bold !default;
+$lsg--headline-line-height: 1.1 !default;
+$lsg--code-font: Courier, "Courier New", monospace !default;
+$lsg--code-font-size: 12px !default;
+$lsg--code-font-weight: normal !default;
+$lsg--code-line-height: 1.5 !default;
 
 //// STYLING ////
 
-$livingstyleguide--background-color: #f7f7f7 !default;
-$livingstyleguide--border-width: 1px !default;
-$livingstyleguide--border-color: silver !default;
-$livingstyleguide--border-radius: 0 !default;
-$livingstyleguide--color: #505050 !default;
-$livingstyleguide--width: 640px !default;
-$livingstyleguide--gap-width: 10px !default;
-$livingstyleguide--full-width-padding: $livingstyleguide--gap-width !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: 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;
-$livingstyleguide--highlight-border-radius: 2px;
+$lsg--background-color: #f7f7f7 !default;
+$lsg--border-width: 1px !default;
+$lsg--border-color: silver !default;
+$lsg--border-radius: 0 !default;
+$lsg--color: #505050 !default;
+$lsg--width: 640px !default;
+$lsg--gap-width: 10px !default;
+$lsg--full-width-padding: $lsg--gap-width !default;
+
+$lsg--code-background-color: #dddddd !default;
+$lsg--code-color: #505050 !default;
+$lsg--code-border-width: $lsg--border-width !default;
+$lsg--code-border-color: $lsg--border-color !default;
+$lsg--code-border-radius: $lsg--border-radius !default;
+
+$lsg--color-swatch-color: black !default;
+$lsg--color-swatch-border-width: 4px !default;
+$lsg--color-swatch-border-color: rgba(black, 0.05) !default;
+$lsg--color-swatch-border-radius: 50% !default;
+$lsg--color-swatches-per-line: 2 !default;
+
+$lsg--highlight-color: #f6ffa3 !default;
+$lsg--highlight-border-radius: 2px;
 
 //// IMPORTS ////
 

data/stylesheets/livingstyleguide/_code.scss

@@ -1,23 +1,23 @@
-.livingstyleguide--code {
-  @extend %livingstyleguide--reset;
+.lsg--code {
+  @extend %lsg--reset;
 }
 
-.livingstyleguide--code-span,
-.livingstyleguide--code-block {
-  @extend %livingstyleguide--reset;
-  background: $livingstyleguide--code-background-color;
-  border-radius: $livingstyleguide--code-border-radius;
-  color: $livingstyleguide--code-color;
+.lsg--code-span,
+.lsg--code-block {
+  @extend %lsg--reset;
+  background: $lsg--code-background-color;
+  border-radius: $lsg--code-border-radius;
+  color: $lsg--code-color;
   display: inline;
-  font-family: $livingstyleguide--code-font;
-  font-size: $livingstyleguide--code-font-size;
-  font-weight: $livingstyleguide--code-font-weight;
+  font-family: $lsg--code-font;
+  font-size: $lsg--code-font-size;
+  font-weight: $lsg--code-font-weight;
   overflow: scroll;
   padding: 0 3px;
   -webkit-font-smoothing: subpixel-antialiased;
 
   kbd {
-    @extend %livingstyleguide--reset;
+    @extend %lsg--reset;
     display: block;
     font-weight: bold;
 
@@ -27,8 +27,8 @@
   }
 
   em {
-    @extend %livingstyleguide--reset;
-    color: lighten($livingstyleguide--code-color, 10%);
+    @extend %lsg--reset;
+    color: lighten($lsg--code-color, 10%);
     display: inline;
     font-style: normal;
     font-weight: bold;
@@ -37,23 +37,23 @@
   }
 
   b {
-    @extend %livingstyleguide--reset;
-    color: lighten($livingstyleguide--code-color, 20%);
+    @extend %lsg--reset;
+    color: lighten($lsg--code-color, 20%);
     display: inline;
     font-weight: bold;
     vertical-align: baseline;
   }
 
   i {
-    @extend %livingstyleguide--reset;
-    color: lighten($livingstyleguide--code-color, 30%);
+    @extend %lsg--reset;
+    color: lighten($lsg--code-color, 30%);
     display: inline;
     vertical-align: baseline;
   }
 
   q {
-    @extend %livingstyleguide--reset;
-    color: lighten($livingstyleguide--code-color, 30%);
+    @extend %lsg--reset;
+    color: lighten($lsg--code-color, 30%);
     display: inline;
     vertical-align: baseline;
 
@@ -64,61 +64,61 @@
   }
 
   var {
-    @extend %livingstyleguide--reset;
+    @extend %lsg--reset;
     display: inline;
     text-decoration: underline;
     vertical-align: baseline;
   }
 }
 
-.livingstyleguide--code-block {
+.lsg--code-block {
   display: block;//none;
-  line-height: $livingstyleguide--code-line-height;
-  padding: 3px $livingstyleguide--gap-width;
-  width: $livingstyleguide--width;
+  line-height: $lsg--code-line-height;
+  padding: 3px $lsg--gap-width;
+  width: $lsg--width;
 
   .show-code & {
     display: block;
   }
 }
 
-.livingstyleguide--example + .livingstyleguide--code-block {
+.lsg--example + .lsg--code-block {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   margin-top: 0;
 }
 
-.livingstyleguide--layout-example + .livingstyleguide--code-block {
-  background: $livingstyleguide--code-background-color;
+.lsg--layout-example + .lsg--code-block {
+  background: $lsg--code-background-color;
   border-radius: 0;
-  margin: 0 0 $livingstyleguide--gap-width;
-  padding: $livingstyleguide--gap-width 0;
+  margin: 0 0 $lsg--gap-width;
+  padding: $lsg--gap-width 0;
   width: 100%;
 
-  .livingstyleguide--code {
+  .lsg--code {
     display: block;
     margin: auto;
-    width: $livingstyleguide--width;
+    width: $lsg--width;
   }
 }
 
-.livingstyleguide--font-example {
-  @extend .livingstyleguide--example;
+.lsg--font-example {
+  @extend .lsg--example;
 }
 
-.livingstyleguide--code-highlight {
-  @extend %livingstyleguide--reset;
-  background-color: $livingstyleguide--highlight-color;
-  border-radius: $livingstyleguide--highlight-border-radius;
+.lsg--code-highlight {
+  @extend %lsg--reset;
+  background-color: $lsg--highlight-color;
+  border-radius: $lsg--highlight-border-radius;
   display: inline;
   font-style: inherit;
   font-weight: inherit;
   vertical-align: baseline;
 }
 
-.livingstyleguide--code-highlight-block {
-  @extend %livingstyleguide--reset;
-  @extend .livingstyleguide--code-highlight;
+.lsg--code-highlight-block {
+  @extend %lsg--reset;
+  @extend .lsg--code-highlight;
   display: block;
 }
 

data/stylesheets/livingstyleguide/_color-swatches.scss

@@ -1,22 +1,22 @@
-.livingstyleguide--color-swatch {
-  @extend %livingstyleguide--reset;
-  color: $livingstyleguide--color-swatch-color;
+.lsg--color-swatch {
+  @extend %lsg--reset;
+  color: $lsg--color-swatch-color;
   float: left;
-  font-family: $livingstyleguide--code-font;
-  font-size: $livingstyleguide--code-font-size;
+  font-family: $lsg--code-font;
+  font-size: $lsg--code-font-size;
   font-weight: bold;
-  height: 4em * $livingstyleguide--base-line-height;
-  line-height: 1em * $livingstyleguide--base-line-height;
+  height: 4em * $lsg--base-line-height;
+  line-height: 1em * $lsg--base-line-height;
   list-style: none;
-  margin: 0 $livingstyleguide--gap-width $livingstyleguide--gap-width 0;
+  margin: 0 $lsg--gap-width $lsg--gap-width 0;
   position: relative;
   text-align: center;
   z-index: 1;
 
   &:before {
-    @extend %livingstyleguide--reset;
-    border: $livingstyleguide--color-swatch-border-width $livingstyleguide--color-swatch-border-color solid;
-    border-radius: $livingstyleguide--color-swatch-border-radius;
+    @extend %lsg--reset;
+    border: $lsg--color-swatch-border-width $lsg--color-swatch-border-color solid;
+    border-radius: $lsg--color-swatch-border-radius;
     content: "";
     height: 100%;
     left: 0;
@@ -26,31 +26,58 @@
     z-index: -1;
   }
 
+  &:hover:before {
+    color: black;
+    cursor: pointer;
+  }
+
   &:after {
+    cursor: pointer;
     display: block;
     font-weight: normal;
     text-align: center;
   }
 }
 
-.livingstyleguide--color-swatches {
-  @extend %livingstyleguide--reset;
-  margin: $livingstyleguide--gap-width auto (-$livingstyleguide--gap-width) auto;
+.lsg--copy-color {
+  background: $lsg--background-color;
+  border-radius: $lsg--border-radius;
+  color: $lsg--color;
+  cursor: pointer;
+  font-family: $lsg--base-font;
+  font-size: 0.8em;
+  left: 0;
+  line-height: 1.2em;
+  padding: 3px 0 3px 0;
+  position: absolute;
+  visibility: hidden;
+  white-space: pre-wrap;
+  width: 100%;
+  z-index: 1;
+
+  .lsg--color-swatch:hover & {
+    visibility: visible;
+  }
+}
+
+.lsg--color-swatches {
+  @extend %lsg--reset;
+  margin: $lsg--gap-width auto (-$lsg--gap-width) auto;
   overflow: hidden;
-  padding-left: $livingstyleguide--gap-width;
-  width: $livingstyleguide--width + 2 * $livingstyleguide--gap-width;
+  padding-left: $lsg--gap-width;
+  width: $lsg--width + 2 * $lsg--gap-width;
 }
 
 @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);
+  .lsg--color-swatches.-lsg-#{$i}-columns .lsg--color-swatch {
+    $size: floor(($lsg--width - ($i - 1) * $lsg--gap-width) / $i);
     height: $size;
     padding-top: $size / 2 + ($size / 5 - 20px);
     width: $size;
   }
 }
 
-.livingstyleguide--color-swatch.-lsg-empty {
+.lsg--color-swatch.-lsg-empty {
   overflow: hidden;
   text-align: left;
   text-indent: -119988px;
@@ -60,4 +87,3 @@
     display: none;
   }
 }
-

data/stylesheets/livingstyleguide/_content.scss

@@ -1,46 +1,46 @@
-.livingstyleguide--paragraph,
-.livingstyleguide--code-block,
-.livingstyleguide--unordered-list,
-.livingstyleguide--ordered-list {
-  @extend %livingstyleguide--reset;
-  color: $livingstyleguide--color;
-  font-family: $livingstyleguide--base-font;
-  font-size: $livingstyleguide--base-font-size;
-  font-weight: $livingstyleguide--base-font-weight;
-  line-height: $livingstyleguide--base-line-height;
-  margin: $livingstyleguide--gap-width auto;
-  text-align: $livingstyleguide--base-text-align;
-  width: $livingstyleguide--width;
+.lsg--paragraph,
+.lsg--code-block,
+.lsg--unordered-list,
+.lsg--ordered-list {
+  @extend %lsg--reset;
+  color: $lsg--color;
+  font-family: $lsg--base-font;
+  font-size: $lsg--base-font-size;
+  font-weight: $lsg--base-font-weight;
+  line-height: $lsg--base-line-height;
+  margin: $lsg--gap-width auto;
+  text-align: $lsg--base-text-align;
+  width: $lsg--width;
   -webkit-font-smoothing: antialiased;
 }
 
-.livingstyleguide--unordered-list-item,
-.livingstyleguide--ordered-list-item {
-  @extend %livingstyleguide--reset;
+.lsg--unordered-list-item,
+.lsg--ordered-list-item {
+  @extend %lsg--reset;
   display: list-item;
   list-style: disc;
-  margin: ceil($livingstyleguide--gap-width / 2) 0 ceil($livingstyleguide--gap-width / 2) (2 * $livingstyleguide--gap-width);
+  margin: ceil($lsg--gap-width / 2) 0 ceil($lsg--gap-width / 2) (2 * $lsg--gap-width);
 }
 
-.livingstyleguide--page-title,
-.livingstyleguide--headline,
-.livingstyleguide--sub-headline,
-.livingstyleguide--sub-sub-headline {
-  @extend %livingstyleguide--reset;
-  color: $livingstyleguide--color;
+.lsg--page-title,
+.lsg--headline,
+.lsg--sub-headline,
+.lsg--sub-sub-headline {
+  @extend %lsg--reset;
+  color: $lsg--color;
   display: block;
-  font-family: $livingstyleguide--headline-font;
-  font-size: $livingstyleguide--headline-font-size;
-  font-weight: $livingstyleguide--headline-font-weight;
-  line-height: $livingstyleguide--headline-line-height;
-  margin: (3 * $livingstyleguide--gap-width) auto $livingstyleguide--gap-width;
-  text-align: $livingstyleguide--headline-text-align;
-  width: $livingstyleguide--width;
+  font-family: $lsg--headline-font;
+  font-size: $lsg--headline-font-size;
+  font-weight: $lsg--headline-font-weight;
+  line-height: $lsg--headline-line-height;
+  margin: (3 * $lsg--gap-width) auto $lsg--gap-width;
+  text-align: $lsg--headline-text-align;
+  width: $lsg--width;
   -webkit-font-smoothing: antialiased;
 }
 
-.livingstyleguide--anchor {
-  @extend %livingstyleguide--reset;
+.lsg--anchor {
+  @extend %lsg--reset;
   color: inherit;
   display: inline;
   margin-left: -1em;
@@ -49,9 +49,9 @@
   text-decoration: none;
   width: 1em;
 
-  .livingstyleguide--headline:hover &,
-  .livingstyleguide--sub-headline:hover &,
-  .livingstyleguide--sub-sub-headline:hover & {
+  .lsg--headline:hover &,
+  .lsg--sub-headline:hover &,
+  .lsg--sub-sub-headline:hover & {
     opacity: 0.5;
 
     &:hover {
@@ -64,41 +64,41 @@
   }
 }
 
-.livingstyleguide--page-title {
+.lsg--page-title {
   display: block;
-  font-size: $livingstyleguide--page-title-font-size;
+  font-size: $lsg--page-title-font-size;
 }
 
-.livingstyleguide--sub-headline {
+.lsg--sub-headline {
   display: block;
-  font-size: $livingstyleguide--sub-headline-font-size;
+  font-size: $lsg--sub-headline-font-size;
 }
 
-.livingstyleguide--sub-sub-headline {
+.lsg--sub-sub-headline {
   display: block;
-  font-size: $livingstyleguide--sub-sub-headline-font-size;
+  font-size: $lsg--sub-sub-headline-font-size;
 }
 
-.livingstyleguide--example {
-  @extend %livingstyleguide--reset;
+.lsg--example {
+  @extend %lsg--reset;
   background: white;
-  border-top-left-radius: $livingstyleguide--border-radius;
-  border-top-right-radius: $livingstyleguide--border-radius;
+  border-top-left-radius: $lsg--border-radius;
+  border-top-right-radius: $lsg--border-radius;
   display: block;
-  margin: $livingstyleguide--gap-width auto 0;
+  margin: $lsg--gap-width auto 0;
   overflow: hidden;
-  padding: $livingstyleguide--gap-width;
+  padding: $lsg--gap-width;
   position: relative;
-  width: $livingstyleguide--width;
+  width: $lsg--width;
 
   &.-lsg-has-full-width {
-    @extend #{$livingstyleguide--layout-selector} !optional;
+    @extend #{$lsg--layout-selector} !optional;
     border-radius: 0;
     display: block;
     height: auto;
     margin: 0 auto;
     min-height: auto;
-    padding: $livingstyleguide--full-width-padding;
+    padding: $lsg--full-width-padding;
     width: 100%;
   }
 
@@ -106,9 +106,9 @@
     display: none;
   }
 
-  .livingstyleguide--code-block {
-    margin-bottom: -$livingstyleguide--gap-width;
-    margin-left: -$livingstyleguide--gap-width;
-    margin-right: -$livingstyleguide--gap-width;
+  .lsg--code-block {
+    margin-bottom: -$lsg--gap-width;
+    margin-left: -$lsg--gap-width;
+    margin-right: -$lsg--gap-width;
   }
 }

data/stylesheets/livingstyleguide/_layout.scss

@@ -1,24 +1,24 @@
 .livingstyleguide {
-  @extend %livingstyleguide--reset;
-  background: $livingstyleguide--background-color;
+  @extend %lsg--reset;
+  background: $lsg--background-color;
   display: block;
 }
 
-.livingstyleguide--container {
-  @extend %livingstyleguide--reset;
+.lsg--container {
+  @extend %lsg--reset;
   display: block;
   min-height: 50vh;
 }
 
-.livingstyleguide--footer {
-  @extend %livingstyleguide--reset;
+.lsg--footer {
+  @extend %lsg--reset;
   display: block;
-  margin: (4 * $livingstyleguide--gap-width) auto;
-  width: $livingstyleguide--width;
+  margin: (4 * $lsg--gap-width) auto;
+  width: $lsg--width;
 }
 
-.livingstyleguide--logo {
-  @extend %livingstyleguide--reset;
+.lsg--logo {
+  @extend %lsg--reset;
   background: url('data:image/png;base64,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');
   background-size: 100%;
   display: block;

data/stylesheets/livingstyleguide/_reset.scss

@@ -1,4 +1,4 @@
-%livingstyleguide--reset {
+%lsg--reset {
   background: transparent;
   border: none;
   border-collapse: collapse;

data/stylesheets/livingstyleguide/_variables.scss

@@ -1,6 +1,6 @@
-$livingstyleguide--variables: () !default;
+$lsg--variables: () !default;
 
-@each $variable, $value in $livingstyleguide--variables {
+@each $variable, $value in $lsg--variables {
   $value: null !default;
   @if $value != null {
     $selector: $variable;
@@ -12,17 +12,21 @@ $livingstyleguide--variables: () !default;
     }
     .#{$selector} {
       @if type-of($value) == color {
-        @if (lightness($value) < lightness($livingstyleguide--color)) {
-          color: $livingstyleguide--background-color;
+        @if (lightness($value) < lightness($lsg--color)) {
+          color: $lsg--background-color;
         }
 
         &:before {
           background: $value;
         }
+        &:hover:before {
+          background: transparentize($value, 0.6);
+        }
+
       }
 
       &:after {
-        @extend %livingstyleguide--code !optional;
+        @extend %lsg--code !optional;
         content: "#{inspect($value)}";
       }
     }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: livingstyleguide
 version: !ruby/object:Gem::Version
-  version: 2.0.0.alpha.8
+  version: 2.0.0.alpha.9
 platform: ruby
 authors:
 - Nico Hagenburger
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-07-01 00:00:00.000000000 Z
+date: 2015-07-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: minisyntax
@@ -223,6 +223,7 @@ files:
 - lib/livingstyleguide/filters/markdown.rb
 - lib/livingstyleguide/filters/options.rb
 - lib/livingstyleguide/filters/require.rb
+- lib/livingstyleguide/filters/sass.rb
 - lib/livingstyleguide/filters/style.rb
 - lib/livingstyleguide/filters/syntax.rb
 - lib/livingstyleguide/filters/type.rb
@@ -233,6 +234,7 @@ files:
 - lib/livingstyleguide/integration/sprockets.rb
 - lib/livingstyleguide/markdown_extensions.rb
 - lib/livingstyleguide/templates/code.html.erb
+- lib/livingstyleguide/templates/colors-example.html.erb
 - lib/livingstyleguide/templates/default.html.erb
 - lib/livingstyleguide/templates/example.html.erb
 - lib/livingstyleguide/templates/font-example.html.erb
@@ -266,7 +268,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: 1.3.1
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.2
+rubygems_version: 2.4.5
 signing_key: 
 specification_version: 4
 summary: Generate beautiful front-end style guides