add Row and Col component

build/build-dev.js

@@ -0,0 +1,38 @@
+const gulp = require('gulp');
+const less = require('gulp-less');
+const cssmin = require('gulp-clean-css');
+const rename = require('gulp-rename');
+
+gulp.task('compile-css', () => {
+    return gulp.src(['../src/**/*.less', '!../src/**/_*.less'])
+        .pipe(less())
+        .pipe(cssmin())
+        .pipe(rename((path) => {
+            path.extname = '.wxss';
+        }))
+        .pipe(gulp.dest('../examples/dist/'));
+});
+
+gulp.task('compile-js', () => {
+    return gulp.src(['../src/**/*.js'])
+        .pipe(gulp.dest('../examples/dist/'));
+});
+
+gulp.task('compile-json', () => {
+    return gulp.src(['../src/**/*.json'])
+        .pipe(gulp.dest('../examples/dist/'));
+});
+
+gulp.task('compile-wxml', () => {
+    return gulp.src(['../src/**/*.wxml'])
+        .pipe(gulp.dest('../examples/dist/'));
+});
+
+gulp.task('auto', () => {
+    gulp.watch('../src/**/*.less', ['compile-css']);
+    gulp.watch('../src/**/*.js', ['compile-js']);
+    gulp.watch('../src/**/*.json', ['compile-json']);
+    gulp.watch('../src/**/*.wxml', ['compile-wxml']);
+});
+
+gulp.task('default', ['compile-css', 'compile-js', 'compile-json', 'compile-wxml', 'auto']);

examples/app.json

@@ -1,6 +1,6 @@
 {
   "pages":[
-    "pages/list/index"
+    "pages/layout/index"
   ],
   "window": {
     "navigationBarBackgroundColor": "#FAFAFA",

examples/pages/layout/index.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "Grid 栅格",
+  "usingComponents": {
+    "i-row": "../../dist/row/index",
+    "i-col": "../../dist/col/index"
+  }
+}

examples/pages/layout/index.wxml

@@ -0,0 +1,14 @@
+<i-row i-class="row-class">
+    <i-col span="8" i-class="col-class">col-8</i-col>
+    <i-col span="8" i-class="col-class light">col-8</i-col>
+    <i-col span="8" i-class="col-class">col-8</i-col>
+</i-row>
+
+<i-row i-class="row-class">
+    <i-col span="4" i-class="col-class">col-4</i-col>
+    <i-col span="10" offset="4" i-class="col-class">col-10 offset-4</i-col>
+</i-row>
+
+<i-row i-class="row-class">
+    <i-col span="12" offset="12" i-class="col-class">col-12 offset-12</i-col>
+</i-row>

examples/pages/layout/index.wxss

@@ -0,0 +1,14 @@
+.row-class{
+    background: #fff;
+}
+.col-class{
+    height: 32px;
+    line-height: 32px;
+    color: #fff;
+    text-align: center;
+    background: #2d8cf0;
+    font-size: 12px;
+}
+.col-class.light{
+    background: #5cadff;
+}

package.json

@@ -7,7 +7,8 @@
     "example": "example"
   },
   "scripts": {
-    "build": "gulp --gulpfile build/build.js"
+    "dev": "gulp --gulpfile build/build-dev.js",
+    "build": "gulp --gulpfile build/build-prod.js"
   },
   "repository": {
     "type": "git",

src/col/index.js

@@ -1,3 +1,20 @@
-Page({
+Component({
+    externalClasses: ['i-class'],
 
-});
+    relations: {
+        '../row/index': {
+            type: 'parent'
+        }
+    },
+
+    properties: {
+        span: {
+            value: 0,
+            type: Number
+        },
+        offset: {
+            value: 0,
+            type: Number
+        }
+    }
+});

src/col/index.json

@@ -1,6 +1,3 @@
 {
-  "navigationBarTitleText": "List 列表",
-  "usingComponents": {
-
-  }
-}
+  "component": true
+}

src/col/index.less

@@ -1,3 +1,21 @@
-.i-col{
-    color: red;
-}
+@grid-columns: 24;
+
+.i-col {
+    float: left;
+    box-sizing: border-box;
+    width: 0;
+}
+
+.generate-columns(@grid-columns, @index: 1) when (@index =< @grid-columns) {
+    .i-col-span-@{index} {
+        display: block;
+        width: percentage((@index / @grid-columns));
+    }
+    .i-col-offset-@{index} {
+        margin-left: percentage((@index / @grid-columns));;
+    }
+
+    .generate-columns(@grid-columns, (@index + 1));
+}
+
+.generate-columns(@grid-columns);

src/col/index.wxml

@@ -0,0 +1 @@
+<view class="i-class i-col {{ span ? 'i-col-span-' + span : '' }} {{ offset ? 'i-col-offset-' + offset : '' }}"><slot></slot></view>

src/row/index.js

@@ -1,5 +1,5 @@
 Component({
-    externalClasses: ['row-class'],
+    externalClasses: ['i-class'],
 
     relations: {
         '../col/index': {

src/row/index.wxml

@@ -1 +1 @@
-<view class="row-class i-row"><slot></slot></view>
+<view class="i-class i-row"><slot></slot></view>