Merge lp:~daker/ubuntu-html5-theme/grid-system2 into lp:ubuntu-html5-theme

[Adnane Belmadiaf]

Added a new flexbox grid system

[lp:~daker/ubuntu-html5-theme/grid-system2]

125. By Adnane Belmadiaf on 2014-03-08

Fixes

126. By Adnane Belmadiaf on 2014-05-31

Fixes

[Alexandre Abreu (abreu-alexandre)]

Is it still relevant?

review: Needs Information

Unmerged revisions

126. By Adnane Belmadiaf on 2014-05-31

Fixes

125. By Adnane Belmadiaf on 2014-03-08

Fixes

124. By Adnane Belmadiaf on 2014-02-04

Added a new flexbox grid system

=== added file '0.1/ambiance/css/default.css.OTHER'
--- 0.1/ambiance/css/default.css.OTHER	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/default.css.OTHER	2014-05-31 13:56:38 +0000
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>
+ */
+
+@import url("reset.css");
+@import url("tabs.css");
+@import url("pagestack.css");
+@import url("text-input.css");
+@import url("progress-bars.css");
+@import url("dialogs.css");
+@import url("buttons.css");
+@import url("sliders.css");
+@import url("toggles.css");
+@import url("popover.css");
+@import url("listitems.css");
+@import url("toolbars.css");
+@import url("shapes.css");
+@import url("indexbar.css");
+@import url("option-selector.css");
+@import url("grid.css");
+
+
+* {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+    background: #ededf0 url("../img/[e-mail]") repeat top left;
+    font-family: Ubuntu;
+    font-weight: normal;
+}
+
+[data-role="content"] {
+    background: #ededf0 url("../img/[e-mail]") repeat top left;
+    border-top: 1px solid #f0f0f0;
+    height: auto;
+    min-height: auto;
+    width: 100%;
+    font-size: 1rem "Ubuntu";
+    color: #787878;
+}
+
+[data-role="content"] p {
+    font: 0.9rem "Ubuntu";
+    color: #787878;
+}
+
+[data-role="content"] h1,
+[data-role="content"] h2,
+[data-role="content"] h3 {
+    color: #747278;
+    font: 1.3rem "Ubuntu Light";
+    font-weight: bold;
+}
+
+[data-role="content"] h2 {
+    font-size: 1.1rem;
+}
+
+[data-role="content"] h3 {
+    font-size: 0.9rem;
+}
+
+[data-role="content"] img {
+    margin: 0 auto;
+    max-width: 98%;
+}
+
+.inset {
+    margin-bottom: 10px;
+}

