update readme.md

anthinkingcoder · anthinkingcoder · commit 06936bef4abd · 2018-07-19T17:00:54.000+08:00
diff --git a/.postcssrc.js b/.postcssrc.js
@@ -5,6 +5,9 @@ module.exports = {
     "postcss-import": {},
     "postcss-url": {},
     // to edit target browsers: use "browserslist" field in package.json
-    "autoprefixer": {}
+    "autoprefixer": {},
+    "postcss-write-svg": {},
+    "postcss-px-to-viewport": {
+    }
   }
 }
diff --git a/README.md b/README.md
@@ -1,15 +1,12 @@
 # simple-grid
-> a simple grid layout
+> a simple grid layout(Vue Component)
 
-> to install it 
-
-> npm i simple-xgrid --save
-
-> to use it
-
-> import Grid from 'simple-xgrid'
+```bash
+npm i simple-xgrid --save
+import Grid from 'simple-xgrid'
+Vue.use(Grid);
+```
 
-> Vue.use(Grid);
 ## 1.examples
 ```html
     <Row>
@@ -109,5 +106,5 @@
       </Col>
     </Row>
 ```
-## 2.效果
+## 2.result
 ![](http://ofn22jfef.bkt.clouddn.com/grid.png)
diff --git a/gulpfile.js b/gulpfile.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,7 +42,9 @@
     "portfinder": "^1.0.13",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.8",
+    "postcss-px-to-viewport": "0.0.3",
     "postcss-url": "^7.2.1",
+    "postcss-write-svg": "github:jonathantneal/postcss-write-svg",
     "rimraf": "^2.6.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
diff --git a/src/App.vue b/src/App.vue
@@ -98,6 +98,19 @@
       order:3
       </Col>
     </Row>
+    <div class="example">
+
+    </div>
+    <div w-188-246>
+
+    </div>
+    <div w-187-246>
+
+    </div>
+
+    <div class="content">
+
+    </div>
   </div>
 </template>
 <script>
diff --git a/src/components/row.vue b/src/components/row.vue
@@ -76,7 +76,14 @@
     }
   }
 </script>
-
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style  lang="sass">
+<style>
+  /*@svg 1px-border {*/
+    /*height: 2px;*/
+    /*@rect {*/
+      /*fill: var(--color, black);*/
+      /*width: 100%;*/
+      /*height: 50%;*/
+    /*}*/
+  /*}*/
 </style>
diff --git a/src/styles/grid.scss b/src/styles/grid.scss
@@ -2,8 +2,8 @@ $prefix: '.simple';
 $rowPrefix: '#{$prefix}-row';
 $colPrefix: '#{$prefix}-col';
 $flexRowPrefix: '#{$rowPrefix}-flex';
-$flexJustifies: ('start','end','center','space-around','space-between');
-$flexAligns: ('top':'flex-start','middle':'center','bottom':'flex-end');
+$flexJustifies: ('start', 'end', 'center', 'space-around', 'space-between');
+$flexAligns: ('top':'flex-start', 'middle':'center', 'bottom':'flex-end');
 $gridCol: 24;
 @mixin generate-row {
   #{$rowPrefix} {
@@ -23,20 +23,21 @@ $gridCol: 24;
     display: block;
     position: relative;
   }
-  #{$flexRowPrefix},#{$flexRowPrefix},#{$colPrefix} {
+  #{$flexRowPrefix}, #{$flexRowPrefix}, #{$colPrefix} {
     box-sizing: border-box;
   }
   @each $justify in $flexJustifies {
     #{$flexRowPrefix}-#{$justify} {
       justify-content: #{$justify};
     }
   }
-  @each $key,$value in $flexAligns {
+  @each $key, $value in $flexAligns {
     #{$flexRowPrefix}-#{$key} {
       align-items: #{$value};
     }
   }
 }
+
 @mixin generate-float-col($viewport:'') {
   $cols: '#{$colPrefix}-span#{$viewport}-1';
   @for $i from 2 through $gridCol {
@@ -47,6 +48,7 @@ $gridCol: 24;
     flex: 0 0 auto;
   }
 }
+
 @mixin generate-col($viewport: '') {
   @for $i from 1 through $gridCol {
     #{$colPrefix}-span#{$viewport}-#{$i} {
@@ -66,21 +68,26 @@ $gridCol: 24;
     }
   }
 }
+
 @mixin generate-grid($viewport) {
   @include generate-float-col($viewport);
   @include generate-col($viewport);
 }
+
 @include generate-row();
 @include generate-grid('');
 @media (max-width: 768px) {
   @include generate-grid('-xs');
 }
+
 @media (min-width: 768px) {
   @include generate-grid('-sm');
 }
