Merge branch 'release-0.1.4'

Author: thingsym

readme.md renamed to README.md

@@ -4,7 +4,7 @@ Sass Mixins to generate Flexbox grid.
 
 **Flexbox Grid Mixins** is Sass Mixins library to help you write well-structured, readable, maintainable, component-based grid using Flexbox (CSS Flexible Box Layout Module).
 
-Flexbox Grid Mixins documentation: [http://thingsym.github.io/flexbox-grid-mixins/](http://thingsym.github.io/flexbox-grid-mixins/)
+Flexbox Grid Mixins documentation: [https://thingsym.github.io/flexbox-grid-mixins/](https://thingsym.github.io/flexbox-grid-mixins/)
 
 ## Example
 
@@ -45,23 +45,20 @@ $default-grid-gutter: 2%;
 ```
 .grid {
   box-sizing: border-box;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   margin: 0 -1%;
 }
 
 .grid > .grid__col-3 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 23%;
   -ms-flex: 0 0 23%;
   flex: 0 0 23%;
   margin: 0 1% 2%;
 }
 
 .grid > .grid__col-9 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 73%;
   -ms-flex: 0 0 73%;
   flex: 0 0 73%;
   margin: 0 1% 2%;
@@ -76,7 +73,13 @@ $default-grid-gutter: 2%;
 $ npm install flexbox-grid-mixins --save-dev
 ```
 
-### bower
+### Yarn
+
+```
+$ yarn add flexbox-grid-mixins --dev
+```
+
+### Bower (deprecated)
 
 ```
 $ bower install flexbox-grid-mixins --save
@@ -123,6 +126,10 @@ Example : import form node_modules
 
 See Flexbox Grid Mixins documentation: [http://thingsym.github.io/flexbox-grid-mixins/](http://thingsym.github.io/flexbox-grid-mixins/)
 
+## Package manager
+
+[flexbox-grid-mixins - npm](https://www.npmjs.com/package/flexbox-grid-mixins)
+
 ### Mixins Reference and Example
 
 * [Mixins Reference](http://thingsym.github.io/flexbox-grid-mixins/#Mixins-Reference)
@@ -134,25 +141,8 @@ See Flexbox Grid Mixins documentation: [http://thingsym.github.io/flexbox-grid-m
 * [Unit-Set Grid (Experimental stage)](http://thingsym.github.io/flexbox-grid-mixins/example/unit-set.html)
 * [Grid Type](http://thingsym.github.io/flexbox-grid-mixins/example/grid-type.html)
 
-## Contribute
-
-### Patches and Bug Fixes
-
-Small patches and bug reports can be submitted a issue tracker in GitHub. Forking on GitHub is another good way. You can send a pull request.
-
-GitHub: [https://github.com/thingsym/flexbox-grid-mixins](https://github.com/thingsym/flexbox-grid-mixins)
-
-### Guidlines
-
-If you would like to contribute, here are some notes and guidlines.
-
-* All development happens on the **develop** branch, so it is always the most up-to-date
-* The **master** branch only contains tagged releases
-* If you are going to be submitting a pull request, please submit your pull request to the **develop** branch
-* See about [forking](https://help.github.com/articles/fork-a-repo/) and [pull requests](https://help.github.com/articles/using-pull-requests/)
-
-
 ### Development
+
 1. run ```$ sudo yum install nodejs npm```
 2. run ```$ sudo npm install --global gulp-cli```
 3. Forking on GitHub
@@ -162,8 +152,28 @@ If you would like to contribute, here are some notes and guidlines.
 7. run ```$ gulp serve```
 8. Access URL http://localhost:3000
 
+## Contribution
+
+### Patches and Bug Fixes
+
+Small patches and bug reports can be submitted a issue tracker in Github. Forking on Github is another good way. You can send a pull request.
+
+1. Fork [Flexbox Grid Mixins](https://github.com/thingsym/flexbox-grid-mixins) from GitHub repository
+2. Create a feature branch: git checkout -b my-new-feature
+3. Commit your changes: git commit -am 'Add some feature'
+4. Push to the branch: git push origin my-new-feature
+5. Create new Pull Request
+
 ## Changelog
 
+* Version 0.1.4
+  * update example
+  * update document
+  * fix conditional expression
+  * add optional arguments $width, $max-width, $min-width, $height, $max-height and $min-height to @mixin grid-col
+  * enable flex-grow with number column
+  * add positive preset column
+  * change readme.md file name to upper case
 * Version 0.1.3
   * rename folder to docs from doc, change gh-pages
   * update document
@@ -182,24 +192,10 @@ If you would like to contribute, here are some notes and guidlines.
 
 ## License
 
-The MIT License (MIT)
-
-Copyright (c) 2016 Thingsym
+Licensed under the MIT License.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+## Author
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+[thingsym](https://github.com/thingsym)
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+Copyright (c) 2016 thingsym

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "flexbox-grid-mixins",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "homepage": "https://github.com/thingsym/flexbox-grid-mixins",
   "author": "Thingsym",
   "description": "Sass Mixins to generate Flexbox grid",

docs/css/default.css

@@ -0,0 +1,237 @@
+body {
+  font-family: "Hiragino Kaku Gothic ProN", Arial, sans-serif;
+  margin: 0;
+}
+
+.header {
+  background-color: #0466e0;
+  color: #fff;
+  text-align: center;
+  padding: 1em;
+  min-height: 320px;
+  box-sizing: border-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-flow: column nowrap;
+  flex-flow: column nowrap;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.header--hero {
+  height: 100vh;
+}
+
+.header .header-title {
+  font-size: 320%;
+  margin-bottom: 0;
+}
+
+.header .version {
+  font-size: 25%;
+  font-weight: normal;
+}
+
+.header .header-description {
+  margin-top: 0;
+}
+
+.header .header-nav {
+  margin: 0;
+  padding: 0;
+  margin-top: 3em;
+}
+
+.header .header-nav li {
+  font-size: 90%;
+  display: inline;
+  list-style: none;
+  margin-right: 1.2rem;
+}
+
+.header a {
+  color: #fff;
+}
+
+.header .btn {
+  padding: .8em;
+  border: solid rgba(255, 255, 255, 0.4) 1px;
+  border-radius: .4em;
+}
+
+.container {
+  margin: 0 2rem;
+}
+
+h2 {
+  border-bottom: solid 1px #ccc;
+}
+
+pre {
+  overflow: auto;
+  line-height: 1.45;
+  background-color: #f7f7f7;
+  padding: 1em;
+  border-radius: .4em;
+}
+
+pre.scrollable {
+  max-height: 240px;
+  overflow-y: scroll;
+}
+
+pre > code {
+  background: transparent;
+}
+
+code {
+  padding: .2em;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-radius: .2em;
+}
+
+.reference {
+  background-color: #0466e0;
+  color: #fff;
+  padding: 1em;
+  border-radius: .4em;
+}
+
+.reference .small {
+  font-size: 80%;
+  font-weight: normal;
+}
+
+.reference .big {
+  font-size: 160%;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  border: 2px solid #ccc;
+  margin: 0 0 1.625em;
+  width: 100%;
+}
+
+th {
+  border-top: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  padding: .2em;
+  font-weight: bold;
+  background-color: #eee;
+}
+
+td {
+  border-top: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  padding: .2em;
+}
+
+td.example {
+  text-align: center;
+}
+
+.grid,
+[class*="grid--"] {
+  background: #a5c3e2;
+}
+
+[class*="grid__col"] {
+  background: #0e72da;
+  border: 1px solid #130e7d;
+  padding: .4em;
+  color: #fff;
+  text-align: center;
+}
+
+.grid {
+  box-sizing: border-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0 -1%;
+}
+
+.grid > .grid__col-1 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 6.33333%;
+  flex: 0 0 6.33333%;
+  margin: 0 1% 2%;
+}
+
+.grid > .grid__col-2 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 14.66667%;
+  flex: 0 0 14.66667%;
+  margin: 0 1% 2%;
+}
+
+.grid > .grid__col-3 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 23%;
+  flex: 0 0 23%;
+  margin: 0 1% 2%;
+}
+
+.grid > .grid__col-4 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 31.33333%;
+  flex: 0 0 31.33333%;
+  margin: 0 1% 2%;
+}
+
+.grid > .grid__col-5 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 39.66667%;
+  flex: 0 0 39.66667%;
+  margin: 0 1% 2%;
+}
+
+.grid > .grid__col-6 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 48%;
+  flex: 0 0 48%;
+  margin: 0 1% 2%;
+}
+
+.grid > .grid__col-7 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 56.33333%;
+  flex: 0 0 56.33333%;
+  margin: 0 1% 2%;
+}
+
+.grid > .grid__col-8 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 64.66667%;
+  flex: 0 0 64.66667%;
+  margin: 0 1% 2%;
+}
+
+.grid > .grid__col-9 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 73%;
+  flex: 0 0 73%;
+  margin: 0 1% 2%;
+}
+
+.grid > .grid__col-10 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 81.33333%;
+  flex: 0 0 81.33333%;
+  margin: 0 1% 2%;
+}
+
+.grid > .grid__col-11 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 89.66667%;
+  flex: 0 0 89.66667%;
+  margin: 0 1% 2%;
+}
+
+.grid > .grid__col-12 {
+  box-sizing: border-box;
+  -ms-flex: 0 0 98%;
+  flex: 0 0 98%;
+  margin: 0 1% 2%;
+}