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/>.
  */
 
-/** Grid component */

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

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

+/*******************************************************************************
+ * Grid component
+ ******************************************************************************/
 
 /**
- * .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 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 (-$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 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
+/* - .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%;
   }
 }