init

Gruntfile.js

@@ -70,6 +70,22 @@ module.exports = function (grunt) {
             }
         },
 
+        less: {
+            main: {
+                expand: true,
+                cwd: 'demo/less',
+                src: ['**/*.less'],
+                dest: 'demo/css/',
+                ext: '.css'
+            },
+            dev: {
+                options: {
+                    compress: true,
+                    yuicompress: false
+                }
+            }
+        },
+
         uglify: {
             options: {
                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
@@ -115,8 +131,8 @@ module.exports = function (grunt) {
         },
         watch: {
             scripts: {
-                files: ['src/**/*.js', 'demo/**/*.js'],
+                files: ['src/**/*.js', 'demo/**/*.js', 'demo/**/*.less'],
-                tasks: ['concat'],
+                tasks: ['less', 'concat'],
                 options: {
                     spanw: true,
                     interrupt: true
@@ -127,9 +143,10 @@ module.exports = function (grunt) {
 
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-contrib-less');
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-contrib-concat');
     grunt.loadNpmTasks('grunt-contrib-cssmin');
 
-    grunt.registerTask('default', ['concat', 'watch']);
+    grunt.registerTask('default', ['less', 'concat', 'watch']);
 };

demo.css

@@ -1,3 +1,27 @@
 .demo-main .bg1 {
   background-color: #178cdf;
 }
+.demo-north {
+  background-color: #3c8dbc;
+}
+.demo-west {
+  background-color: #222d32;
+}
+.demo-main .bg1 {
+  background-color: #178cdf;
+}
+.demo-north {
+  background-color: #3c8dbc;
+}
+.demo-west {
+  background-color: #222d32;
+}
+.demo-main .bg1 {
+  background-color: #178cdf;
+}
+.demo-north {
+  background-color: #3c8dbc;
+}
+.demo-west {
+  background-color: #222d32;
+}

demo.js

@@ -11,21 +11,57 @@ Demo = {
         element: '#wrapper'
     });
     // ref.destroy();
-});Demo.Main = BI.inherit(BI.Widget, {
+});Demo.Center = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-center"
+    },
+    render: function () {
+
+    }
+});
+$.shortcut("demo.center", Demo.Center);Demo.Main = BI.inherit(BI.Widget, {
     props: {
         baseCls: "demo-main"
     },
     render: function () {
         return {
-            type: "bi.button_group",
+            type: "bi.border",
-            layouts: [{
+            items: {
-                type: "bi.vertical"
+                north: {
-            }],
+                    height: 50,
-            items: [{
+                    el: {
-                type: "bi.button",
+                        type: "demo.north"
-                text: 1
+                    }
-            }]
+                },
+                west: {
+                    width: 230,
+                    el: {
+                        type: "demo.west"
+                    }
+                },
+                center: {
+                    el: {
+                        type: "demo.center",
+                    }
+                }
+            }
         }
     }
 });
-$.shortcut("demo.main", Demo.Main);
+$.shortcut("demo.main", Demo.Main);Demo.North = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-north"
+    },
+    render: function () {
+
+    }
+});
+$.shortcut("demo.north", Demo.North);Demo.West = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-west"
+    },
+    render: function () {
+
+    }
+});
+$.shortcut("demo.west", Demo.West);

demo/css/north.css

@@ -0,0 +1,3 @@
+.demo-north {
+  background-color: #3c8dbc;
+}

demo/css/west.css

@@ -0,0 +1,3 @@
+.demo-west {
+  background-color: #222d32;
+}

demo/js/center.js

@@ -0,0 +1,9 @@
+Demo.Center = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-center"
+    },
+    render: function () {
+
+    }
+});
+$.shortcut("demo.center", Demo.Center);

demo/js/main.js

@@ -4,14 +4,26 @@ Demo.Main = BI.inherit(BI.Widget, {
     },
     render: function () {
         return {
-            type: "bi.button_group",
+            type: "bi.border",
-            layouts: [{
+            items: {
-                type: "bi.vertical"
+                north: {
-            }],
+                    height: 50,
-            items: [{
+                    el: {
-                type: "bi.button",
+                        type: "demo.north"
-                text: 1
+                    }
-            }]
+                },
+                west: {
+                    width: 230,
+                    el: {
+                        type: "demo.west"
+                    }
+                },
+                center: {
+                    el: {
+                        type: "demo.center",
+                    }
+                }
+            }
         }
     }
 });

demo/js/north.js

@@ -0,0 +1,9 @@
+Demo.North = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-north"
+    },
+    render: function () {
+
+    }
+});
+$.shortcut("demo.north", Demo.North);

demo/js/west.js

@@ -0,0 +1,9 @@
+Demo.West = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-west"
+    },
+    render: function () {
+
+    }
+});
+$.shortcut("demo.west", Demo.West);

demo/less/center.less

@@ -0,0 +1,3 @@
+.demo-center {
+
+}

demo/less/north.less

@@ -0,0 +1,3 @@
+.demo-north{
+  background-color: #3c8dbc;
+}

demo/less/west.less

@@ -0,0 +1,3 @@
+.demo-west {
+  background-color: #222d32;
+}

package.json

@@ -10,6 +10,7 @@
     "grunt-contrib-concat": "^1.0.1",
     "grunt-contrib-cssmin": "^1.0.1",
     "grunt-contrib-jshint": "^1.0.0",
+    "grunt-contrib-less": "^1.4.1",
     "grunt-contrib-uglify": "^1.0.1",
     "grunt-contrib-watch": "^1.0.0",
     "open": "0.0.5"