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,
-.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: 0 auto;
-  padding: 0 $small-space;
-  max-width: 100%;
+  margin: 0px (-$small-space);
 }
 
-.container:after,
-.container-fluid:after,
 .row:after
 {
+  display: block;
+  clear: both;
   content: "";
-  display: table;
-  clear: both;
 }
 
-.row
-{
-  margin: 0 -$small-space;
-}
-
+/**
+ * - .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: 0 $small-space;
-  width: 100%;
+  padding: 0px $small-space;
 }
 
-[dir="ltr"] .column
+/* - .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;
 }
 
+.reverse .column,
 [dir="rtl"] .column
 {
   float: right;
 }
 
-@media (min-width: $mobile-breakpoint)
+@media(min-width: $tablet-breakpoint)
 {
-  .container
+  .one-fourth
   {
-    width: 540px;
+    width: 50%;
   }
 }
 
-@media(min-width: $tablet-breakpoint)
+@media(min-width: $desktop-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
+  .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%;
-  }
-}
-
-@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;
+    width: 66.666667%;
   }
 
   .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%;
-  }
-
 }