bem-constructor 0.7.0 → 0.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 910b0f6417254786ef0cb5eb8702ca7983a67aca
-  data.tar.gz: 7280c1831daa0288ac472543bfc6f8345d7fba97
+  metadata.gz: 4fe4ec78221810bb78a1625fec3a141f6b7dd16d
+  data.tar.gz: 79ffdfb0432371f4eb2758355c883c8a2c7b2bea
 SHA512:
-  metadata.gz: dae336cccc6221b9b8c95254b55cd3985130d864d03826b5d1f50b57b142aba6b56ff0b42ca549c2b88e5a07a515d9d0fed968a69411e015eb790ce08ff1d081
-  data.tar.gz: 8bb65c8a57669bab019de0ad76c07096883e72f1e723f36586b3763fe9fc530a230951c58f44d7b663dfb2a9b43cc098f5f4750abc2ce5d3605f058e0e82a8a0
+  metadata.gz: ce9d8d8d20d4c3447c185261fcfd67d2cf9651c7554fd99041121df0bfe45f8d90b385087192d8e972c78956f63fad5e4cd83e3367adfe49b7598baa4e7d7f47
+  data.tar.gz: 2051bb9cc4e658a73b1c64c09de69f090c1033de6dbbbf25d626d55cca407f489019793130c86fa92c7cf1e7ac1856130c1aaf69732af30abb507adb09802798

data/README.md

@@ -267,6 +267,33 @@ The compiled CSS:
     .o-burger.is-cold { taste: terrible; }
 ````
 
-## This is overkill, who is this for?
+## Visual debugger
 
