From 450fbf5a5a77cf5bf0b7e78e2fa5f00806155ac2 Mon Sep 17 00:00:00 2001 From: Ryan Van Etten Date: Wed, 24 May 2017 02:48:37 -0700 Subject: [PATCH] flexpress yo' self --- .editorconfig | 7 +++ .gitattributes | 1 + .gitignore | 1 + LICENSE.md | 5 ++ README.md | 159 ++++++++++++++++++++++++++++++++++++++++++++++++- main.css | 112 ++++++++++++++++++++++++++++++++++ module.css | 112 ++++++++++++++++++++++++++++++++++ package.json | 37 ++++++++++++ 8 files changed, 433 insertions(+), 1 deletion(-) create mode 100644 .editorconfig create mode 100644 .gitattributes create mode 100644 .gitignore create mode 100644 LICENSE.md create mode 100644 main.css create mode 100644 module.css create mode 100644 package.json diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..b3dfee7 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,7 @@ +root = true + +[*] +end_of_line = lf +insert_final_newline = true +indent_style = space +indent_size = 2 diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..176a458 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..91d2af2 --- /dev/null +++ b/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. diff --git a/README.md b/README.md index 9f820f2..afd22c6 100644 --- a/README.md +++ b/README.md @@ -1 +1,158 @@ -# flexboxes \ No newline at end of file +# flexboxes +flexboxes 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 diff --git a/main.css b/main.css new file mode 100644 index 0000000..66b72e8 --- /dev/null +++ b/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 } diff --git a/module.css b/module.css new file mode 100644 index 0000000..b5ed689 --- /dev/null +++ b/module.css @@ -0,0 +1,112 @@ +.flex { display: flex } +.flex-item { display: flex-item } +.inline-flex { display: inline-flex } + +.flex-row { flex-direction: row } +.flex-row-reverse { flex-direction: row-reverse } +.flex-column { flex-direction: column } +.flex-column-reverse { flex-direction: column-reverse } + +.flex-wrap { flex-wrap: wrap } +.flex-nowrap { flex-wrap: nowrap } +.flex-wrap-reverse { flex-wrap: wrap-reverse } + +.margin-start { margin-top: auto; margin-left: auto } +.margin-end { margin-right: auto; margin-bottom: auto } + +.order-before { order: -1 } +.order-after { order: 1 } + +.items-start { align-items: flex-start } +.items-end { align-items: flex-end } +.items-center { align-items: center } +.items-baseline { align-items: baseline } +.items-stretch { align-items: stretch } + +.self-center { align-self: center } +.self-baseline { align-self: baseline } +.self-stretch { align-self: stretch } +.self-start { align-self: flex-start } +.self-end { align-self: flex-end } + +.justify-start { justify-content: flex-start } +.justify-end { justify-content: flex-end } +.justify-center { justify-content: center } +.justify-between { justify-content: space-between } +.justify-around { justify-content: space-around } + +.content-start { align-content: flex-start } +.content-end { align-content: flex-end } +.content-center { align-content: center } +.content-between { align-content: space-between } +.content-around { align-content: space-around } +.content-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 { flex: 0 1 61.803398875% } +.flex-initial { flex: 0 1 auto } +.flex-auto { flex: 1 1 auto } +.flex-none { flex: 0 0 auto } + +.flex-1 { flex: 1 } +.flex-2 { flex: 2 } +.flex-3 { flex: 3 } +.flex-4 { flex: 4 } +.flex-5 { flex: 5 } +.flex-6 { flex: 6 } +.flex-7 { flex: 7 } +.flex-8 { flex: 8 } +.flex-9 { flex: 9 } +.flex-10 { flex: 10 } +.flex-11 { flex: 11 } +.flex-12 { flex: 12 } + +.grow-0 { flex-grow: 0 } +.grow-1 { flex-grow: 1 } +.grow-2 { flex-grow: 2 } +.grow-3 { flex-grow: 3 } +.grow-4 { flex-grow: 4 } +.grow-5 { flex-grow: 5 } +.grow-6 { flex-grow: 6 } +.grow-7 { flex-grow: 7 } +.grow-8 { flex-grow: 8 } +.grow-9 { flex-grow: 9 } +.grow-10 { flex-grow: 10 } +.grow-11 { flex-grow: 11 } +.grow-12 { flex-grow: 12 } + +.shrink-0 { flex-shrink: 0 } +.shrink-1 { flex-shrink: 1 } +.shrink-2 { flex-shrink: 2 } +.shrink-3 { flex-shrink: 3 } +.shrink-4 { flex-shrink: 4 } +.shrink-5 { flex-shrink: 5 } +.shrink-6 { flex-shrink: 6 } +.shrink-7 { flex-shrink: 7 } +.shrink-8 { flex-shrink: 8 } +.shrink-9 { flex-shrink: 9 } +.shrink-10 { flex-shrink: 10 } +.shrink-11 { flex-shrink: 11 } +.shrink-12 { flex-shrink: 12 } + +.basis-0 { flex-basis: 0% } +.basis-1 { flex-basis: 8.333333333% } +.basis-2 { flex-basis: 16.6666666666% } +.basis-3 { flex-basis: 25% } +.basis-4 { flex-basis: 33.3333333333% } +.basis-5 { flex-basis: 41.6666666666% } +.basis-6 { flex-basis: 50% } +.basis-7 { flex-basis: 58.333333333% } +.basis-8 { flex-basis: 66.6666666666% } +.basis-9 { flex-basis: 75% } +.basis-10 { flex-basis: 83.3333333333% } +.basis-11 { flex-basis: 91.6666666666% } +.basis-12 { flex-basis: 100% } + +.basis-100vw { flex-basis: 100vw } +.basis-100vh { flex-basis: 100vh } +.basis-golden { flex-basis: 61.803398875% } +.basis-content { flex-basis: content } +.basis-auto { flex-basis: auto } diff --git a/package.json b/package.json new file mode 100644 index 0000000..e318477 --- /dev/null +++ b/package.json @@ -0,0 +1,37 @@ +{ + "name": "flexboxes", + "version": "0.0.0", + "description": "CSS flexbox utility library and grid system", + "author": "Ryan Van Etten", + "license": "ISC", + "main": "main.css", + "scripts": { + "build": "postcss module.css --use autoprefixer --no-map -o main.css" + }, + "homepage": "https://github.com/ryanve/flexboxes", + "repository": { + "type": "git", + "url": "git+https://github.com/ryanve/flexboxes.git" + }, + "bugs": { + "url": "https://github.com/ryanve/flexboxes/issues" + }, + "keywords": [ + "css", + "flex", + "flexbox", + "flex-wrap", + "flex-grow", + "flex-shrink", + "flex-basis", + "flex-direction", + "functional-css", + "grid-system", + "grids", + "grid" + ], + "devDependencies": { + "autoprefixer": "^7.1.1", + "postcss-cli": "^4.0.0" + } +}