livingstyleguide 2.0.0.pre.3 → 2.0.0.pre.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. checksums.yaml +4 -4
  2. data/bin/livingstyleguide +1 -1
  3. data/lib/livingstyleguide/command_line_interface.rb +14 -11
  4. data/lib/livingstyleguide/commands/colors.rb +16 -16
  5. data/lib/livingstyleguide/commands/default.rb +1 -1
  6. data/lib/livingstyleguide/commands/font_example.rb +2 -1
  7. data/lib/livingstyleguide/commands/full_width.rb +1 -1
  8. data/lib/livingstyleguide/commands/import_and_use.rb +16 -4
  9. data/lib/livingstyleguide/commands/layout.rb +22 -20
  10. data/lib/livingstyleguide/commands/options.rb +9 -9
  11. data/lib/livingstyleguide/commands/sass.rb +5 -11
  12. data/lib/livingstyleguide/commands/search_box.rb +6 -3
  13. data/lib/livingstyleguide/commands/style.rb +1 -1
  14. data/lib/livingstyleguide/document.rb +64 -41
  15. data/lib/livingstyleguide/integration/compass.rb +5 -2
  16. data/lib/livingstyleguide/integration/rails.rb +5 -3
  17. data/lib/livingstyleguide/integration/sass.rb +1 -1
  18. data/lib/livingstyleguide/integration/sprockets.rb +9 -4
  19. data/lib/livingstyleguide/markdown_extensions.rb +20 -11
  20. data/lib/livingstyleguide/templates/code.html.erb +1 -1
  21. data/lib/livingstyleguide/templates/example.html.erb +2 -2
  22. data/lib/livingstyleguide/templates/font-example.html.erb +3 -3
  23. data/lib/livingstyleguide/templates/javascript.html.erb +1 -1
  24. data/lib/livingstyleguide/templates/layout.html.erb +32 -38
  25. data/lib/livingstyleguide/templates/logo.html.erb +1 -1
  26. data/lib/livingstyleguide/templates/scripts/copy.js.erb +12 -12
  27. data/lib/livingstyleguide/templates/scripts/copy_code.js.erb +7 -7
  28. data/lib/livingstyleguide/templates/scripts/copy_colors.js.erb +14 -14
  29. data/lib/livingstyleguide/templates/scripts/search.js.erb +30 -30
  30. data/lib/livingstyleguide/templates/scripts/toggle_code.js.erb +23 -23
  31. data/lib/livingstyleguide/templates/search-box.html.erb +1 -1
  32. data/lib/livingstyleguide/templates/toggle-code.html.erb +1 -1
  33. data/lib/livingstyleguide/tilt_template.rb +17 -19
  34. data/lib/livingstyleguide/version.rb +1 -1
  35. data/lib/livingstyleguide.rb +12 -2
  36. data/stylesheets/_livingstyleguide.scss +76 -65
  37. data/stylesheets/livingstyleguide/_code.scss +51 -51
  38. data/stylesheets/livingstyleguide/_color-swatches.scss +38 -38
  39. data/stylesheets/livingstyleguide/_content.scss +73 -73
  40. data/stylesheets/livingstyleguide/_functions.scss +1 -1
  41. data/stylesheets/livingstyleguide/_layout.scss +22 -22
  42. data/stylesheets/livingstyleguide/_reset.scss +1 -1
  43. data/stylesheets/livingstyleguide/_search-box.scss +14 -14
  44. data/stylesheets/livingstyleguide/_toggle-code.scss +10 -11
  45. metadata +21 -6
@@ -1,4 +1,7 @@
1
1
  if defined?(Compass)
2
- base_directory = File.join(File.dirname(__FILE__), "..", "..", "..")
3
- Compass::Frameworks.register "livingstyleguide", path: base_directory
2
+ options = {
3
+ path: LivingStyleGuide::ROOT_PATH,
4
+ stylesheets_directory: LivingStyleGuide::SASS_PATH
5
+ }
6
+ Compass::Frameworks.register "livingstyleguide", options
4
7
  end
@@ -1,11 +1,13 @@
1
- if defined?(Rails) and defined?(Rails::Railtie)
1
+ if defined?(Rails) && defined?(Rails::Railtie)
2
2
  require "rails"
3
3
  class LivingStyleGuideRailtie < Rails::Railtie
4
- initializer "living_style_guide.assets" do
4
+ initializer "living_style_guide.assets" do |app|
5
5
  Rails.application.config.assets.configure do |env|
6
6
  env.register_engine(".lsg", ::LivingStyleGuide::Document)
7
7
  end
