Updating README

Author: Krasimir Tsonev

README.md

@@ -1,15 +1,21 @@
 # CSSX - CSS in JavaScript
 
-> Generate and/or apply CSS with JavaScript. 
+> Generate and/or apply CSS with JavaScript. Check out the demo [here](http://krasimir.github.io/cssx/playground/try-it-out/).
 
 ---
 
-[Demo!](http://krasimir.github.io/cssx/playground/try-it-out/)
-
----
+Packages:
 
 * [cssx client-side library](./packages/cssx) ([download](./packages/cssx/lib))
-* [cssx-transpiler](./packages/cssx-transpiler) ([download](./packages/cssx-transpiler/lib))
+* [cssx-transpiler](./packages/cssx-transpiler) ([download](./packages/cssx-transpiler/lib) or `npm i cssx-transpiler`)
+* [gulp plugin](./packages/gulp-cssx) (`npm i gulp-cssx -D`)
+
+Examples:
+
+* [Try it out](./playground/try-it-out)
+* [Basic](./playground/basic)
+* [Transpiling](./playground/transpiler)
+* [Transpiling with gulp](./playground/transpiler-gulp)
 
 ---
 

playground/transpiler-gulp/dist/app.js

@@ -1,12 +1,18 @@
-(function () {
-  var _4 = {};
-  _4['font-size'] = '20px';
-  _4['padding'] = '0';
-  _4['margin'] = '0';
+var a = (function () {
+  var _7 = {};
+  _7['margin'] = '6px';
+  var _6 = {};
+  _6['font-size'] = '20px';
+  _6['padding'] = '0';
+  _6['margin'] = '0';
 
-  var _3 = cssx.s('_3');
+  var _5 = cssx.s('_5');
 
-  _3.add('body', _4);
+  _5.add('body', _6);
 
-  return _3;
-}).apply(this);
+  var _8 = _5.add('@media screen and (max-width: 200px)');
+
+  _8.n('body', _7);
+
+  return _5;
+}).apply(this);;

playground/transpiler-gulp/gulpfile.js

@@ -1,9 +1,11 @@
 var gulp = require('gulp');
-var plugin = require('./plugin');
+var cssx = require('gulp-cssx');
+var plumber = require('gulp-plumber');
 
 gulp.task('cssx', function() {
   gulp.src('src/*.js')
-    .pipe(plugin())
+    .pipe(plumber())
+    .pipe(cssx())
     .pipe(gulp.dest('./dist/'));
 });
 

playground/transpiler-gulp/package.json

@@ -9,8 +9,9 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "cssx-transpiler": "2.0.5",
     "gulp": "3.9.0",
+    "gulp-cssx": "2.1.1",
+    "gulp-plumber": "1.0.1",
     "gulp-util": "3.0.7",
     "map-stream": "0.0.6"
   }

playground/transpiler-gulp/plugin/index.js

@@ -1,7 +1,12 @@
-cssx(
+var a = cssx(
   body {
     margin: 0;
     padding: 0;
     font-size: 20px;
   }
-)
+  @media screen and (max-width: 200px) {
+    body {
+      margin: 6px;
+    }
+  }
+);