Merge pull request #54 from suitcss/remove-cell

Remove Grid-cell in favour of implicit Grid child.

README.md

@@ -30,16 +30,14 @@ Read more about [SUIT CSS](https://github.com/suitcss/suit/).
 ## Available classes
 
 * `Grid`: core component
-* `Grid--alignCenter`: center-align all child `Grid-cell`
-* `Grid--alignRight`: right-align all child `Grid-cell`
-* `Grid--alignMiddle`: middle-align all child `Grid-cell`
-* `Grid--alignBottom`: bottom-align all child `Grid-cell`
-* `Grid--fill`: evenly distribute space amongst all child `Grid-cell`
+* `Grid--alignCenter`: center-align all child cells
+* `Grid--alignRight`: right-align all child cells
+* `Grid--alignMiddle`: middle-align all child cells
+* `Grid--alignBottom`: bottom-align all child cells
+* `Grid--fill`: evenly distribute space amongst all child cells
 * `Grid--fit`: fit cells to their content
-* `Grid--equalHeight`: all child `Grid-cell` match height of the tallest
+* `Grid--equalHeight`: all child cells match height of the tallest
 * `Grid--withGutter`: adds a gutter between cells
-* `Grid-cell`: a child cell of `Grid` that wraps grid content
-* `Grid-cell--center`: center an individual `Grid-cell`
 
 ## Configurable variables
 
@@ -51,32 +49,36 @@ A simple grid is easy to create. A grid container can have any number of child
 cells. When used with `Grid--fill` space is evenly distributed without need for
 sizing utilities.
 
+**Note** Elements that are direct descendants of `Grid` will be flex items. It's
+recommended to use an element that can easily have classes attached later if
+needed, such as `u-sizeFill` or `u-flexJustifyCenter`
+
 ```html
 <div class="Grid Grid--fill Grid--withGutter">
-  <div class="Grid-cell"></div>
-  <div class="Grid-cell"></div>
-  <div class="Grid-cell"></div>
-  <div class="Grid-cell"></div>
+  <div><!-- cell content --></div>
+  <div><!-- cell content --></div>
+  <div><!-- cell content --></div>
+  <div><!-- cell content --></div>
 </div>
 ```
 
 For more granular control over layout make use of modifiers and sizing utilities.
 
 ```html
 <div class="Grid [Grid--alignCenter|Grid--alignRight|Grid--alignMiddle|Grid--alignBottom|Grid--fill|Grid--fit|Grid--equalHeight]">
-  <div class="Grid-cell u-size1of2 u-lg-size6of12"></div>
-  <div class="Grid-cell u-size1of2 u-lg-size4of12"></div>
-  <div class="Grid-cell u-size1of3 u-lg-size2of12"></div>
-  <div class="Grid-cell u-size1of3"></div>
+  <div class="u-size1of2 u-lg-size6of12"></div>
+  <div class="u-size1of2 u-lg-size4of12"></div>
+  <div class="u-size1of3 u-lg-size2of12"></div>
+  <div class="u-size1of3"></div>
 </div>
 ```
 
 Fit cells to their content and allow others to fill the remaining space.
 
 ```html
 <div class="Grid">
-  <div class="Grid-cell u-sizeFit">Fit to content</div>
-  <div class="Grid-cell u-sizeFill">Take up remaining space</div>
+  <div class="u-sizeFit">Fit to content</div>
+  <div class="u-sizeFill">Take up remaining space</div>
 </div>
 ```
 
@@ -94,7 +96,7 @@ GOOD:
 
 ```html
 <div class="Grid Grid--withGutter">
-  <div class="Grid-cell u-size1of2 u-before1of4 u-after1of4">
+  <div class="u-size1of2 u-before1of4 u-after1of4">
     {{>partial}}
   </div>
 </div>
@@ -104,7 +106,7 @@ BAD:
 
 ```html
 <div class="Grid Grid--withGutter u-before1of4 u-after1of4">
-  <div class="Grid-cell">
+  <div>
     {{>partial}}
   </div>
 </div>
@@ -117,7 +119,7 @@ grid's width, and not the width of the whole application.
 ```html
 <div class="u-before1of4 u-after1of4">
   <div class="Grid Grid--withGutter">
-    <div class="Grid-cell u-size1of2"> <!-- 50% of the width of the Grid -->
+    <div class="u-size1of2"> <!-- 50% of the width of the Grid -->
       {{>partial}}
     </div>
   </div>

lib/grid.css

@@ -1,4 +1,4 @@
-/** @define Grid */
+/** @define Grid; weak */
 
 :root {
   --Grid-gutter-size: 20px;
@@ -15,7 +15,7 @@
    ========================================================================== */
 
 /**
- * All content must be contained within child `Grid-cell` elements.
+ * All content must be contained within child elements.
  *
  * 1. Account for browser defaults of elements that might be the root node of
  *    the component.
@@ -29,6 +29,21 @@
   padding: 0; /* 1 */
 }
 
+/**
+ * No explicit width by default. Rely on combining a cell with a dimension
+ * utility or a component class that extends 'Grid'.
+ *
+ * 1. Set flex items to full width by default
+ * 2. Fix issue where elements with overflow extend past the
+ *    `.Grid > *` container - https://git.io/vw5oF
+ */
+
+.Grid > * {
+  box-sizing: inherit;
+  flex-basis: 100%; /* 1 */
+  min-width: 0; /* 2 */
+}
+
 /**
  * Modifier: center align all grid cells
  */
@@ -71,23 +86,23 @@
  *    http://git.io/vllWx
  */
 
-.Grid--fill > .Grid-cell {
+.Grid--fill > * {
   flex: 1 1 0%; /* 1 */
 }
 
 /**
  * Modifier: fit cells to their content
  */
 
-.Grid--fit > .Grid-cell {
+.Grid--fit > * {
   flex-basis: auto;
 }
 
 /**
  * Modifier: all cells match height of tallest cell in a row
  */
 
-.Grid--equalHeight > .Grid-cell {
+.Grid--equalHeight > * {
   display: flex;
 }
 
@@ -99,34 +114,6 @@
   margin: 0 calc(-0.5 * var(--Grid-gutter-size));
 }
 
-.Grid--withGutter > .Grid-cell {
+.Grid--withGutter > * {
   padding: 0 calc(0.5 * var(--Grid-gutter-size));
 }
-
-/* Grid cell
-   ========================================================================== */
-
-/**
- * No explicit width by default. Rely on combining `Grid-cell` with a dimension
- * utility or a component class that extends 'Grid'.
- *
- * 1. Set flex items to full width by default
- * 2. Fix issue where elements with overflow extend past the
- *    `Grid-cell` container - https://git.io/vw5oF
- */
-
-.Grid-cell {
-  box-sizing: inherit;
-  flex-basis: 100%; /* 1 */
-  min-width: 0; /* 2 */
-}
-
-/**
- * Modifier: horizontally center one unit
- * Set a specific unit to be horizontally centered. Doesn't affect
- * any other units. Can still contain a child `Grid` object.
- */
-
-.Grid-cell--center {
-  margin: 0 auto;
-}