8
- LivingStyleGuide.default_options[:scss_template] = ::Sass::Rails::ScssTemplate
8
+ LivingStyleGuide.default_options[:scss_template] =
9
+ ::Sass::Rails::ScssTemplate
10
+ app.config.assets.paths << ::LivingStyleGuide::SASS_PATH
9
11
  end
10
12
  end
11
13
  end
@@ -1,4 +1,4 @@
1
- sass_directory = File.join(File.dirname(__FILE__), "..", "..", "..", "stylesheets")
1
+ sass_directory = LivingStyleGuide::SASS_PATH
2
2
  if ENV.has_key?("SASS_PATH")
3
3
  ENV["SASS_PATH"] = ENV["SASS_PATH"] + File::PATH_SEPARATOR + sass_directory
4
4
  else
@@ -1,5 +1,10 @@
1
- begin
2
- require "sprockets"
3
- Sprockets.register_engine(".lsg", ::LivingStyleGuide::Document)
4
- rescue LoadError
1
+ if defined?(Sprockets)
2
+ begin
3
+ require "sprockets"
4
+ Sprockets.register_engine(".lsg", ::LivingStyleGuide::Document)
5
+ if Sprockets.respond_to?(:append_path)
6
+ Sprockets.append_path(::LivingStyleGuide::SASS_PATH)
7
+ end
8
+ rescue LoadError
9
+ end
5
10
  end
@@ -14,9 +14,9 @@ module LivingStyleGuide
14
14
  }
15
15
 
16
16
  class RedcarpetHTML < ::Redcarpet::Render::HTML
17
- def initialize(options = {}, document)
17
+ def initialize(document, options = {})
18
18
  @options = options
19
- @options[:prefix] ||= "lsg--"
19
+ @options[:prefix] ||= "lsg-"
20
20
  @document = document
21
21
  @header = nil
22
22
  @ids = {}
@@ -25,9 +25,11 @@ module LivingStyleGuide
25
25
 
26
26
  def header(text, header_level)
27
27
  @header = id = slug(text)
28
- klass = %w(page-title headline sub-headline sub-sub-headline)[header_level]
28
+ class_names = %w(page-title headline sub-headline sub-sub-headline)
29
+ class_name = "#{@options[:prefix]}#{class_names[header_level]}"
29
30
  header_level += 1
