installed grunt

sites/all/themes/gui/materiobasetheme/scss/wysiwyg.scss

@@ -0,0 +1,95 @@
+/* LISIBILITY */
+@import "../components/gui/gui.less";
+
+
+*{font-size:14px;}
+div{border: 1px dashed #D4D4D4;}
+p:after, ul:after{content:"¬"; color:red;}
+
+h1:before, h2:before, h3:before, h4:before, h5:before, h6:before{
+	 color:blue; font-weight: normal; font-size:10px; vertical-align: super;
+}
+
+h1:before{content:"h1 ";}
+h2:before{content:"h2 ";}
+h3:before{content:"h3 ";}
+h4:before{content:"h4 ";}
+h5:before{content:"h5 ";}
+h6:before{content:"h6 ";}
+
+
+h2{font-size:24px;}
+h3{font-size:18px;}
+h4{font-size:16px;}
+h5{font-size:14px;}
+h6{font-size:12px;}
+
+br:after{content:"·"; color:red; border: 1px solid #999;}
+
+/* LAYOUT AND GRAPHICS */
+#full{ width:99%; }
+#demi{ width:47%; }
+#tiers{ width:29%; }
+#quart{ width:23%; }
+#right{ float:right; margin-left:2%; }
+#left{ float:left; margin-right:2%; }
+#center{ display:block; margin:0 auto; }
+
+
+img{height:auto; margin:0.5em 0;}
+p{ border: 1px dashed #848484; }
+div{border: 1px solid #1A1A1A;}
+
+img,p,div{ position:relative;
+	&:before{font-size:10px; color:red; background-color: #1A1A1A; position:absolute; top:0; z-index:3000;}
+
+	&.full{#full; &:before{content:" full ";}}
+	&.demi{ #demi; margin-right:2%; &:before{content:" demi "; right:0;}}
+	&.tiers{ #tiers; margin-right:2%; &:before{content:" tiers "; right:0;}}
+	&.quart{ #quart; margin-right:2%; &:before{content:" quart "; right:0;}}
+
+	&.demi-left{ #demi; #left; &:before{content:" demi-left "; left:0;}}
+	&.demi-right{ #demi; #right;  &:before{content:" demi-right "; right:0;}}
+	&.demi-center{ #demi; #center;  &:before{content:" demi-denter "; right:0;}}
+
+	&.tiers-left{ #tiers; #left;  &:before{content:" tiers-left "; left:0;}}
+	&.tiers-right{ #tiers; #right;  &:before{content:" tiers-right "; right:0;}}
+	&.tiers-center{ #tiers; #center;  &:before{content:" tiers-center "; right:0;}}
+
+	&.quart-left{ #quart; #left;  &:before{content:" quart-left "; left:0;}}
+	&.quart-right{ #quart; #right;  &:before{content:" quart-right "; right:0;}}
+	&.quart-center{ #quart; #center;  &:before{content:" quart-center "; right:0;}}
+
+
+
+}
+
+table, tr,td{
+	position:relative;
+	padding:1em 0.3em 0.3em;
+	width:100%;
+
+	&:before{
+		font-size:10px; color:white; background-color: blue;
+		position:absolute; top:0; left:0; z-index:3000;
+		padding:1px 3px;
+	}
+}
+table{
+	border:2px solid blue!important;
+	&:before{content:"table";}
+}
+
+tr{
+	display:block;
+	border:1px dashed blue!important;
+	&:before{content:"tr";}
+}
+
+td{
+	border:1px dotted blue!important;
+	&:before{content:"td";}
+	p{
+		padding:0 15px;
+	}
+}