flexpress yo' self

.editorconfig

@@ -0,0 +1,7 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -0,0 +1 @@
+node_modules

LICENSE.md

@@ -0,0 +1,5 @@
+# ISC License
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

README.md

@@ -1 +1,158 @@
-# flexboxes
+# flexboxes
+<b>flexboxes</b> is a modern flexbox utility library and pure flexbox grid system. It offers a hybrid between other frameworks and is designed for prototyping and production.
+
+## setup
+
+```
+npm install flexboxes
+```
+
+```css
+@import 'node_modules/flexboxes/main';
+```
+
+## classes
+
+### `display`
+- `.flex`
+- `.flex-item`
+- `.inline-flex`
+
+### `flex-direction`
+- `.flex-row`
+- `.flex-row-reverse`
+- `.flex-column`
+- `.flex-column-reverse`
+
+### `flex-wrap`
+- `.flex-wrap`
+- `.flex-nowrap`
+- `.flex-wrap-reverse`
+
+### `margin`
+- `.margin-start`
+- `.margin-end`
+
+### `.order`
+- `.order-before`
+- `.order-after`
+
+### `align-items`
+- `.items-start`
+- `.items-end`
+- `.items-center`
+- `.items-baseline`
+- `.items-stretch`
+
+### `align-self`
+- `.self-center`
+- `.self-baseline`
+- `.self-stretch`
+- `.self-start`
+- `.self-end`
+
+### `justify-content`
+- `.justify-start`
+- `.justify-end`
+- `.justify-center`
+- `.justify-between`
+- `.justify-around`
+
+### `align-content`
+- `.content-start`
+- `.content-end`
+- `.content-center`
+- `.content-between`
+- `.content-around`
+- `.content-stretch`
+
+### size control
+- `.flex-min` re: [nesting](https://goo.gl/3IZRMt)
+- `.flex-max`
+
+### `flex` presets
+- `.flex-golden`
+- `.flex-initial`
+- `.flex-auto`
+- `.flex-none`
+
+### `flex` shorthand
+- `.flex-0` 0/12 grid
+- `.flex-1` 1/12 grid
+- `.flex-2` 2/12 grid
+- `.flex-3` 3/12 grid
+- `.flex-4` 4/12 grid
+- `.flex-5` 5/12 grid
+- `.flex-6` 6/12 grid
+- `.flex-7` 7/12 grid
+- `.flex-8` 8/12 grid
+- `.flex-9` 9/12 grid
+- `.flex-10` 10/12 grid
+- `.flex-11` 11/12 grid
+- `.flex-12` 12/12 grid
+
+### `flex-grow`
+- `.grow-0`
+- `.grow-1`
+- `.grow-2`
+- `.grow-3`
+- `.grow-4`
+- `.grow-5`
+- `.grow-6`
+- `.grow-8`
+- `.grow-7`
+- `.grow-9`
+- `.grow-10`
+- `.grow-11`
+- `.grow-12`
+
+### `flex-shrink`
+- `.shrink-0`
+- `.shrink-1`
+- `.shrink-2`
+- `.shrink-3`
+- `.shrink-4`
+- `.shrink-5`
+- `.shrink-6`
+- `.shrink-7`
+- `.shrink-8`
+- `.shrink-9`
+- `.shrink-10`
+- `.shrink-11`
+- `.shrink-12`
+
+### `flex-basis`
+- `.basis-0` 0/12 grid
+- `.basis-1` 1/12 grid
+- `.basis-2` 2/12 grid
+- `.basis-3` 3/12 grid
+- `.basis-4` 4/12 grid
+- `.basis-5` 5/12 grid
+- `.basis-6` 6/12 grid
+- `.basis-7` 7/12 grid
+- `.basis-8` 8/12 grid
+- `.basis-9` 9/12 grid
+- `.basis-10` 10/12 grid
+- `.basis-11` 11/12 grid
+- `.basis-12` 12/12 grid
+- `.basis-100vw`
+- `.basis-100vh`
+- `.basis-golden`
+- `.basis-content`
+- `.basis-auto`
+
+## development
+
+```
+npm install
+npm run build
+```
+
+## inspirations
+
+- [basscss-flexbox](https://www.npmjs.com/package/basscss-flexbox)
+- [flexboxgrid](https://www.npmjs.com/package/flexboxgrid)
+
+* * *
+
+flexpress yo' self

main.css

@@ -0,0 +1,112 @@
+.flex { display: -webkit-box; display: -ms-flexbox; display: flex }
+.flex-item { display: flex-item }
+.inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex }
+
+.flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row }
+.flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse }
+.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column }
+.flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse }
+
+.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap }
+.flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap }
+.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse }
+
+.margin-start { margin-top: auto; margin-left: auto }
+.margin-end { margin-right: auto; margin-bottom: auto }
+
+.order-before { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1 }
+.order-after { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1 }
+
+.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start }
+.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end }
+.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center }
+.items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline }
+.items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch }
+
+.self-center { -ms-flex-item-align: center; align-self: center }
+.self-baseline { -ms-flex-item-align: baseline; align-self: baseline }
+.self-stretch { -ms-flex-item-align: stretch; align-self: stretch }
+.self-start { -ms-flex-item-align: start; align-self: flex-start }
+.self-end { -ms-flex-item-align: end; align-self: flex-end }
+
+.justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start }
+.justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end }
+.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center }
+.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
+.justify-around { -ms-flex-pack: distribute; justify-content: space-around }
+
+.content-start { -ms-flex-line-pack: start; align-content: flex-start }
+.content-end { -ms-flex-line-pack: end; align-content: flex-end }
+.content-center { -ms-flex-line-pack: center; align-content: center }
+.content-between { -ms-flex-line-pack: justify; align-content: space-between }
+.content-around { -ms-flex-line-pack: distribute; align-content: space-around }
+.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch }
+
+.flex-min { min-height: 0; min-width: 0 /* goo.gl/3IZRMt */ }
+.flex-max { max-height: 100%; max-width: 100% }
+
+.flex-golden { -webkit-box-flex: 0; -ms-flex: 0 1 61.803398875%; flex: 0 1 61.803398875% }
+.flex-initial { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto }
+.flex-auto { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto }
+.flex-none { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto }
+
+.flex-1 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 }
+.flex-2 { -webkit-box-flex: 2; -ms-flex: 2; flex: 2 }
+.flex-3 { -webkit-box-flex: 3; -ms-flex: 3; flex: 3 }
+.flex-4 { -webkit-box-flex: 4; -ms-flex: 4; flex: 4 }
+.flex-5 { -webkit-box-flex: 5; -ms-flex: 5; flex: 5 }
+.flex-6 { -webkit-box-flex: 6; -ms-flex: 6; flex: 6 }
+.flex-7 { -webkit-box-flex: 7; -ms-flex: 7; flex: 7 }
+.flex-8 { -webkit-box-flex: 8; -ms-flex: 8; flex: 8 }
+.flex-9 { -webkit-box-flex: 9; -ms-flex: 9; flex: 9 }
+.flex-10 { -webkit-box-flex: 10; -ms-flex: 10; flex: 10 }
+.flex-11 { -webkit-box-flex: 11; -ms-flex: 11; flex: 11 }
+.flex-12 { -webkit-box-flex: 12; -ms-flex: 12; flex: 12 }
+
+.grow-0 { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0 }
+.grow-1 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1 }
+.grow-2 { -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2 }
+.grow-3 { -webkit-box-flex: 3; -ms-flex-positive: 3; flex-grow: 3 }
+.grow-4 { -webkit-box-flex: 4; -ms-flex-positive: 4; flex-grow: 4 }
+.grow-5 { -webkit-box-flex: 5; -ms-flex-positive: 5; flex-grow: 5 }
+.grow-6 { -webkit-box-flex: 6; -ms-flex-positive: 6; flex-grow: 6 }
+.grow-7 { -webkit-box-flex: 7; -ms-flex-positive: 7; flex-grow: 7 }
+.grow-8 { -webkit-box-flex: 8; -ms-flex-positive: 8; flex-grow: 8 }
+.grow-9 { -webkit-box-flex: 9; -ms-flex-positive: 9; flex-grow: 9 }
+.grow-10 { -webkit-box-flex: 10; -ms-flex-positive: 10; flex-grow: 10 }
+.grow-11 { -webkit-box-flex: 11; -ms-flex-positive: 11; flex-grow: 11 }
+.grow-12 { -webkit-box-flex: 12; -ms-flex-positive: 12; flex-grow: 12 }
+
+.shrink-0 { -ms-flex-negative: 0; flex-shrink: 0 }
+.shrink-1 { -ms-flex-negative: 1; flex-shrink: 1 }
+.shrink-2 { -ms-flex-negative: 2; flex-shrink: 2 }
+.shrink-3 { -ms-flex-negative: 3; flex-shrink: 3 }
+.shrink-4 { -ms-flex-negative: 4; flex-shrink: 4 }
+.shrink-5 { -ms-flex-negative: 5; flex-shrink: 5 }
+.shrink-6 { -ms-flex-negative: 6; flex-shrink: 6 }
+.shrink-7 { -ms-flex-negative: 7; flex-shrink: 7 }
+.shrink-8 { -ms-flex-negative: 8; flex-shrink: 8 }
+.shrink-9 { -ms-flex-negative: 9; flex-shrink: 9 }
+.shrink-10 { -ms-flex-negative: 10; flex-shrink: 10 }
+.shrink-11 { -ms-flex-negative: 11; flex-shrink: 11 }
+.shrink-12 { -ms-flex-negative: 12; flex-shrink: 12 }
+
+.basis-0 { -ms-flex-preferred-size: 0%; flex-basis: 0% }
+.basis-1 { -ms-flex-preferred-size: 8.333333333%; flex-basis: 8.333333333% }
+.basis-2 { -ms-flex-preferred-size: 16.6666666666%; flex-basis: 16.6666666666% }
+.basis-3 { -ms-flex-preferred-size: 25%; flex-basis: 25% }
+.basis-4 { -ms-flex-preferred-size: 33.3333333333%; flex-basis: 33.3333333333% }
+.basis-5 { -ms-flex-preferred-size: 41.6666666666%; flex-basis: 41.6666666666% }
+.basis-6 { -ms-flex-preferred-size: 50%; flex-basis: 50% }
+.basis-7 { -ms-flex-preferred-size: 58.333333333%; flex-basis: 58.333333333% }
+.basis-8 { -ms-flex-preferred-size: 66.6666666666%; flex-basis: 66.6666666666% }
+.basis-9 { -ms-flex-preferred-size: 75%; flex-basis: 75% }
+.basis-10 { -ms-flex-preferred-size: 83.3333333333%; flex-basis: 83.3333333333% }
+.basis-11 { -ms-flex-preferred-size: 91.6666666666%; flex-basis: 91.6666666666% }
+.basis-12 { -ms-flex-preferred-size: 100%; flex-basis: 100% }
+
+.basis-100vw { -ms-flex-preferred-size: 100vw; flex-basis: 100vw }
+.basis-100vh { -ms-flex-preferred-size: 100vh; flex-basis: 100vh }
+.basis-golden { -ms-flex-preferred-size: 61.803398875%; flex-basis: 61.803398875% }
+.basis-content { -ms-flex-preferred-size: content; flex-basis: content }
+.basis-auto { -ms-flex-preferred-size: auto; flex-basis: auto }