add task gulp

gulpfile.js

@@ -8,6 +8,7 @@ var rename = require('gulp-rename');
 var minifycss = require('gulp-minify-css');
 // var sourcemaps = require('gulp-sourcemaps');
 var autoprefixer = require('gulp-autoprefixer');
+var stylus = require('gulp-stylus');
 
 
 // tâche CSS = compile vers knacss.css et knacss-unminified.css
@@ -36,6 +37,22 @@ gulp.task('grillade', function() {
     .pipe(gulp.dest('./css/'));
 });
 
+gulp.task('styluscss', function () {
+  return gulp.src('./styl/knacss.styl')
+    .pipe(stylus())
+    .pipe(autoprefixer())
+    .pipe(rename('knacss-unminified.css'))
+    .pipe(gulp.dest('./css/stylus/'));
+});
+
+gulp.task('styluscssmin', function () {
+  return gulp.src('./styl/knacss.styl')
+    .pipe(stylus({compress: true}))
+    .pipe(gulp.dest('./css/stylus/'))
+    .pipe(minifycss())
+    .pipe(gulp.dest('./css/stylus/'));
+});
+
 // Watcher
 gulp.task('watch', function() {
   gulp.watch(['./sass/*.scss'], ['css']);

package.json

@@ -29,12 +29,13 @@
   "dependencies": {},
   "devDependencies": {
     "gulp": "latest",
-    "gulp-rename": "latest",
-    "gulp-sass": "latest",
+    "gulp-autoprefixer": "latest",
     "gulp-concat": "latest",
     "gulp-minify-css": "latest",
-    "gulp-autoprefixer": "latest",
-    "gulp-sourcemaps": "latest"
+    "gulp-rename": "latest",
+    "gulp-sass": "latest",
+    "gulp-sourcemaps": "latest",
+    "gulp-stylus": "^2.6.0"
   },
   "engines": {}
 }

styl/config/_mixins.styl

@@ -30,22 +30,3 @@ respond-to(value)
   @media screen and string
     {block}
 */
-
-displayFlex()
-  display: -webkit-box
-  display: -ms-flexbox
-  display: flex
-
-box-orient()
-  -webkit-box-orient arguments
-
-box-direction()
-    -webkit-box-direction arguments
-
-flex-direction()
-  -ms-flex-direction arguments
-  flex-direction arguments
-
-flex-wrap()
-  -ms-flex-wrap arguments
-  flex-wrap arguments

styl/grids/_grillade.styl

@@ -25,7 +25,7 @@ iefix = 0.01px
 grid(grid-number = 1, own-gutter = 0)
   & > *
     width 'calc(100% / %s - %s)' % (grid-number iefix)
-   for key, size in grid-gutters
+  for key, size in grid-gutters
     &.has-gutter{key}
       margin-right -(size / 2)
       margin-left -(size / 2)
@@ -33,7 +33,7 @@ grid(grid-number = 1, own-gutter = 0)
         width 'calc(100% / %s - %s - %s)' % (grid-number size iefix)
         margin-right (size / 2)
         margin-left (size / 2)
-   if own-gutter != 0
+  if own-gutter != 0
     margin-right (own-gutter / 2)
     margin-left (own-gutter / 2)
 
@@ -41,9 +41,9 @@ grid(grid-number = 1, own-gutter = 0)
 @media (min-width: tiny + 1)
   .grid
   .grid--reverse
-    displayFlex()
+    flexbox(flex)
     & > *
-      flex 1 1 0%
+      flex(1 1 0%)
       box-sizing border-box
       min-width 0
       min-height 0
@@ -55,7 +55,7 @@ grid(grid-number = 1, own-gutter = 0)
 @media (min-width: tiny + 1)
   for i in 2..12
     grid-selector = 'grid-%s' % i
-    [class*={grid-selector}] > *
+    [class*=\"{grid-selector}\"]
       grid(i, 0)
 
 .push
@@ -81,17 +81,17 @@ grid(grid-number = 1, own-gutter = 0)
   flowToDivid = {'full': 1, 'one-half': 2, 'one-third': 3, 'one-quarter': 4, 'one-fifth': 5, 'one-sixth': 6, 'two-thirds': 3 * 2, 'three-quarters': 4 * 3, 'five-sixths': 6 * 5}
   for flow, divider  in flowToDivid
     .{flow}
-      flex 0 0 auto
+      flex(0 0 auto)
       width 'calc(100% / %s - %s)' % (divider iefix)
       for key, size in grid-gutters
         .has-gutter{key} .{flow}
           width 'calc(100% / %s - %s - %s)' % (divider size iefix)
 
 /* Responsive Small Breakpoint */
-@media (min-width: tiny + 1) and (max-width: small)
+@media (min-width: tiny + 1) and (max-width: medium)
   for i in 1..4
     index = '-small-%s' % i
-    [class*={index}]
+    [class*=\"{index}\"]
       & > *
         width: 'calc(100% / %s - %s)' % (i iefix)
         for key, size in grid-gutters

styl/utilities/_layout.styl

@@ -1,7 +1,7 @@
 /* ----------------------------- */
 /* ==Global Layout               */
 /* ----------------------------- */
-
+@import '../vendor/flexbox-stylus/stylus/flexbox.styl'
 /* module, gains superpower "BFC" Block Formating Context */
 .mod
 .bfc
@@ -66,16 +66,16 @@ img.{kna-namespace}fr
 http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 */
 
-[class*="{kna-namespace}flex-container"]
+[class*={kna-namespace}"flex-container"]
 .{kna-namespace}flex-container
-  display flex
-  flex-wrap wrap
+  flexbox(flex)
+  flex-wrap(wrap)
 
 .{kna-namespace}flex-container-h
-  flex-direction row
+  flex-direction(row)
 
 .{kna-namespace}flex-container-v
-  flex-direction column
+  flex-direction(column)
 
 .{kna-namespace}flex-item-fluid
   flex 1