Issue 4609 - Default grid component

scss/_grid.scss

Index: scss/_grid.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/scss/_grid.scss
@@ -0,0 +1,130 @@
+/*!
+ * This file is part of universal-design-language
+ * Copyright (C) 2016 Eyeo GmbH
+ *
+ * universal-design-language is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * universal-design-language 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 General Public License
+ * along with web.starter-kit.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/** Grid component */

[juliandoucette, 2016/11/16 17:17:38]

Note: We will test a margin-left + :first-child grid solution.

+
+/**
+ * .row contains one or more .column(s)
+ * .row clears .column(s)

[saroyanm, 2016/11/15 16:09:44]

Detail: this belong to the selector below I guess.

[juliandoucette, 2016/11/16 17:17:38]

Acknowledged.

+ * .row negates the left & right padding of it's first & last .column(s)
+ *     Preserving consistent padding between .column(s)
+ */
+.row
+{
+  margin: 0px (-$small-space);
+}
+
+.row:after
+{
+  display: block;
+  clear: both;
+  content: "";
+}
+
+/**
+ * .column is 100% width by default
+ * Modifier classes are applied to .column to change it's width
+ * Modifier classes behave differently on different device widths
+ */
+.column
+{
+  position: relative;
+  width: 100%;
+  min-height: 1px;

[saroyanm, 2016/11/15 16:09:44]

Deatail: can't see a reason of overwriting the initial value, is there one ?

[juliandoucette, 2016/11/16 17:17:38]

Acknowledged.

A column must have at least 1px height to stack horizontally.

+  padding: 0px $small-space;
+}
+
+/*
+ * .column(s) within .row .reverse appear in reverse order
+ * .column(s) within [dir=rtl] appear in reverse order respectively
+ */
+
+/**
+ * .row .column(s) flow left-to-right
+ * RTL .reverse .row .column(s) flow left-to-right
+ */
+.column,
+[dir="rtl"] .reverse .column
+{
+  float: left;
+}
+
+/**
+ * RTL .row .column(s) flow right-to-left
+ * .reverse .row .column(s) flow right-to-left
+ */
+.reverse .column,
+[dir="rtl"] .column
+{
+  float: right;
+}
+
+@media(min-width: $tablet-breakpoint)
+{
+  /**
+   * Change .column to "one-fourth" width
+   * .one-fourth collapses into .one-half within $tablet-breakpoint
+   */
+  .one-fourth
+  {
+    width: 50%;
+  }
+}
+
+@media(min-width: $desktop-breakpoint)
+{
+  /**
+   * Change .column to "one-half" width
+   */
+  .one-half
+  {
+    width: 50%;
+  }
+
+  /**
+   * Change .column to "one-third" width
+   */
+  .one-third
+  {
+    width: 33.333333%;
+  }
+
+  /**
+   * Change .column ot "two-thirds" width
+   */
+  .two-thirds
+  {
+    width: 66.666667%;
+  }
+
+  /**
+   * Change .column to "one-fourth" width
+   */
+  .one-fourth
+  {
+    width: 25%;
+  }
+
+  /**
+   * Change .column to "three-fourths" width
+   */
+  .three-fourths
+  {
+    width: 75%;
+  }
+}