+
 @media (min-width: 992px) {
   @include generate-grid('-md');
 }
+
 @media (min-width: 1200px) {
   @include generate-grid('-lg');
 }
@@ -93,3 +100,6 @@ $gridCol: 24;
 
 
 
+
+
+

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,9 @@ module.exports = {`
`5`	`5`	`"postcss-import": {},`
`6`	`6`	`"postcss-url": {},`
`7`	`7`	`// to edit target browsers: use "browserslist" field in package.json`
`8`		`- "autoprefixer": {}`
	`8`	`+ "autoprefixer": {},`
	`9`	`+ "postcss-write-svg": {},`
	`10`	`+ "postcss-px-to-viewport": {`
	`11`	`+ }`
`9`	`12`	`}`
`10`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,8 +2,8 @@ $prefix: '.simple';`
`2`	`2`	`$rowPrefix: '#{$prefix}-row';`
`3`	`3`	`$colPrefix: '#{$prefix}-col';`
`4`	`4`	`$flexRowPrefix: '#{$rowPrefix}-flex';`
`5`		`-$flexJustifies: ('start','end','center','space-around','space-between');`
`6`		`-$flexAligns: ('top':'flex-start','middle':'center','bottom':'flex-end');`
	`5`	`+$flexJustifies: ('start', 'end', 'center', 'space-around', 'space-between');`
	`6`	`+$flexAligns: ('top':'flex-start', 'middle':'center', 'bottom':'flex-end');`
`7`	`7`	`$gridCol: 24;`
`8`	`8`	`@mixin generate-row {`
`9`	`9`	`#{$rowPrefix} {`
`@@ -23,20 +23,21 @@ $gridCol: 24;`
`23`	`23`	`display: block;`
`24`	`24`	`position: relative;`
`25`	`25`	`}`
`26`		`- #{$flexRowPrefix},#{$flexRowPrefix},#{$colPrefix} {`
	`26`	`+ #{$flexRowPrefix}, #{$flexRowPrefix}, #{$colPrefix} {`
`27`	`27`	`box-sizing: border-box;`
`28`	`28`	`}`
`29`	`29`	`@each $justify in $flexJustifies {`
`30`	`30`	`#{$flexRowPrefix}-#{$justify} {`
`31`	`31`	`justify-content: #{$justify};`
`32`	`32`	`}`
`33`	`33`	`}`
`34`		`- @each $key,$value in $flexAligns {`
	`34`	`+ @each $key, $value in $flexAligns {`
`35`	`35`	`#{$flexRowPrefix}-#{$key} {`
`36`	`36`	`align-items: #{$value};`
`37`	`37`	`}`
`38`	`38`	`}`
`39`	`39`	`}`
	`40`	`+`
`40`	`41`	`@mixin generate-float-col($viewport:'') {`
`41`	`42`	`$cols: '#{$colPrefix}-span#{$viewport}-1';`
`42`	`43`	`@for $i from 2 through $gridCol {`
`@@ -47,6 +48,7 @@ $gridCol: 24;`
`47`	`48`	`flex: 0 0 auto;`
`48`	`49`	`}`
`49`	`50`	`}`
	`51`	`+`
`50`	`52`	`@mixin generate-col($viewport: '') {`
`51`	`53`	`@for $i from 1 through $gridCol {`
`52`	`54`	`#{$colPrefix}-span#{$viewport}-#{$i} {`
`@@ -66,21 +68,26 @@ $gridCol: 24;`
`66`	`68`	`}`
`67`	`69`	`}`
`68`	`70`	`}`
	`71`	`+`
`69`	`72`	`@mixin generate-grid($viewport) {`
`70`	`73`	`@include generate-float-col($viewport);`
`71`	`74`	`@include generate-col($viewport);`
`72`	`75`	`}`
	`76`	`+`
`73`	`77`	`@include generate-row();`
`74`	`78`	`@include generate-grid('');`
`75`	`79`	`@media (max-width: 768px) {`
`76`	`80`	`@include generate-grid('-xs');`
`77`	`81`	`}`
	`82`	`+`
`78`	`83`	`@media (min-width: 768px) {`
`79`	`84`	`@include generate-grid('-sm');`
`80`	`85`	`}`
	`86`	`+`
`81`	`87`	`@media (min-width: 992px) {`
`82`	`88`	`@include generate-grid('-md');`
`83`	`89`	`}`
	`90`	`+`
`84`	`91`	`@media (min-width: 1200px) {`
`85`	`92`	`@include generate-grid('-lg');`
`86`	`93`	`}`
`@@ -93,3 +100,6 @@ $gridCol: 24;`
`93`	`100`
`94`	`101`
`95`	`102`
	`103`	`+`
	`104`	`+`
	`105`	`+`