simplifies class names and variables

* More easy and consistent naming * Naming matches CSS attributes everywhere (before: `font` vs. `font-family`)
livingstyleguide · Jul 3, 2016 · 9a5e1e8 · 9a5e1e8
1 parent 51154b1
commit 9a5e1e8
Show file tree

Hide file tree

Showing 55 changed files with 530 additions and 506 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Adds a shortcut `@scss !global` for `@scss scope: global`
 * Fixed/improved Sass imports (#191)
+* Refactored classes and variables
 
 
 ## 2.0.0.pre.3

diff --git a/README.md b/README.md
@@ -620,16 +620,16 @@ You can also customize (e.g. translate) the placeholder for the search box:
 Most of the design of the style guide itself, is calculated by few variables in the _styleguide.html.lsg:_
 
 ```
-@style base-font: comic sans ms, arial, sans-serif
-@style base-font-size: 7em
+@style font-family: comic sans ms, arial, sans-serif
+@style font-size: 7em
 @style background-color: red
 @style border-color: $my-color
 @style color: #eee
 @style code-color: darken(red, 10%)
 @style color-swatch-border-radius: 0
 ```
 
-* For a full list of options, [have a look at the source](https://github.com/livingstyleguide/livingstyleguide/blob/master/stylesheets/_livingstyleguide.scss) (just strip `$lsg--` from the variables).
+* For a full list of options, [have a look at the source](https://github.com/livingstyleguide/livingstyleguide/blob/master/stylesheets/_livingstyleguide.scss) (just strip `$lsg-` from the variables).
 * Every Sass expression is allowed
 * Variables defined in your production Sass are available
 * `code-color` generates a whole color scheme for syntax highlighting in your corporate colors

diff --git a/lib/livingstyleguide.rb b/lib/livingstyleguide.rb
@@ -15,8 +15,8 @@ module LivingStyleGuide
   @@default_options = {
     default_language: :example,
     title: "Living Style Guide",
-    header: %Q(<h1 class="lsg--page-title">Living Style Guide</h1>),
-    footer: %Q(<div class="lsg--footer"><a class="lsg--logo" href="http://livingstyleguide.org">Made with the LivingStyleGuide gem.</a></div>),
+    header: %Q(<h1 class="lsg-page-title">Living Style Guide</h1>),
+    footer: %Q(<div class="lsg-footer"><a class="lsg-logo" href="http://livingstyleguide.org">Made with the LivingStyleGuide gem.</a></div>),
     root: "/"
   }
 

diff --git a/lib/livingstyleguide/commands/colors.rb b/lib/livingstyleguide/commands/colors.rb
@@ -6,13 +6,13 @@
   colors = colors.flatten
 
   def color_class(color)
-    "lsg--color-" + Digest::SHA1.hexdigest(color)[0..7]
+    "lsg-color-" + Digest::SHA1.hexdigest(color)[0..7]
   end
 
   document.scss << <<-SCSS
-    $lsg--colors: () !default;
-    $lsg--colors: join(
-      $lsg--colors, (#{
+    $lsg-colors: () !default;
+    $lsg-colors: join(
+      $lsg-colors, (#{
         colors.reject{ |c| c == '-' }.map do |color|
           %Q("#{color_class(color)}": #{color})
         end.join(', ')
@@ -22,14 +22,14 @@ def color_class(color)
 
   colors_html = colors.map do |color|
     if color == "-"
-      %Q(<li class="lsg--color-swatch -lsg-empty"></li>\n)
+      %Q(<li class="lsg-color-swatch lsg-empty"></li>\n)
     else
       unless color =~ /^(#[0-9a-f]{3,6}|[a-z]+)$/
-        source = %Q(<span class="lsg--color-swatch-source">#{color}</span>)
+        source = %Q(<span class="lsg-color-swatch-source">#{color}</span>)
       end
-      value = %Q(<span class="lsg--color-swatch-value #{color_class(color)}"></span>)
-      %Q(<li class="lsg--color-swatch #{color_class(color)}">#{source}#{value}</li>\n)
+      value = %Q(<span class="lsg-color-swatch-value #{color_class(color)}"></span>)
+      %Q(<li class="lsg-color-swatch #{color_class(color)}">#{source}#{value}</li>\n)
     end
   end.join("\n")
-  %(<ul class="lsg--color-swatches -lsg-#{columns}-columns">\n#{colors_html}\n</ul>\n)
+  %(<ul class="lsg-color-swatches lsg-#{columns}-columns">\n#{colors_html}\n</ul>\n)
 end
diff --git a/lib/livingstyleguide/commands/full_width.rb b/lib/livingstyleguide/commands/full_width.rb
@@ -1,4 +1,4 @@
 LivingStyleGuide.command :full_width do |arguments, options, block|
-  document.classes << '-lsg-has-full-width'
+  document.classes << 'lsg-has-full-width'
   nil
 end
diff --git a/lib/livingstyleguide/commands/style.rb b/lib/livingstyleguide/commands/style.rb
@@ -1,7 +1,7 @@
 LivingStyleGuide.command :style do |arguments, options, block|
   options.delete :block_type
   options.each do |key, value|
-    document.scss << %Q($lsg--#{key.to_s.gsub("_", "-")}: #{value};\n)
+    document.scss << %Q($lsg-#{key.to_s.gsub("_", "-")}: #{value};\n)
   end
   nil
 end
diff --git a/lib/livingstyleguide/document.rb b/lib/livingstyleguide/document.rb
@@ -101,8 +101,8 @@ def evaluate(scope, locals, &block)
     result = ERB.new(erb).result(@commands.get_binding)
     @source = result
     @html = render_html(result, locals)
-    @classes.unshift "lsg--#{@type}-example"
-    @classes.unshift "lsg--example"
+    @classes.unshift "lsg-#{@type}-example"
+    @classes.unshift "lsg-example"
     ERB.new(template_erb).result(binding).gsub(/\n\n+/, "\n")
   end
 
@@ -169,7 +169,7 @@ def insert_html_highlight_marker(html, positions)
             code_with_highlights << %Q(</strong>)
             inside_highlight = false
           else
-            code_with_highlights << %Q(<strong class="lsg--code-highlight">)
+            code_with_highlights << %Q(<strong class="lsg-code-highlight">)
             inside_highlight = true
           end
           next_position = positions.shift

diff --git a/lib/livingstyleguide/markdown_extensions.rb b/lib/livingstyleguide/markdown_extensions.rb
@@ -16,7 +16,7 @@ module LivingStyleGuide
   class RedcarpetHTML < ::Redcarpet::Render::HTML
     def initialize(options = {}, document)
       @options = options
-      @options[:prefix] ||= "lsg--"
+      @options[:prefix] ||= "lsg-"
       @document = document
       @header = nil
       @ids = {}
@@ -27,7 +27,7 @@ def header(text, header_level)
       @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="lsg--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)

diff --git a/lib/livingstyleguide/templates/code.html.erb b/lib/livingstyleguide/templates/code.html.erb
@@ -1,3 +1,3 @@
 <section class="<%= classes.join(" ") %>" id="<%= id %>">
-  <pre class="lsg--code-block"><code class="lsg--code"><%= highlighted_source %></code></pre>
+  <pre class="lsg-code-block"><code class="lsg-code"><%= highlighted_source %></code></pre>
 </section>
diff --git a/lib/livingstyleguide/templates/example.html.erb b/lib/livingstyleguide/templates/example.html.erb
@@ -1,6 +1,6 @@
 <section class="<%= classes.join(" ") %>" id="<%= id %>">
-  <div class="lsg--html">
+  <div class="lsg-html">
     <%= html %>
   </div>
-  <pre class="lsg--code-block"><code class="lsg--code"><%= highlighted_source %></code></pre>
+  <pre class="lsg-code-block"><code class="lsg-code"><%= highlighted_source %></code></pre>
 </section>
diff --git a/lib/livingstyleguide/templates/font-example.html.erb b/lib/livingstyleguide/templates/font-example.html.erb
@@ -1,6 +1,6 @@
-<div class="lsg--font-example">
-  <p class="lsg--font-example-text" style="font: <%= font %>">
+<div class="lsg-font-example">
+  <p class="lsg-font-example-text" style="font: <%= font %>">
     <%= text %>
   </p>
-  <pre class="lsg--code-block"><code class="lsg--code"><%= font %></code></pre>
+  <pre class="lsg-code-block"><code class="lsg-code"><%= font %></code></pre>
 </div>
diff --git a/lib/livingstyleguide/templates/javascript.html.erb b/lib/livingstyleguide/templates/javascript.html.erb
@@ -1,4 +1,4 @@
 <section class="<%= classes.join(" ") %>" id="<%= id %>">
   <script><%= html %></script>
-  <pre class="lsg--code-block"><code class="lsg--code"><%= highlighted_source %></code></pre>
+  <pre class="lsg-code-block"><code class="lsg-code"><%= highlighted_source %></code></pre>
 </section>
diff --git a/lib/livingstyleguide/templates/layout.html.erb b/lib/livingstyleguide/templates/layout.html.erb
@@ -18,18 +18,18 @@ for(var e,l="article aside footer header nav section time picture".split(" ");e=
 <%= head %>
 </head>
 
-<body class="livingstyleguide">
+<body class="lsg">
 <%= header %>
 <% unless before.empty? %>
-  <section class="lsg--before">
+  <section class="lsg-before">
   <%= before %>
   </section>
 <% end %>
-<div class="lsg--container">
+<div class="lsg-container">
 <%= html %>
 </div>
 <% unless after.empty? %>
-  <section class="lsg--after">
+  <section class="lsg-after">
   <%= after %>
   </section>
 <% end %>

diff --git a/lib/livingstyleguide/templates/logo.html.erb b/lib/livingstyleguide/templates/logo.html.erb
@@ -1,3 +1,3 @@
-<a href="http://livingstyleguide.org" class="lsg--logo">
+<a href="http://livingstyleguide.org" class="lsg-logo">
   Made with The LivingStyleGuide Gem
 </a>
diff --git a/lib/livingstyleguide/templates/scripts/copy.js.erb b/lib/livingstyleguide/templates/scripts/copy.js.erb
@@ -6,7 +6,7 @@ function selectElementRange(copyElementSelect) {
 
   document.execCommand("copy");
 
-  if (copyElementSelect.classList.contains("-lsg-remove")) {
+  if (copyElementSelect.classList.contains("lsg-remove")) {
     document.body.removeChild(copyElementSelect);
   }
 

diff --git a/lib/livingstyleguide/templates/scripts/copy_code.js.erb b/lib/livingstyleguide/templates/scripts/copy_code.js.erb
@@ -1,6 +1,6 @@
 document.addEventListener("DOMContentLoaded", function() {
   if (testCopy()) {
-    var code = document.getElementsByClassName("lsg--code");
+    var code = document.getElementsByClassName("lsg-code");
 
     for (var i = 0; i < code.length; i++) {
       var newButton = createButton()
@@ -14,6 +14,6 @@ document.addEventListener("DOMContentLoaded", function() {
 
 function createButton(copyCodeSelect) {
   var buttonCopy = document.createElement("button");
-  buttonCopy.className = "lsg--button";
+  buttonCopy.className = "lsg-button";
   return buttonCopy;
 }
diff --git a/lib/livingstyleguide/templates/scripts/copy_colors.js.erb b/lib/livingstyleguide/templates/scripts/copy_colors.js.erb
@@ -1,8 +1,8 @@
 document.addEventListener("DOMContentLoaded", function() {
   if (testCopy()) {
-    var colorSwatches = document.getElementsByClassName("lsg--color-swatch");
+    var colorSwatches = document.getElementsByClassName("lsg-color-swatch");
     for (var i = 0; i < colorSwatches.length; i++) {
-      if (!colorSwatches[i].classList.contains("-lsg-empty")) {
+      if (!colorSwatches[i].classList.contains("lsg-empty")) {
         colorSwatches[i].addEventListener("click", function(event) {
           if (event.target == this.children[0]) {
             selectElementRange(createDiv(this.children[0].innerHTML));
@@ -20,7 +20,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
 function createDiv(copyHexColors) {
   var divCopy = document.createElement("div");
-  divCopy.className = "-lsg-remove";
+  divCopy.className = "lsg-remove";
   divCopy.setAttribute("style", "opacity: 0; position: absolute; top: -10000px");
   divCopy.appendChild(document.createTextNode(copyHexColors));
   document.body.appendChild(divCopy);

diff --git a/lib/livingstyleguide/templates/scripts/search.js.erb b/lib/livingstyleguide/templates/scripts/search.js.erb
@@ -4,7 +4,7 @@ function hasClass(element, cls) {
 
 function addMatch(matched, node) {
   if (node.nodeType !== Node.TEXT_NODE) {
-    if (node.className.match(/lsg--/)) {
+    if (node.className.match(/lsg-/)) {
       matched.push(node);
     }
   }
@@ -13,7 +13,7 @@ function addMatch(matched, node) {
 function addNextElement(selection, matched, i) {
   var j = i + 1;
   while (j < selection.length) {
-    if (hasClass(selection[j], "lsg--headline")) {
+    if (hasClass(selection[j], "lsg-headline")) {
       break;
     }
     addMatch(matched, selection[j]);
@@ -25,7 +25,7 @@ function addPreviousElement(selection, matched, i) {
   var j = i;
   while (j >= 0) {
     addMatch(matched, selection[j]);
-    if (hasClass(selection[j], "lsg--headline")) {
+    if (hasClass(selection[j], "lsg-headline")) {
       break;
     }
     j--;
@@ -34,10 +34,10 @@ function addPreviousElement(selection, matched, i) {
 
 document.addEventListener("DOMContentLoaded", function() {
 
-  document.querySelector(".lsg--search-box").addEventListener("input", function(event) {
+  document.querySelector(".lsg-search-box").addEventListener("input", function(event) {
     var searchTerm = this.value;
 
-    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");
+    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");
     var regexp = new RegExp(searchTerm, "i");
     selection = Array.prototype.slice.call(selection);
     var matched = [];

diff --git a/lib/livingstyleguide/templates/scripts/toggle_code.js.erb b/lib/livingstyleguide/templates/scripts/toggle_code.js.erb
@@ -31,20 +31,20 @@
 
   var html = document.getElementsByTagName("HTML")[0];
 
-  var hideCode = localStorage.getItem("lsg--hide-code");
+  var hideCode = localStorage.getItem("lsg-hide-code");
 
   if (hideCode == "true") {
-    addClass(html, "lsg--hide-code");
+    addClass(html, "lsg-hide-code");
   }
 
   function toggleCode(event) {
     event.preventDefault();
-    var hideCode = toggleClass(html, "lsg--hide-code");
-    localStorage.setItem("lsg--hide-code", hideCode);
+    var hideCode = toggleClass(html, "lsg-hide-code");
+    localStorage.setItem("lsg-hide-code", hideCode);
   }
 
   document.addEventListener("DOMContentLoaded", function() {
-    var switches = document.getElementsByClassName("lsg--code-switch");
+    var switches = document.getElementsByClassName("lsg-code-switch");
     for (var i = 0; i < switches.length; i++) {
       switches[i].addEventListener("click", toggleCode);
     }

diff --git a/lib/livingstyleguide/templates/search-box.html.erb b/lib/livingstyleguide/templates/search-box.html.erb
@@ -1 +1 @@
-<input type="search" class="lsg--search-box" placeholder="<%= placeholder %>">
+<input type="search" class="lsg-search-box" placeholder="<%= placeholder %>">
diff --git a/lib/livingstyleguide/templates/toggle-code.html.erb b/lib/livingstyleguide/templates/toggle-code.html.erb
@@ -1 +1 @@
-<input type="button" class="lsg--code-switch">
+<input type="button" class="lsg-code-switch">