From a2ed58387073840071adf1077d74051195e09d90 Mon Sep 17 00:00:00 2001 From: Joshua Caron Date: Wed, 29 Apr 2015 13:59:05 -0400 Subject: [PATCH] initial commit --- README.md | 15 ++++ bower.json | 23 ++++++ flex.css | 237 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 275 insertions(+) create mode 100644 README.md create mode 100644 bower.json create mode 100644 flex.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..a81fbad --- /dev/null +++ b/README.md @@ -0,0 +1,15 @@ +# Flex.css +A convenient library for CSS flexbox layouts, based off of Polymer's layout.html, but using CSS classes instead of attributes. + +The usage is exactly the same as with Polymer, except the attributes are now CSS classes. For example instead of using `
` use `
`. See [https://www.polymer-project.org/0.5/docs/polymer/layout-attrs.html](https://www.polymer-project.org/0.5/docs/polymer/layout-attrs.html) for the full list of layout options. + +To install simply run `bower install css-flex`. Then in your HTML file link to ``, and you're good to go. + +This project is based off of layout.html from the Polymer project. The only modifications are changing the attributes to css classes, the remaining code is directly from the Polymer project which is released under the following licence: + +Copyright (c) 2014 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt \ No newline at end of file diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..caee187 --- /dev/null +++ b/bower.json @@ -0,0 +1,23 @@ +{ + "name": "css-flex", + "version": "0.0.1", + "homepage": "https://github.com/joshuacaron/Flex.css", + "authors": [ + "Joshua Caron " + ], + "description": "A convenient library for CSS flexbox layouts, based off of Polymer's layout.html.", + "main": "flex.css", + "keywords": [ + "flexbox", + "css", + "flex", + "layout" + ], + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/flex.css b/flex.css new file mode 100644 index 0000000..ee3109a --- /dev/null +++ b/flex.css @@ -0,0 +1,237 @@ +/*Flex.css + +This project is based off of layout.html from the Polymer project. The only modifications are changing the attributes to css classes, the remaining code is directly from the Polymer project which is released under the following licence: + + +Copyright (c) 2014 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */ + + +.layout.horizontal, .layout.vertical { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; } + +.layout.horizontal.inline, .layout.vertical.inline { + display: -ms-inline-flexbox; + display: -webkit-inline-flex; + display: inline-flex; } + +.layout.horizontal { + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; } + +.layout.horizontal.reverse { + -ms-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; } + +.layout.vertical { + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; } + +.layout.vertical.reverse { + -ms-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; } + +.layout.wrap { + -ms-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; } + +.layout.wrap.reverse { + -ms-flex-wrap: wrap-reverse; + -webkit-flex-wrap: wrap-reverse; + flex-wrap: wrap-reverse; } + +.flex { + -ms-flex: 1 1 0.0px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 0.0px; + flex-basis: 0.0px; } + +.layout.vertical > .flex.auto-vertical { + -ms-flex: 1 1 auto; + -webkit-flex-basis: auto; + flex-basis: auto; } + +.flex.auto { + -ms-flex: 1 1 auto; + -webkit-flex-basis: auto; + flex-basis: auto; } + +.flex.none { + -ms-flex: none; + -webkit-flex: none; + flex: none; } + +.flex.one { + -ms-flex: 1; + -webkit-flex: 1; + flex: 1; } + +.flex.two { + -ms-flex: 2; + -webkit-flex: 2; + flex: 2; } + +.flex.three { + -ms-flex: 3; + -webkit-flex: 3; + flex: 3; } + +.flexx.four { + -ms-flex: 4; + -webkit-flex: 4; + flex: 4; } + +.flex.five { + -ms-flex: 5; + -webkit-flex: 5; + flex: 5; } + +.flex.six { + -ms-flex: 6; + -webkit-flex: 6; + flex: 6; } + +.flex.seven { + -ms-flex: 7; + -webkit-flex: 7; + flex: 7; } + +.flex.eight { + -ms-flex: 8; + -webkit-flex: 8; + flex: 8; } + +.flex.nine { + -ms-flex: 9; + -webkit-flex: 9; + flex: 9; } + +.flex.ten { + -ms-flex: 10; + -webkit-flex: 10; + flex: 10; } + +.flex.eleven { + -ms-flex: 11; + -webkit-flex: 11; + flex: 11; } + +.flex.twelve { + -ms-flex: 12; + -webkit-flex: 12; + flex: 12; } + +/* alignment in cross axis */ +.layout.start { + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; } + +.layout.center, .layout.center-center { + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; } + +.layout.end { + -ms-flex-align: end; + -webkit-align-items: flex-end; + align-items: flex-end; } + +/* alignment in main axis */ +.layout.start-justified { + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; } + +.layout.center-justified, .layout.center-center { + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } + +.layout.end-justified { + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; } + +.layout.around-justified { + -ms-flex-pack: distribute; + -webkit-justify-content: space-around; + justify-content: space-around; } + +.layout.justified { + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; } + +/* self alignment */ +.self-start { + -ms-align-self: flex-start; + -webkit-align-self: flex-start; + align-self: flex-start; } + +.self-center { + -ms-align-self: center; + -webkit-align-self: center; + align-self: center; } + +.self-end { + -ms-align-self: flex-end; + -webkit-align-self: flex-end; + align-self: flex-end; } + +.self-stretch { + -ms-align-self: stretch; + -webkit-align-self: stretch; + align-self: stretch; } + +/******************************* + Other Layout +*******************************/ +.block { + display: block; } + +/* ie support for hidden */ +.hidden { + display: none !important; } + +.relative { + position: relative; } + +.fit { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } + +body.fullbleed { + margin: 0; + height: 100vh; } + +/******************************* + Other +*******************************/ +.segment { + display: block; + position: relative; + -webkit-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + margin: 1em 0.5em; + padding: 1em; + background-color: white; + -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); + border-radius: 5px 5px 5px 5px; }