-If constructing objects programatically seems too verbose or abstract to you that's perfectly OK. This tool is not for everybody. However if you need to enforce a strict way of writing BEM objects in your project, want to make sure they won't mutate and thus produce more secure CSS, then this tool might help you.
+![BEM constructor visual debugger](https://raw.githubusercontent.com/danielguillan/bem-constructor/master/visual-debugger.png)
+
+Perform a visual healthcheck against your UI using the debugger mixin.
+
+### bem-debug($targets...)
+
+````scss
+@include bem-debug('modifiers', 'components'); // Outlines all modifiers and components
+````
+
+
+Available targets are `classes`,`modifiers`,`elements`,`objects`,`components`,`utilities` and `hacks`.
+
+Use it empty to outline all target types: `@include bem-debug();`
+
+Customize outline styles by overriding the `$bem-debug-styles` map.
+
+````scss
+$bem-debug-styles: (
+    'classes'    : 5px solid #ddd,
+    'modifiers'  : 5px solid #aaa,
+    'elements'   : 5px solid #111,
+    'objects'    : 5px solid #FFDC00,
+    'components' : 5px solid #FF851B,
+    'utilities'  : 5px solid #0074D9,
+    'hacks'      : 5px solid #FF4136,
+);
+```

data/lib/bem-constructor.rb

@@ -3,6 +3,6 @@ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
 Compass::Frameworks.register('bem-constructor', :path => extension_path)
 
 module BEMConstructor
-  VERSION = "0.7.0"
+  VERSION = "0.7.1"
   DATE = "2015-03-26"
 end

data/stylesheets/_bem-constructor.scss

@@ -14,3 +14,4 @@
 @import 'theme';
 @import 'state';
 @import 'hack';
+@import 'debug';

data/stylesheets/_debug.scss

@@ -0,0 +1,102 @@
+// -----------------------------------------------------------------------------
+// Debug
+// -----------------------------------------------------------------------------
+// Table of contents:
+// 1. Classes
+// 2. Elements
+// 3. Modifiers
+// 4. Objects
+// 5. Components
+// 6. Hacks
+
+$bem-debug-styles: (
+    'classes'    : 5px solid #ddd,
+    'modifiers'  : 5px solid #aaa,
+    'elements'   : 5px solid #111,
+    'objects'    : 5px solid #FFDC00,
+    'components' : 5px solid #FF851B,
+    'utilities'  : 5px solid #0074D9,
+    'hacks'      : 5px solid #FF4136,
+) !default;
+
+@mixin bem-debug($targets...) {
+
+    // If no targets are given, show them all.
+    $show_all: length($targets) == 0;
+
+    // -----------------------------------------------------------------------------
+    // 1. Classes
+    // -----------------------------------------------------------------------------
+
+    @if not not index($targets, 'classes') or $show_all {
+        [class] {
+          outline: map-get($bem-debug-styles, 'classes');
+        }
+    }
+
+    // -----------------------------------------------------------------------------
+    // 2. Elements
+    // -----------------------------------------------------------------------------
+
+    @if not not index($targets, 'elements') or $show_all {
+        [class*="#{$bem-element-separator}"] {
+          outline: map-get($bem-debug-styles, 'elements');
+        }
+    }
+
+    // -----------------------------------------------------------------------------
+    // 3. Modifiers
+    // -----------------------------------------------------------------------------
+
+    @if not not index($targets, 'modifiers') or $show_all {
+        [class*="#{$bem-modifier-separator}"] {
+          outline: map-get($bem-debug-styles, 'modifiers');
+        }
+    }
+
+    // -----------------------------------------------------------------------------
+    // 3. Objects
+    // -----------------------------------------------------------------------------
+
+    @if not not index($targets, 'objects') or $show_all {
+        $c: map-get($bem-block-namespaces, 'object') + '-';
+        [class^="#{$c}"],
+        [class*=" #{$c}"] {
+          outline: map-get($bem-debug-styles, 'objects');
+        }
+    }
+
+    // -----------------------------------------------------------------------------
+    // 4. Components
+    // -----------------------------------------------------------------------------
+
+    @if not not index($targets, 'components') or $show_all {
+        $c: map-get($bem-block-namespaces, component) + '-';
+        [class^="#{$c}"],
+        [class*=" #{$c}"] {
+          outline: map-get($bem-debug-styles, 'components');
+        }
+    }
+
+    // -----------------------------------------------------------------------------
+    // 5. Utilities
+    // -----------------------------------------------------------------------------
+
+    @if not not index($targets, 'utilities') or $show_all {
+        $c: map-get($bem-block-namespaces, utility) + '-';
+        [class^="#{$c}"],
+        [class*=" #{$c}"] {
+          outline: map-get($bem-debug-styles, 'utilities');
+        }
+    }
+
+    // -----------------------------------------------------------------------------
+    // 6. Hacks
+    // -----------------------------------------------------------------------------
+
+    @if not not index($targets, 'hacks') or $show_all {
+        [class^="#{$hack-namespace}"] {
+          outline: map-get($bem-debug-styles, 'hacks');
+        }
+    }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bem-constructor
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.7.1
 platform: ruby
 authors:
 - Daniel Guillan
@@ -14,28 +14,28 @@ dependencies:
   name: sass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '3.4'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '3.4'
 - !ruby/object:Gem::Dependency
   name: compass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '1.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ~>
       - !ruby/object:Gem::Version
         version: '1.0'
 description: A Sass library for building immutable and namespaced BEM-style CSS objects
@@ -45,11 +45,12 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- CHANGELOG.md
 - README.md
+- CHANGELOG.md
 - lib/bem-constructor.rb
 - stylesheets/_bem-constructor.scss
 - stylesheets/_block.scss
+- stylesheets/_debug.scss
 - stylesheets/_defaults.scss
 - stylesheets/_element.scss
 - stylesheets/_error-checks.scss
@@ -79,17 +80,17 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - '>='
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - '>='
     - !ruby/object:Gem::Version
       version: 1.3.6
 requirements: []
 rubyforge_project: bem-constructor
-rubygems_version: 2.2.2
+rubygems_version: 2.0.14
 signing_key: 
 specification_version: 4
 summary: BEM Constructor is a Sass library for building immutable and namespaced BEM-style