* code for task#1712.

baa3bd1a · azhi · 750f5124 · baa3bd1a · baa3bd1a · baa3bd1a
11 changed file
--- a/assets/js/less.js
+++ b/assets/js/less.js
--- a/index.html
+++ b/index.html
---
-layout: default
-title: ZUI
-base_url: "./"
---
-
-<div>
-  
-</div>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>ZUI</title>
+  <link rel="stylesheet/less" type="text/css" href="src/less/zui.less" />
+  <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
+  <script type="text/javascript" src="assets/js/less.js"></script>
+</head>
+
+<body>
+<style>
+.row { margin-bottom: 20px; }
+.row .row { margin-top: 10px; margin-bottom: 0; }
+[class*="col-"] {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  background-color: #eee;
+  border: 1px solid #ddd;
+  background-color: rgba(86,61,124,.15);
+  border: 1px solid rgba(86,61,124,.2);
+}
+
+</style>
+<div class='container'>
+  <div class="row">
+    <div class="col-md-8">.col-md-8</div>
+    <div class="col-md-4">.col-md-4</div>
+  </div>
+  <div class="row">
+    <div class="col-md-4">.col-md-4</div>
+    <div class="col-md-4">.col-md-4</div>
+    <div class="col-md-4">.col-md-4</div>
+  </div>
+  <div class="row">
+    <div class="col-md-6">.col-md-6</div>
+    <div class="col-md-6">.col-md-6</div>
+  </div>
+
+  <div class="row">
+    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
+    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+  </div>
+  <div class="row">
+    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+    <!-- Optional: clear the XS cols if their content doesn't match in height -->
+    <div class="clearfix visible-xs"></div>
+    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
+    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
+  </div>
+
+</div>
+</body>
+</html>
+
--- a/src/less/basic/config.less
+++ b/src/less/basic/config.less
+// Extra small screen / phone
+@screen-xs:                  480px;
+@screen-phone:               @screen-xs;
+
+// Small screen / tablet
+@screen-sm:                  768px;
+@screen-tablet:              @screen-sm;
+
+// Medium screen / desktop
+@screen-md:                  992px;
+@screen-desktop:             @screen-md;
+
+// Large screen / wide desktop
+@screen-lg:                  1200px;
+@screen-lg-desktop:          @screen-lg;
+
+// So media queries don't overlap when required, provide a maximum
+@screen-xs-max:              (@screen-sm - 1);
+@screen-sm-max:              (@screen-md - 1);
+@screen-md-max:              (@screen-lg - 1);
+
+@grid-columns:              12;
+@grid-gutter-width:         30px;
+@grid-float-breakpoint:     @screen-tablet;
+
+// Small screen / tablet
+@container-tablet:            ((720px + @grid-gutter-width));
+// Medium screen / desktop
+@container-desktop:           ((940px + @grid-gutter-width));
+// Large screen / wide desktop
+@container-lg-desktop:        ((1140px + @grid-gutter-width));
--- a/src/less/basic/grid.less
+++ b/src/less/basic/grid.less
+.container { .container-fixed(); }
+
+// mobile first defaults
+.row { .make-row(); }
+
+// Common styles for small and large grid columns
+.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
+.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
+.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
+.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12
+ {
+  position: relative;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  (@grid-gutter-width / 2);
+  padding-right: (@grid-gutter-width / 2);
+}
+
+
+// Extra small grid
+//
+// Grid classes for extra small devices like smartphones. No offset, push, or
+// pull classes are present here due to the size of the target.
+//
+// Note that `.col-xs-12` doesn't get floated on purpose?there's no need since
+// it's full-width.
+
+.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11 { float: left; }
+.col-xs-1  { width: percentage((1 / @grid-columns)); }
+.col-xs-2  { width: percentage((2 / @grid-columns)); }
+.col-xs-3  { width: percentage((3 / @grid-columns)); }
+.col-xs-4  { width: percentage((4 / @grid-columns)); }
+.col-xs-5  { width: percentage((5 / @grid-columns)); }
+.col-xs-6  { width: percentage((6 / @grid-columns)); }
+.col-xs-7  { width: percentage((7 / @grid-columns)); }
+.col-xs-8  { width: percentage((8 / @grid-columns)); }
+.col-xs-9  { width: percentage((9 / @grid-columns)); }
+.col-xs-10 { width: percentage((10/ @grid-columns)); }
+.col-xs-11 { width: percentage((11/ @grid-columns)); }
+.col-xs-12 { width: 100%; }
+
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+//
+// Note that `.col-sm-12` doesn't get floated on purpose?there's no need since
+// it's full-width.
+
+@media (min-width: @screen-tablet) {
+  .container { max-width: @container-tablet; }
+
+  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11 { float: left; }
+  .col-sm-1  { width: percentage((1 / @grid-columns)); }
+  .col-sm-2  { width: percentage((2 / @grid-columns)); }
+  .col-sm-3  { width: percentage((3 / @grid-columns)); }
+  .col-sm-4  { width: percentage((4 / @grid-columns)); }
+  .col-sm-5  { width: percentage((5 / @grid-columns)); }
+  .col-sm-6  { width: percentage((6 / @grid-columns)); }
+  .col-sm-7  { width: percentage((7 / @grid-columns)); }
+  .col-sm-8  { width: percentage((8 / @grid-columns)); }
+  .col-sm-9  { width: percentage((9 / @grid-columns)); }
+  .col-sm-10 { width: percentage((10/ @grid-columns)); }
+  .col-sm-11 { width: percentage((11/ @grid-columns)); }
+  .col-sm-12 { width: 100%; }
+
+  // Push and pull columns for source order changes
+  .col-sm-push-1  { left: percentage((1 / @grid-columns)); }
+  .col-sm-push-2  { left: percentage((2 / @grid-columns)); }
+  .col-sm-push-3  { left: percentage((3 / @grid-columns)); }
+  .col-sm-push-4  { left: percentage((4 / @grid-columns)); }
+  .col-sm-push-5  { left: percentage((5 / @grid-columns)); }
+  .col-sm-push-6  { left: percentage((6 / @grid-columns)); }
+  .col-sm-push-7  { left: percentage((7 / @grid-columns)); }
+  .col-sm-push-8  { left: percentage((8 / @grid-columns)); }
+  .col-sm-push-9  { left: percentage((9 / @grid-columns)); }
+  .col-sm-push-10 { left: percentage((10/ @grid-columns)); }
+  .col-sm-push-11 { left: percentage((11/ @grid-columns)); }
+
+  .col-sm-pull-1  { right: percentage((1 / @grid-columns)); }
+  .col-sm-pull-2  { right: percentage((2 / @grid-columns)); }
+  .col-sm-pull-3  { right: percentage((3 / @grid-columns)); }
+  .col-sm-pull-4  { right: percentage((4 / @grid-columns)); }
+  .col-sm-pull-5  { right: percentage((5 / @grid-columns)); }
+  .col-sm-pull-6  { right: percentage((6 / @grid-columns)); }
+  .col-sm-pull-7  { right: percentage((7 / @grid-columns)); }
+  .col-sm-pull-8  { right: percentage((8 / @grid-columns)); }
+  .col-sm-pull-9  { right: percentage((9 / @grid-columns)); }
+  .col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
+  .col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
+
+  // Offsets
+  .col-sm-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+  .col-sm-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+  .col-sm-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+  .col-sm-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+  .col-sm-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+  .col-sm-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+  .col-sm-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+  .col-sm-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+  .col-sm-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+  .col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+  .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+//
+// Note that `.col-md-12` doesn't get floated on purpose?there's no need since
+// it's full-width.
+
+@media (min-width: @screen-desktop) {
+  .container { max-width: @container-desktop; }
+  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 { float: left; }
+  .col-md-1  { width: percentage((1 / @grid-columns)); }
+  .col-md-2  { width: percentage((2 / @grid-columns)); }
+  .col-md-3  { width: percentage((3 / @grid-columns)); }
+  .col-md-4  { width: percentage((4 / @grid-columns)); }
+  .col-md-5  { width: percentage((5 / @grid-columns)); }
+  .col-md-6  { width: percentage((6 / @grid-columns)); }
+  .col-md-7  { width: percentage((7 / @grid-columns)); }
+  .col-md-8  { width: percentage((8 / @grid-columns)); }
+  .col-md-9  { width: percentage((9 / @grid-columns)); }
+  .col-md-10 { width: percentage((10/ @grid-columns)); }
+  .col-md-11 { width: percentage((11/ @grid-columns)); }
+  .col-md-12 { width: 100%; }
+
+  // Push and pull columns for source order changes
+  .col-md-push-0  { left: auto; }
+  .col-md-push-1  { left: percentage((1 / @grid-columns)); }
+  .col-md-push-2  { left: percentage((2 / @grid-columns)); }
+  .col-md-push-3  { left: percentage((3 / @grid-columns)); }
+  .col-md-push-4  { left: percentage((4 / @grid-columns)); }
+  .col-md-push-5  { left: percentage((5 / @grid-columns)); }
+  .col-md-push-6  { left: percentage((6 / @grid-columns)); }
+  .col-md-push-7  { left: percentage((7 / @grid-columns)); }
+  .col-md-push-8  { left: percentage((8 / @grid-columns)); }
+  .col-md-push-9  { left: percentage((9 / @grid-columns)); }
+  .col-md-push-10 { left: percentage((10/ @grid-columns)); }
+  .col-md-push-11 { left: percentage((11/ @grid-columns)); }
+
+  .col-md-pull-0  { right: auto; }
+  .col-md-pull-1  { right: percentage((1 / @grid-columns)); }
+  .col-md-pull-2  { right: percentage((2 / @grid-columns)); }
+  .col-md-pull-3  { right: percentage((3 / @grid-columns)); }
+  .col-md-pull-4  { right: percentage((4 / @grid-columns)); }
+  .col-md-pull-5  { right: percentage((5 / @grid-columns)); }
+  .col-md-pull-6  { right: percentage((6 / @grid-columns)); }
+  .col-md-pull-7  { right: percentage((7 / @grid-columns)); }
+  .col-md-pull-8  { right: percentage((8 / @grid-columns)); }
+  .col-md-pull-9  { right: percentage((9 / @grid-columns)); }
+  .col-md-pull-10 { right: percentage((10/ @grid-columns)); }
+  .col-md-pull-11 { right: percentage((11/ @grid-columns)); }
+
+  // Offsets
+  .col-md-offset-0  { margin-left: 0; }
+  .col-md-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+  .col-md-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+  .col-md-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+  .col-md-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+  .col-md-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+  .col-md-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+  .col-md-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+  .col-md-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+  .col-md-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+  .col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+  .col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+//
+// Note that `.col-lg-12` doesn't get floated on purpose?there's no need since
+// it's full-width.
+
+@media (min-width: @screen-lg-desktop) {
+  .container { max-width: @container-lg-desktop; }
+
+  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11 { float: left; }
+  .col-lg-1  { width: percentage((1 / @grid-columns)); }
+  .col-lg-2  { width: percentage((2 / @grid-columns)); }
+  .col-lg-3  { width: percentage((3 / @grid-columns)); }
+  .col-lg-4  { width: percentage((4 / @grid-columns)); }
+  .col-lg-5  { width: percentage((5 / @grid-columns)); }
+  .col-lg-6  { width: percentage((6 / @grid-columns)); }
+  .col-lg-7  { width: percentage((7 / @grid-columns)); }
+  .col-lg-8  { width: percentage((8 / @grid-columns)); }
+  .col-lg-9  { width: percentage((9 / @grid-columns)); }
+  .col-lg-10 { width: percentage((10/ @grid-columns)); }
+  .col-lg-11 { width: percentage((11/ @grid-columns)); }
+  .col-lg-12 { width: 100%; }
+
+  // Push and pull columns for source order changes
+  .col-lg-push-0  { left: auto; }
+  .col-lg-push-1  { left: percentage((1 / @grid-columns)); }
+  .col-lg-push-2  { left: percentage((2 / @grid-columns)); }
+  .col-lg-push-3  { left: percentage((3 / @grid-columns)); }
+  .col-lg-push-4  { left: percentage((4 / @grid-columns)); }
+  .col-lg-push-5  { left: percentage((5 / @grid-columns)); }
+  .col-lg-push-6  { left: percentage((6 / @grid-columns)); }
+  .col-lg-push-7  { left: percentage((7 / @grid-columns)); }
+  .col-lg-push-8  { left: percentage((8 / @grid-columns)); }
+  .col-lg-push-9  { left: percentage((9 / @grid-columns)); }
+  .col-lg-push-10 { left: percentage((10/ @grid-columns)); }
+  .col-lg-push-11 { left: percentage((11/ @grid-columns)); }
+
+  .col-lg-pull-0  { right: auto; }
+  .col-lg-pull-1  { right: percentage((1 / @grid-columns)); }
+  .col-lg-pull-2  { right: percentage((2 / @grid-columns)); }
+  .col-lg-pull-3  { right: percentage((3 / @grid-columns)); }
+  .col-lg-pull-4  { right: percentage((4 / @grid-columns)); }
+  .col-lg-pull-5  { right: percentage((5 / @grid-columns)); }
+  .col-lg-pull-6  { right: percentage((6 / @grid-columns)); }
+  .col-lg-pull-7  { right: percentage((7 / @grid-columns)); }
+  .col-lg-pull-8  { right: percentage((8 / @grid-columns)); }
+  .col-lg-pull-9  { right: percentage((9 / @grid-columns)); }
+  .col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
+  .col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
+
+  // Offsets
+  .col-lg-offset-0  { margin-left: 0; }
+  .col-lg-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+  .col-lg-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+  .col-lg-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+  .col-lg-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+  .col-lg-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+  .col-lg-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+  .col-lg-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+  .col-lg-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+  .col-lg-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+  .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+  .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
+}
--- a/src/less/basic/mixins.less
+++ b/src/less/basic/mixins.less
+.clearfix() 
+{
+  &:before, &:after { content: " "; display: table; }
+  &:after { clear: both; }
+}
+
+// Box sizing
+.box-sizing(@boxmodel) 
+{
+  -webkit-box-sizing: @boxmodel;
+  -moz-box-sizing: @boxmodel;
+  box-sizing: @boxmodel;
+}
+
+/* Grid System */
+
+// Centered container element
+.container-fixed() 
+{
+  margin-right: auto;
+  margin-left: auto;
+  padding-left:  (@grid-gutter-width / 2);
+  padding-right: (@grid-gutter-width / 2);
+  .clearfix();
+}
+
+// Creates a wrapper for a series of columns
+.make-row(@gutter: @grid-gutter-width) 
+{
+  margin-left:  (@gutter / -2);
+  margin-right: (@gutter / -2);
+  .clearfix();
+}
--- a/src/less/basic/scaffolding.less
+++ b/src/less/basic/scaffolding.less
+*, *:before, *:after { .box-sizing(border-box); }
--- a/src/less/basic/zui.less
+++ b/src/less/basic/zui.less
+// config and mixins
+@import "config.less";
+@import "mixins.less";
+
+@import "normalize.less";
+
+// basic
+@import "scaffolding.less";
+@import "grid.less";
--- a/src/less/grid.less
+++ b/src/less/grid.less
-/* Common functions. */
-.box-sizing()
-{
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.tmp-style()
-{
-  border:1px solid black;
-  margin: 1em 0em;
-  padding: 1em;
-}
-
-/* GS: grid system. */
-.zui.grid { display: block; text-align: left; font-size: 0em; margin: 0%; padding: 0%; .box-sizing(); }
-.zui.grid > div { display: inline-block; text-align: left; font-size: 1rem; vertical-align: top; .box-sizing(); .tmp-style(); }
-
-.zui.grid .unit1 { width: 6.25%;  }
-.zui.grid .unit2 { width: 12.5%;  }
-.zui.grid .unit3 { width: 18.75%; }
-.zui.grid .unit4 { width: 25%;    }
-.zui.grid .unit5 { width: 31.25%; }
-.zui.grid .unit6 { width: 37.5%;  }
-.zui.grid .unit7 { width: 43.75%; }
-.zui.grid .unit8 { width: 50%;    }
-.zui.grid .unit9 { width: 56.25%; }
-.zui.grid .unit10{ width: 62.5%;  }
-.zui.grid .unit11{ width: 68.75%; }
-.zui.grid .unit12{ width: 75%;    }
-.zui.grid .unit13{ width: 81.25%; }
-.zui.grid .unit14{ width: 87.5%;  }
-.zui.grid .unit15{ width: 93.75%; }
-.zui.grid .unit16{ width: 100%;   }
-
-.zui.grid.unit1  > div { width: 100%;     }
-.zui.grid.unit2  > div { width: 50%;      }
-.zui.grid.unit3  > div { width: 33.3333%; }
-.zui.grid.unit4  > div { width: 25%;      }
-.zui.grid.unit5  > div { width: 20%;      }
-.zui.grid.unit6  > div { width: 16.6666%; }
-.zui.grid.unit7  > div { width: 14.2857%;  }
-.zui.grid.unit8  > div { width: 12.5%;    }
-.zui.grid.unit9  > div { width: 11.1111%; }
-.zui.grid.unit10 > div { width: 10%;      }
-.zui.grid.unit11 > div { width: 9.0909%;  }
-.zui.grid.unit12 > div { width: 8.3333%;  }
-.zui.grid.unit13 > div { width: 7.6923%;  }
-.zui.grid.unit14 > div { width: 7.1428%;  }
-.zui.grid.unit15 > div { width: 6.6666%;  }
-.zui.grid.unit16 > div { width: 6.25%;    }
-
-.zui.grid div.f-left  { float: left; }
-.zui.grid div.f-right { float: right; }
-
-/* RWD: responsive web design. */
-@media screen and (max-width: 400px)
-{}
-@media screen and (min-width: 400px) and (max-width:768px) 
-{}
-@media screen and (min-width: 768px) and (max-width:992px)  
-{}
-@media screen and (min-width: 992px) and (max-width:1200px)
-{}
-@media screen and (min-width: 1200px) 
-{}
-
--- a/src/less/menu.less
+++ b/src/less/menu.less
--- a/src/less/rwd.less
+++ b/src/less/rwd.less
-/* RWD: responsive web design. */
-@media screen and (max-width: 400px)
-{}
-@media screen and (min-width: 400px) and (max-width:768px) 
-{}
-@media screen and (min-width: 768px) and (max-width:992px)  
-{}
-@media screen and (min-width: 992px) and (max-width:1200px)
-{}
-@media screen and (min-width: 1200px) 
-{}
--- a/standards.md
+++ b/standards.md
@@ -78,18 +78,18 @@ ZUI中的大多数界面元素都有不同的子类型、状态及参数。关

    zui/
    ├── src/                        // 源码
-    │   ├── fonts/                  // 字体文件
-    │   ├── js/                     // js框架
-    │   └── less/                   // 样式
-    │       └──basic/               // 基础
-    │          ├──normalize.less    // css normalize
-    │          └──grid.less         // 栅格系统
+    │   ├── fonts/                 // 字体文件
+    │   ├── js/                    // js框架
+    │   └── less/                  // 样式
+    │       └──basic/              // 基础
+    │          ├──normalize.less   // css normalize
+    │          └──grid.less        // 栅格系统
    ├── dist/                       // 可用版本
    │   ├── css/
    │   ├── js/
    │   └── fonts/
    ├── examples/                   // 一些例子
-    ├── asserts/
+    ├── asserts/                    // 其他引用的资源
    │  	└── js/
    ├── _layouts/                   // 文档模版
    └── _includes/                  // 文档内容
@@ -110,4 +110,4 @@ ZUI中的大多数界面元素都有不同的子类型、状态及参数。关

 ### 3.2 栅格系统 ###

-todo(azhi)：撰写栅格系统文档
\ No newline at end of file
+todo(azhi)：撰写栅格系统文档