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,207 @@
+/*!
+ * 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/>.
+ */
+
+.container,
+.container-fluid
+{
+  margin: 0 auto;
+  padding: 0 $small-space;
+  max-width: 100%;
+}
+
+.container:after,
+.container-fluid:after,
+.row:after
+{
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.row
+{
+  margin: 0 -$small-space;
+}
+
+.column
+{
+  position: relative;
+  min-height: 1px;
+  padding: 0 $small-space;
+  width: 100%;
+}
+
+[dir="ltr"] .column
+{
+  float: left;
+}
+
+[dir="rtl"] .column
+{
+  float: right;
+}
+
+@media (min-width: $mobile-breakpoint)
+{
+  .container
+  {
+    width: 540px;
+  }
+}
+
+@media(min-width: $tablet-breakpoint)
+{
+  .container
+  {
+    width: 720px;
+  }
+
+  .one-half

[juliandoucette, 2016/11/03 23:22:26]

This should be one-fourth not one-half.

[juliandoucette, 2016/11/08 16:09:52]

Done.

+  {
+    width: 50%;
+  }
+
+  [dir="ltr"] .pull-one-half
+  {
+    right: 50%;
+  }
+
+  [dir="rtl"] .pull-one-half
+  {
+    left: 50%;
+  }
+
+  [dir="ltr"] .push-one-half
+  {
+    left: 50%;
+  }
+
+  [dir="rtl"] .push-one-half
+  {
+    right: 50%;
+  }
+}
+
+@media(min-width: $desktop-breakpoint)

[juliandoucette, 2016/11/03 23:22:26]

I have to add .two-fourths and .one-half here. 

[juliandoucette, 2016/11/08 16:09:52]

Done.

+{
+  .container
+  {
+    width: 960px;
+  }
+
+  .one-fourth
+  {
+    width: 25%;
+  }
+
+  [dir="ltr"] .pull-one-fourth
+  {
+    right: 25%;
+  }
+
+  [dir="rtl"] .pull-one-fourth
+  {
+    left: 25%;
+  }
+
+  [dir="ltr"] .push-one-fourth
+  {
+    left: 25%;
+  }
+
+  [dir="ltr"] .push-one-fourth
+  {
+    right: 25%;
+  }
+
+  .one-third
+  {
+    width: 33.333333%;
+  }
+
+  [dir="ltr"] .pull-one-third
+  {
+    right: 33.333333%;
+  }
+
+  [dir="rtl"] .pull-one-third
+  {
+    left: 33.333333%;
+  }
+
+  [dir="ltr"] .push-one-third
+  {
+    left: 33.333333%;
+  }
+
+  [dir="rtl"] .push-one-third
+  {
+    right: 33.333333%;
+  }
+
+  .two-thirds
+  {
+    width: 66.666667%;
+  }
+
+  [dir="ltr"] .pull-one-third
+  {
+    right: 66.666667%;
+  }
+
+  [dir="rtl"] .pull-one-third
+  {
+    left: 66.666667%;
+  }
+
+  [dir="ltr"] .push-one-third
+  {
+    left: 66.666667%;
+  }
+
+  [dir="rtl"] .push-one-third
+  {
+    right: 66.666667%;
+  }
+
+  .three-fourths
+  {
+    width: 75%;
+  }
+
+  [dir="ltr"] .pull-three-fourths
+  {
+    right: 75%;
+  }
+
+  [dir="rtl"] .pull-three-fourths
+  {
+    left: 75%;
+  }
+
+  [dir="ltr"] .push-three-fourths
+  {
+    left: 75%;
+  }
+
+  [dir="rtl"] .push-three-fourths
+  {
+    right: 75%;
+  }
+
+}