README.md in bem-constructor-0.7.0 vs README.md in bem-constructor-0.7.1
- old
+ new
@@ -265,8 +265,35 @@
/* And we're all sad when a burger Is Cold */
.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,
+);
+```