initial commit

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 `<div layout vertical>` use `<div class="layout vertical">`. 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 `<link rel='stylesheet' type='text/css' href='bower_components/css-flex/flex.css'>`, 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

bower.json

@@ -0,0 +1,23 @@
+{
+  "name": "css-flex",
+  "version": "0.0.1",
+  "homepage": "https://github.com/joshuacaron/Flex.css",
+  "authors": [
+    "Joshua Caron <[email protected]>"
+  ],
+  "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"
+  ]
+}

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; }