diff --git a/components/10_Examples/playground/playground.config.json b/components/10_Examples/playground/playground.config.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/components/10_Examples/playground/playground.config.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/components/10_Examples/playground/playground.hbs b/components/10_Examples/playground/playground.hbs
new file mode 100644
index 0000000..528898b
--- /dev/null
+++ b/components/10_Examples/playground/playground.hbs
@@ -0,0 +1,9 @@
+<p class="wred">Red</p>
+<p class="button">button</p>
+<p class="wred button">css combo</p>
+<p class="bluebutton">mixin combo</p>
+
+<p class="field">field</p>
+<div class="wurst">
+	<p class="field">wurst field</p>
+</div>
\ No newline at end of file
diff --git a/components/_preview.hbs b/components/_preview.hbs
index 7925099..8070e2e 100644
--- a/components/_preview.hbs
+++ b/components/_preview.hbs
@@ -3,15 +3,20 @@
     <head>
         <meta contentType="text/html; charset=UTF-8"/>
         <link rel="stylesheet" href="{{ path '/rcss.css' }}">
+		<link rel="stylesheet" href="{{ path '/playground.css' }}">
         <title>Preview</title>
 
 		<style>
 			.red{
 				background-color: firebrick;
+				margin: -2px;
+				border: 1px black solid;
 			}
 
 			.green {
 				background-color: forestgreen;
+				margin: -2px;
+				border: 1px black solid;
 			}
 
 			.square {
diff --git a/components/playground.styl b/components/playground.styl
new file mode 100644
index 0000000..393912e
--- /dev/null
+++ b/components/playground.styl
@@ -0,0 +1,75 @@
+_selector_maps = {}
+_catched = {}
+
+throw(id, callback)
+	if id in _selector_maps
+		hook = _selector_maps[id]
+	else    
+		hook = {}
+	
+	hook[selector()] = callback
+	_selector_maps[id] = hook
+
+catch(id, params)
+	if selector() in _catched
+		_catches = _catched[selector()]
+	else
+		_catches = {}
+	
+	_catches[id] = params
+	_catched[selector()] = _catches
+
+_generate_hooks()
+	for catched_selector, config in _catched
+		for id, parameter in config
+			if id in _selector_maps
+				hook = _selector_maps[id]
+				for thrown_selector, callback in hook
+					{thrown_selector}{catched_selector}
+						callback(parameter)
+
+
+red()
+	color red
+	catch('button', green)
+	catch('field', red)
+
+field()
+	display inline
+	padding 10px
+	border-bottom 2px solid blue
+	throw('field', @(){
+		border-bottom 2px solid red
+		color blue
+	})
+
+button()
+	padding 5px
+	background-color orange
+	border 1px solid black
+	display inline
+	throw('button', @(c){color c})
+
+.bluebutton
+	red()
+	button()
+
+.button
+	button()
+	
+.wred
+	red()
+	
+.field
+	field()
+	
+.wurst
+	.field
+		field()
+		red()
+
+.debug
+	--one _selector_maps
+	--two _catched
+	
+_generate_hooks()
\ No newline at end of file
diff --git a/package.json b/package.json
index 4e13fd9..2c665ab 100644
--- a/package.json
+++ b/package.json
@@ -4,15 +4,17 @@
     "devDependencies": {
         "@frctl/fractal": "^1.2.1",
         "fractal": "0.0.3",
-		"sass": "^1.30.0",
-		"node-sass": "^4.14.1",
+        "sass": "^1.30.0",
+        "node-sass": "^4.14.1",
         "sass-loader": "^10.0.5",
 		"scss-bundle": "^3.1.2"
     },
     "scripts": {
-        "sass": "node-sass -w components/rcss.scss -o public/ --recursive",
-        "styleguide": "fractal start --sync",
+        "sass": "sass components/rcss.scss public/rcss.css --watch",
+		"styleguide": "fractal start --sync",
+		"stylus": "stylus -w components/* -o public/playground.css",
 		"suite": "npm run sass & npm run styleguide",
-		"bundle": "scss-bundel"
+		"suiteStylus": "npm run stylus & npm run styleguide",
+        "bundle": "scss-bundel"
     }
 }
diff --git a/public/playground.css b/public/playground.css
new file mode 100644
index 0000000..40368c2
--- /dev/null
+++ b/public/playground.css
@@ -0,0 +1,73 @@
+.bluebutton {
+  color: red;
+  padding: 5px;
+  background-color: #ffa500;
+  border: 1px solid #000;
+  display: inline;
+}
+.button {
+  padding: 5px;
+  background-color: #ffa500;
+  border: 1px solid #000;
+  display: inline;
+}
+.wred {
+  color: red;
+}
+.field {
+  display: inline;
+  padding: 10px;
+  border-bottom: 2px solid #00f;
+}
+.wurst .field {
+  display: inline;
+  padding: 10px;
+  border-bottom: 2px solid #00f;
+  color: red;
+}
+.debug {
+  --one: {"button":"({\".bluebutton\":\"(anonymous(c))\",\".button\":\"(anonymous(c))\"})","field":"({\".field\":\"(anonymous())\",\".wurst .field\":\"(anonymous())\"})"};
+  --two: {".bluebutton":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})",".wred":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})",".wurst .field":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})"};
+}
+.bluebutton.bluebutton {
+  color: #008000;
+}
+.button.bluebutton {
+  color: #008000;
+}
+.field.bluebutton {
+  border-bottom: 2px solid red;
+  color: #00f;
+}
+.wurst .field.bluebutton {
+  border-bottom: 2px solid red;
+  color: #00f;
+}
+.bluebutton.wred {
+  color: #008000;
+}
+.button.wred {
+  color: #008000;
+}
+.field.wred {
+  border-bottom: 2px solid red;
+  color: #00f;
+}
+.wurst .field.wred {
+  border-bottom: 2px solid red;
+  color: #00f;
+}
+.bluebutton.wurst .field {
+  color: #008000;
+}
+.button.wurst .field {
+  color: #008000;
+}
+.field.wurst .field {
+  border-bottom: 2px solid red;
+  color: #00f;
+}
+.wurst .field.wurst .field {
+  border-bottom: 2px solid red;
+  color: #00f;
+}