=== added file '0.1/ambiance/css/grid.css'
--- 0.1/ambiance/css/grid.css	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/css/grid.css	2014-05-31 13:56:38 +0000
@@ -0,0 +1,194 @@
+/*
+ * Copyright (C) 2014 Adnane Belmadiaf <[e-mail]>
+ * License granted by Canonical Limited
+ *
+ * This file is part of ubuntu-html5-ui-toolkit.
+ *
+ * This package is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or
+ * (at your option) any later version.
+
+ * This package is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU Lesser General Public
+ * License along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+[data-role="grid"] {
+
+}
+
+[data-role="row"] {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+.c {
+    padding: 5px;
+    border-radius: 4px;
+    border: 1px solid #dbdbdb;
+    background-color: #f2f2f2;
+    text-align: center;
+}
+
+[data-role="row"] + [data-role="row"] {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+[data-role="column"] {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    display: block;
+    padding: 5px;
+    width: 100%;
+}
+
+[data-role="row"][data-align="top"] {
+    -webkit-box-align: start;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+}
+
+[data-role="row"][data-align="bottom"] {
+    -webkit-box-align: end;
+    -webkit-align-items: flex-end;
+    align-items: flex-end;
+}
+
+[data-role="row"][data-align="center"] {
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+[data-role="column"][data-align="top"] {
+    -webkit-align-self: flex-start;
+    align-self: flex-start;
+}
+
+[data-role="column"][data-align="bottom"] {
+    -webkit-align-self: flex-end;
+    align-self: flex-end;
+}
+
+[data-role="column"][data-align="center"] {
+    -webkit-align-self: center;
+    align-self: center;
+}
+
+/* Column Offsets */
+[data-role="column"][data-offset="10"] {
+    margin-left: 10%;
+}
+
+[data-role="column"][data-offset="20"] {
+    margin-left: 20%;
+}
+
+[data-role="column"][data-offset="25"] {
+    margin-left: 25%;
+}
+
+[data-role="column"][data-offset="33"],
+[data-role="column"][data-offset="34"] {
+    margin-left: 33.3333%;
+}
+
+[data-role="column"][data-offset="50"] {
+    margin-left: 50%;
+}
+
+[data-role="column"][data-offset="66"],
+[data-role="column"][data-offset="67"] {
+    margin-left: 66.6666%;
+}
+
+[data-role="column"][data-offset="75"] {
+    margin-left: 75%;
+}
+
+[data-role="column"][data-offset="80"] {
+    margin-left: 80%;
+}
+
+[data-role="column"][data-offset="90"] {
+    margin-left: 90%;
+}
+
+
+[data-role="column"][data-size="10"] {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 10%;
+    flex: 0 0 10%;
+    max-width: 10%;
+}
+
+[data-role="column"][data-size="20"] {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 20%;
+    flex: 0 0 20%;
+    max-width: 20%;
+}
+
+[data-role="column"][data-size="25"] {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+}
+
+[data-role="column"][data-size="33"],
+[data-role="column"][data-size="34"] {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 33.3333%;
+    flex: 0 0 33.3333%;
+    max-width: 33.3333%;
+}
+
+[data-role="column"][data-size="50"] {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+[data-role="column"][data-size="66"],
+[data-role="column"][data-size="67"] {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 66.6666%;
+    flex: 0 0 66.6666%;
+    max-width: 66.6666%;
+}
+
+[data-role="column"][data-size="75"] {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 75%;
+    flex: 0 0 75%;
+    max-width: 75%;
+}
+
+[data-role="column"][data-size="80"] {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 80%;
+    flex: 0 0 80%;
+    max-width: 80%;
+}
+
+[data-role="column"][data-size="90"] {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 90%;
+    flex: 0 0 90%;
+    max-width: 90%;
+}

=== added file 'examples/html5-theme/widgets/Grid.html'
--- examples/html5-theme/widgets/Grid.html	1970-01-01 00:00:00 +0000
+++ examples/html5-theme/widgets/Grid.html	2014-05-31 13:56:38 +0000
@@ -0,0 +1,108 @@
+<!--
+ Copyright (C) 2013 Adnane Belmadiaf <[e-mail]>
+ License granted by Canonical Limited
+
+ This file is part of ubuntu-html5-theme.
+
+ This package is free software; you can redistribute it and/or modify
+ it under the terms of the GNU Lesser General Public License as
+ published by the Free Software Foundation; either version 3 of the
+ License, or
+ (at your option) any later version.
+
+ This package is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public
+ License along with this program. If not, see
+ <http://www.gnu.org/licenses/>.
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="copyright" content="Adnane Belmadiaf <[e-mail]>">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Ubuntu UI HTML5 Theme: Grid</title>
+    <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+    <div data-role="mainview">
+        <header data-role="header">
+            <ul data-role="tabs">
+                <li data-role="tabitem" data-page="main">Tab 2</li>
+            </ul>
+        </header>
+
+        <div data-role="content">
+            <div data-role="page" id="main" style="display: block;">
+                <div data-role="grid">
+                    <h1>1 Column</h1>
+                    <div data-role="row">
+                        <div data-role="column" data-offset="50"><div class="c">Column 1</div></div>
+                    </div>
+                    <h1>2 Columns</h1>
+                    <div data-role="row">
+                        <div data-role="column"><div class="c">Column 1</div></div>
+                        <div data-role="column"><div class="c">Column 2</div></div>
+                    </div>
+                    <h1>3 Columns</h1>
+                    <div data-role="row">
+                        <div data-role="column"><div class="c">Column 1</div></div>
+                        <div data-role="column"><div class="c">Column 2</div></div>
+                        <div data-role="column"><div class="c">Column 3</div></div>
+                    </div>
+                    <h1>Individual Sizing</h1>
+                    <div data-role="row">
+                        <div data-role="column" data-size="20"><div class="c">Column 1 data-size="20"</div></div>
+                        <div data-role="column"><div class="c">Column 2</div></div>
+                        <div data-role="column"><div class="c">Column 3</div></div>
+                    </div>
+                    <div data-role="row">
+                        <div data-role="column"><div class="c">Column 1</div></div>
+                        <div data-role="column" data-size="33"><div class="c">Column 2 data-size="33"</div></div>
+                    </div>
+
+                    <div data-role="row">
+                        <div data-role="column" data-size="50"><div class="c">Column 1 data-size="25"</div></div>
+                        <div data-role="column"><div class="c">Column 2</div></div>
+                        <div data-role="column" data-size="66"><div class="c">Column 3 data-size="33"</div></div>
+                    </div>
+
+                    <h1>Top-aligned Grid Cells</h1>
+                    <div data-role="row" data-align="top">
+                        <div data-role="column"><div class="c">This cell should be top-aligned.</div></div>
+                        <div data-role="column"><div class="c">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div>
+                        <div data-role="column"><div class="c">This cell should be top-aligned.</div></div>
+                    </div>
+
+                    <h1>Bottom-aligned Grid Cells</h1>
+                    <div data-role="row" data-align="bottom">
+                        <div data-role="column"><div class="c">This cell should be bottom-aligned.</div></div>
+                        <div data-role="column"><div class="c">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div>
+                        <div data-role="column"><div class="c">This cell should be bottom-aligned.</div></div>
+                    </div>
+
+                    <h1>Vertically-aligned Grid Cells</h1>
+                    <div data-role="row" data-align="center">
+                        <div data-role="column"><div class="c">This cell should be vertically-aligned.</div></div>
+                        <div data-role="column"><div class="c">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div>
+                        <div data-role="column"><div class="c">This cell should be vertically-aligned.</div></div>
+                    </div>
+
+                    <h1>Mixed-aligned Grid Cells</h1>
+                    <div data-role="row">
+                        <div data-role="column" data-align="top"><div class="c">This cell should be top-aligned.</div></div>
+                        <div data-role="column" data-align="center"><div class="c">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></div>
+                        <div data-role="column" data-align="bottom"><div class="c">This cell should be bottom-aligned.</div></div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>