Issue 4609 - Default grid component

scss/_grid.scss

 /*!
- * This file is part of universal-design-language
+ * This file is part of website-defaults
  * Copyright (C) 2016 Eyeo GmbH
  *
- * universal-design-language is free software: you can redistribute it and/or
+ * website-defaults 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,
+ * website-defaults 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/>.
+ * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-.container,

[saroyanm, 2016/11/08 16:19:40]

What suppose to be the difference between the container and .row ?

[juliandoucette, 2016/11/09 14:51:16]

Acknowledged.

[juliandoucette, 2016/11/09 14:51:16]

We decided to move .container to _content.scss.

[juliandoucette, 2016/11/09 19:47:18]

Done.

-.container-fluid
+/*******************************************************************************
+ * Grid component
+ ******************************************************************************/
+
+/**
+ * - .row contains one or more .column(s)
+ * - .row clears .column(s)
+ * - .row negates the left & right padding of it's left-most & right-most
+ *   .column(s) while preserving consistent padding between .column(s)
+ */
+.row
 {
-  margin: 0px auto;
-  padding: 0px $small-space;
-  max-width: 100%;
+  margin: 0px (-$small-space);
 }
 
-.container:after,

[saroyanm, 2016/11/08 16:19:40]

Note: we might use double colon as soon we will drop IE8 support.

[juliandoucette, 2016/11/09 14:51:16]

Acknowledged.

[juliandoucette, 2016/11/09 19:47:18]

Done.

-.container-fluid:after,
 .row:after
 {
+  display: block;
+  clear: both;
   content: "";
-  display: table;

[saroyanm, 2016/11/08 16:19:40]

I'll suggest to use display: block;
I can't see reason of using display: table; if you are not planing to use table
like structure. While clearing with the block element sounds more reasonable IMO
and provide less questions even if it's used with the display:table in other
examples.

[juliandoucette, 2016/11/09 14:51:16]

Acknowledged.

I will change this to display:block.

[juliandoucette, 2016/11/09 19:47:18]

Done.

-  clear: both;
 }
 
-.row
-{
-  margin: 0px -$small-space;

[saroyanm, 2016/11/08 16:19:39]

Why do we need to use negative margins here ?

[juliandoucette, 2016/11/09 14:51:16]

It should be (-$small-space) to avoid incorrect calculation.

[juliandoucette, 2016/11/09 14:51:16]

Negative margin reasoning:

To add consistent padding around all columns except for the first left padding
and last right padding.

[juliandoucette, 2016/11/09 19:47:18]

Done.

-}
-
+/**
+ * - .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;
   padding: 0px $small-space;
-  width: 100%;
 }
 
-[dir="ltr"] .column

[saroyanm, 2016/11/08 16:19:39]

detail: .column selector should be enough, same applies to similar "ltr" styles
below.

[juliandoucette, 2016/11/09 14:51:16]

Acknowledged.

This only applies to properties which are overridden by rtl. 

[juliandoucette, 2016/11/09 19:47:18]

Done.

+/* - .column(s) within .row .reverse appear in reverse order
+ * - .column(s) within [dir=rtl] appear in reverse order respectively
+ */
+
+.column,
+[dir="rtl"] .reverse .column
 {
   float: left;

[saroyanm, 2016/11/08 16:19:40]

I'm not opposed of using floats, because seems like having the solution of
clearing it should cover most of the issues that appears when people forget to
clear, but I'd like to ask @Thomas opinion regarding this as well.

[juliandoucette, 2016/11/09 14:51:16]

Julian - Acknowledged.

@Thomas's opinion is still requested.

 }
 
+.reverse .column,
 [dir="rtl"] .column
 {
   float: right;
 }
 
-@media (min-width: $mobile-breakpoint)
-{
-  .container
-  {
-    width: 540px;

[saroyanm, 2016/11/08 16:19:39]

Why is the width specification for the container is necessary here and below ?
Maybe I do not know the difference between container and row, that why it's
questionable for me.

[juliandoucette, 2016/11/09 14:51:16]

Acknowledged.

- We are moving container outside
- We set the width of the regular container to avoid scaling edge cases

[juliandoucette, 2016/11/09 19:47:18]

Done.

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

[saroyanm, 2016/11/08 16:19:39]

I can't see a reason why we need to specify desktop-breakpoint, I think this
should be the default style, BTW the mobile-breakpoint is missing.

[juliandoucette, 2016/11/09 14:51:16]

Acknowledged.

- Since we are styling mobile first, $mobile-breakpoint is not necessary 

[juliandoucette, 2016/11/09 19:47:18]

Done.

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

[saroyanm, 2016/11/08 16:19:40]

A suggestion regarding pulling and pushing. 
I'm not really sure if we will use the part of the functionality from it, so
maybe we can make it simpler, what about current implementation ? It will make
things more simpler IMO:

.one-fourth
{
  width: 25%;
}

.one-fourth.move-to-end
{
  left: 75%;
}

.one-fourth.move-to-start
{
  left: 0px;
}

Let me know if you think that in our designs we are going to use pull and push
functionality in the way you have implemented.

[juliandoucette, 2016/11/09 14:51:16]

Acknowledged.

- naming TBD
- we'll cover 1/2, 1/3 + 2/3, 1/4 + 3/4 (not individual 1/4s and 1/3s)

[juliandoucette, 2016/11/09 19:47:18]

Done.

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