30
- %Q(<h#{header_level} class="#{@options[:prefix]}#{klass}" id="#{id}"><a class="lsg--anchor" href="##{id}"></a>#{text}</h#{header_level}>\n)
31
+ %Q(<h#{header_level} class="#{class_name}" id="#{id}">) +
32
+ %Q(<a class="lsg-anchor" href="##{id}"></a>#{text}</h#{header_level}>\n)
31
33
  end
32
34
 
33
35
  def paragraph(text)
@@ -36,11 +38,13 @@ module LivingStyleGuide
36
38
 
37
39
  def list(contents, list_type)
38
40
  tag_name = "#{list_type.to_s[0, 1]}l"
39
- %Q(<#{tag_name} class="#{@options[:prefix]}#{list_type}-list">\n#{contents}</#{tag_name}>\n)
41
+ class_name = "#{@options[:prefix]}#{list_type}-list"
42
+ %Q(<#{tag_name} class="#{class_name}">\n#{contents}</#{tag_name}>\n)
40
43
  end
41
44
 
42
45
  def list_item(text, list_type)
43
- %Q(<li class="#{@options[:prefix]}#{list_type}-list-item">#{text.strip}</li>\n)
46
+ class_name = "#{@options[:prefix]}#{list_type}-list-item"
47
+ %Q(<li class="#{class_name}">#{text.strip}</li>\n)
44
48
  end
45
49
 
46
50
  def block_code(code, language)
@@ -48,17 +52,22 @@ module LivingStyleGuide
48
52
  language = @options[:default_language] if language == :""
49
53
  document = Document.new(livingstyleguide: @document) { code }
50
54
  document.id = document_id
51
- document.type = language == :example ? @document.defaults[:global][:type] : language
55
+ document.type = if language == :example
56
+ then @document.defaults[:global][:type]
57
+ else language
58
+ end
52
59
  document.template = template_for(language)
53
60
  document.render(@document.scope)
54
61
  end
55
62
 
56
63
  def codespan(code)
57
64
  code = ERB::Util.html_escape(code)
58
- %Q(<code class="#{@options[:prefix]}code-span #{@options[:prefix]}code">#{code}</code>)
65
+ class_name = "#{@options[:prefix]}code-span #{@options[:prefix]}code"
66
+ %Q(<code class="#{class_name}">#{code}</code>)
59
67
  end
60
68
 
61
69
  private
70
+
62
71
  def slug(text)
63
72
  require "active_support/core_ext/string/inflections"
64
73
  ::ActiveSupport::Inflector.parameterize(text, "-")
@@ -66,9 +75,10 @@ module LivingStyleGuide
66
75
  text.downcase.gsub(/[ _\.\-!\?\(\)\[\]]+/, "-").gsub(/^-|-$/, "")
67
76
  end
68
77
 
69
- private
70
78
  def document_id
71
- file = File.basename(@document.file, ".lsg").sub(/^_/, "") if @document.file
79
+ if @document.file
80
+ file = File.basename(@document.file, ".lsg").sub(/^_/, "")
81
+ end
72
82
  id = [file, @header].compact.uniq.join("-")
73
83
  if id != ""
74
84
  @ids[id] ||= 0
@@ -77,7 +87,6 @@ module LivingStyleGuide
77
87
  end
78
88
  end
79
89
 
80
- private
81
90
  def template_for(language)
82
91
  language == :example ? :example : :code
83
92
  end
@@ -1,3 +1,3 @@
1
1
  <section class="<%= classes.join(" ") %>" id="<%= id %>">
2
- <pre class="lsg--code-block"><code class="lsg--code"><%= highlighted_source %></code></pre>
2
+ <pre class="lsg-code-block"><code class="lsg-code"><%= highlighted_source %></code></pre>
3
3
  </section>
@@ -1,6 +1,6 @@
1
1
  <section class="<%= classes.join(" ") %>" id="<%= id %>">
2
- <div class="lsg--html">
2
+ <div class="lsg-html">
3
3
  <%= html %>
4
4
  </div>
5
- <pre class="lsg--code-block"><code class="lsg--code"><%= highlighted_source %></code></pre>
5
+ <pre class="lsg-code-block"><code class="lsg-code"><%= highlighted_source %></code></pre>
6
6
  </section>
@@ -1,6 +1,6 @@
1
- <div class="lsg--font-example">
2
- <p class="lsg--font-example-text" style="font: <%= font %>">
1
+ <div class="lsg-font-example">
2
+ <p class="lsg-font-example-text" style="font: <%= font %>">
3
3
  <%= text %>
4
4
  </p>
5
- <pre class="lsg--code-block"><code class="lsg--code"><%= font %></code></pre>
5
+ <pre class="lsg-code-block"><code class="lsg-code"><%= font %></code></pre>
6
6
  </div>
@@ -1,4 +1,4 @@
1
1
  <section class="<%= classes.join(" ") %>" id="<%= id %>">
2
2
  <script><%= html %></script>
3
- <pre class="lsg--code-block"><code class="lsg--code"><%= highlighted_source %></code></pre>
3
+ <pre class="lsg-code-block"><code class="lsg-code"><%= highlighted_source %></code></pre>
4
4
  </section>
@@ -1,41 +1,35 @@
1
1
  <!doctype html>
2
2
  <html id="<%= id %>">
3
-
4
- <head>
5
- <meta charset="utf-8">
6
- <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
7
- <meta content="width=device-width, initial-scale=1.0" name="viewport">
8
- <meta content="The LivingStyleGuide Gem v<%= LivingStyleGuide::VERSION %> – https://livingstyleguide.org" name="generator">
9
- <title><%= ERB::Util.h(title) %></title>
10
- <script>
11
- // see: http://www.hagenburger.net/BLOG/Simple-HTML5-Fix-for-IE.html
12
- for(var e,l="article aside footer header nav section time picture".split(" ");e=l.pop();document.createElement(e));
13
- <%= javascript %>
14
- </script>
15
- <style>
16
- <%= css %>
17
- </style>
18
- <%= head %>
19
- </head>
20
-
21
- <body class="livingstyleguide">
22
- <%= header %>
23
- <% unless before.empty? %>
24
- <section class="lsg--before">
25
- <%= before %>
26
- </section>
27
- <% end %>
28
- <div class="lsg--container">
29
- <%= html %>
30
- </div>
31
- <% unless after.empty? %>
32
- <section class="lsg--after">
33
- <%= after %>
34
- </section>
35
- <% end %>
36
-
37
- <%= footer %>
38
- <%= logo %>
39
- </body>
40
-
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta content="ie=edge" http-equiv="x-ua-compatible">
6
+ <meta content="width=device-width,initial-scale=1" name="viewport">
7
+ <meta content="livingstyleguide.org <%= LivingStyleGuide::VERSION %>" name="generator">
8
+ <title><%= ERB::Util.h(title) %></title>
9
+ <script>
10
+ <%= javascript %>
11
+ </script>
12
+ <style>
13
+ <%= css %>
14
+ </style>
15
+ <%= head %>
16
+ </head>
17
+ <body class="lsg">
18
+ <%= header %>
19
+ <% unless before.empty? %>
20
+ <section class="lsg-before">
21
+ <%= before %>
22
+ </section>
23
+ <% end %>
24
+ <article class="lsg-container">
25
+ <%= html %>
26
+ </article>
27
+ <% unless after.empty? %>
28
+ <section class="lsg-after">
29
+ <%= after %>
30
+ </section>
31
+ <% end %>
32
+ <%= footer %>
33
+ <%= logo %>
34
+ </body>
41
35
  </html>
@@ -1,3 +1,3 @@
1
- <a href="http://livingstyleguide.org" class="lsg--logo">
1
+ <a class="lsg-logo" href="https://livingstyleguide.org">
2
2
  Made with The LivingStyleGuide Gem
3
3
  </a>
@@ -1,24 +1,24 @@
1
1
  function selectElementRange(copyElementSelect) {
2
- var range = document.createRange();
3
- range.selectNode(copyElementSelect);
4
- window.getSelection().removeAllRanges();
5
- window.getSelection().addRange(range);
2
+ var range = document.createRange()
3
+ range.selectNode(copyElementSelect)
4
+ window.getSelection().removeAllRanges()
5
+ window.getSelection().addRange(range)
6
6
 
7
- document.execCommand("copy");
7
+ document.execCommand("copy")
8
8
 
9
- if (copyElementSelect.classList.contains("-lsg-remove")) {
10
- document.body.removeChild(copyElementSelect);
9
+ if (copyElementSelect.classList.contains("lsg-remove")) {
10
+ document.body.removeChild(copyElementSelect)
11
11
  }
12
12
 
13
- window.getSelection().removeAllRanges();
13
+ window.getSelection().removeAllRanges()
14
14
  }
15
15
 
16
16
  function testCopy() {
17
17
  try {
18
- document.execCommand("copy");
19
- return true;
18
+ document.execCommand("copy")
19
+ return true
20
20
  }
21
- catch(err) {
22
- return false;
21
+ catch (error) {
22
+ return false
23
23
  }
24
24
  }
@@ -1,19 +1,19 @@
1
1
  document.addEventListener("DOMContentLoaded", function() {
2
2
  if (testCopy()) {
3
- var code = document.getElementsByClassName("lsg--code");
3
+ var code = document.getElementsByClassName("lsg-code")
4
4
 
5
5
  for (var i = 0; i < code.length; i++) {
6
6
  var newButton = createButton()
7
7
  code[i].appendChild(newButton)
8
8
  newButton.addEventListener("click", function(event) {
9
- selectElementRange(this.parentNode);
10
- });
9
+ selectElementRange(this.parentNode)
10
+ })
11
11
  }
12
12
  }
13
- });
13
+ })
14
14
 
15
15
  function createButton(copyCodeSelect) {
16
- var buttonCopy = document.createElement("button");
17
- buttonCopy.className = "lsg--button";
18
- return buttonCopy;
16
+ var buttonCopy = document.createElement("button")
17
+ buttonCopy.className = "lsg-button"
18
+ return buttonCopy
19
19
  }
@@ -1,28 +1,28 @@
1
1
  document.addEventListener("DOMContentLoaded", function() {
2
2
  if (testCopy()) {
3
- var colorSwatches = document.getElementsByClassName("lsg--color-swatch");
3
+ var colorSwatches = document.getElementsByClassName("lsg-color-swatch")
4
4
  for (var i = 0; i < colorSwatches.length; i++) {
5
- if (!colorSwatches[i].classList.contains("-lsg-empty")) {
5
+ if (!colorSwatches[i].classList.contains("lsg-empty")) {
6
6
  colorSwatches[i].addEventListener("click", function(event) {
7
7
  if (event.target == this.children[0]) {
8
- selectElementRange(createDiv(this.children[0].innerHTML));
8
+ selectElementRange(createDiv(this.children[0].innerHTML))
9
9
  }
10
10
  else {
11
- var copyHexColors = window.getComputedStyle(this, "::after").getPropertyValue("content");
12
- copyHexColors = copyHexColors.replace(/'|"/g, "");
13
- selectElementRange(createDiv(copyHexColors));
11
+ var copyHexColors = window.getComputedStyle(this, "::after").getPropertyValue("content")
12
+ copyHexColors = copyHexColors.replace(/'|"/g, "")
13
+ selectElementRange(createDiv(copyHexColors))
14
14
  }
15
- });
15
+ })
16
16
  }
17
17
  }
18
18
  }
19
- });
19
+ })
20
20
 
21
21
  function createDiv(copyHexColors) {
22
- var divCopy = document.createElement("div");
23
- divCopy.className = "-lsg-remove";
24
- divCopy.setAttribute("style", "opacity: 0; position: absolute; top: -10000px");
25
- divCopy.appendChild(document.createTextNode(copyHexColors));
26
- document.body.appendChild(divCopy);
27
- return divCopy;
22
+ var divCopy = document.createElement("div")
23
+ divCopy.className = "lsg-remove"
24
+ divCopy.setAttribute("style", "opacity: 0; position: absolute; top: -10000px")
25
+ divCopy.appendChild(document.createTextNode(copyHexColors))
26
+ document.body.appendChild(divCopy)
27
+ return divCopy
28
28
  }
@@ -1,11 +1,11 @@
1
1
  function hasClass(element, cls) {
2
- return element.classList.contains(cls);
2
+ return element.classList.contains(cls)
3
3
  }
4
4
 
5
5
  function addMatch(matched, node) {
6
6
  if (node.nodeType !== Node.TEXT_NODE) {
7
- if (node.className.match(/lsg--/)) {
8
- matched.push(node);
7
+ if (node.className.match(/lsg-/)) {
8
+ matched.push(node)
9
9
  }
10
10
  }
11
11
  }
@@ -13,54 +13,54 @@ function addMatch(matched, node) {
13
13
  function addNextElement(selection, matched, i) {
14
14
  var j = i + 1;
15
15
  while (j < selection.length) {
16
- if (hasClass(selection[j], "lsg--headline")) {
16
+ if (hasClass(selection[j], "lsg-headline")) {
17
17
  break;
18
18
  }
19
- addMatch(matched, selection[j]);
19
+ addMatch(matched, selection[j])
20
20
  j++;
21
21
  }
22
22
  }
23
23
 
24
24
  function addPreviousElement(selection, matched, i) {
25
- var j = i;
25
+ var j = i
26
26
  while (j >= 0) {
27
- addMatch(matched, selection[j]);
28
- if (hasClass(selection[j], "lsg--headline")) {
29
- break;
27
+ addMatch(matched, selection[j])
28
+ if (hasClass(selection[j], "lsg-headline")) {
29
+ break
30
30
  }
31
- j--;
31
+ j--
32
32
  }
33
33
  }
34
34
 
35
35
  document.addEventListener("DOMContentLoaded", function() {
36
36
 
37
- document.querySelector(".lsg--search-box").addEventListener("input", function(event) {
38
- var searchTerm = this.value;
37
+ document.querySelector(".lsg-search-box").addEventListener("input", function(event) {
38
+ var searchTerm = this.value
39
39
 
40
- var selection = document.querySelectorAll(".lsg--example, .lsg--color-swatches, .lsg--font-example, .lsg--paragraph, .lsg--unordered-list, .lsg--ordered-list, .lsg--headline, .lsg--sub-headline, .lsg--sub-sub-headline");
41
- var regexp = new RegExp(searchTerm, "i");
42
- selection = Array.prototype.slice.call(selection);
43
- var matched = [];
44
- var unmatched = [];
40
+ var selection = document.querySelectorAll(".lsg-example, .lsg-color-swatches, .lsg-font-example, .lsg-paragraph, .lsg-unordered-list, .lsg-ordered-list, .lsg-headline, .lsg-sub-headline, .lsg-sub-sub-headline")
41
+ var regexp = new RegExp(searchTerm, "i")
42
+ selection = Array.prototype.slice.call(selection)
43
+ var matched = []
44
+ var unmatched = []
45
45
 
46
46
  for (var i = 0; i < selection.length; i++) {
47
47
  if (selection[i].textContent.match(regexp)) {
48
- addMatch(matched, selection[i]);
49
- addNextElement(selection, matched, i);
50
- addPreviousElement(selection, matched, i);
51
- };
52
- };
48
+ addMatch(matched, selection[i])
49
+ addNextElement(selection, matched, i)
50
+ addPreviousElement(selection, matched, i)
51
+ }
52
+ }
53
53
 
54
54
  unmatched = selection.filter(function(element) {
55
- return matched.indexOf(element) === -1;
56
- });
55
+ return matched.indexOf(element) === -1
56
+ })
57
57
 
58
58
  unmatched.map(function(item) {
59
- item.style.display = "none";
60
- });
59
+ item.style.display = "none"
60
+ })
61
61
 
62
62
  matched.map(function(item) {
63
- item.style.display = "block";
64
- });
65
- });
66
- });
63
+ item.style.display = "block"
64
+ })
65
+ })
66
+ })