feat(grid): add elements grid (#1823)

* chore(grid): remove experimental * feat(feature-flag): add grid-columns-16 flag * test(jest): add flags to inline data * feat(grid): add elements grid * feat(feature-flag): add grid-columns-16 flag * chore: update grid demo * docs(grid): add initial v10 docs
carbon-design-system · Feb 14, 2019 · 3b0b176 · 3b0b176
1 parent 58169e4
commit 3b0b176
Show file tree

Hide file tree

Showing 18 changed files with 1,660 additions and 801 deletions.
diff --git a/demo/scss/demo.scss b/demo/scss/demo.scss
@@ -173,15 +173,19 @@
       outline: 1px solid #97c1ff;
       height: 80px;
     }
-  
+
     .inside {
       background-color: #edf4ff;
       height: 100%;
     }
-  
+
     [class*='col'] {
       outline: 1px dashed #97c1ff;
     }
+
+    display: block;
+    padding: 0;
+    max-width: 100%;
   }
 
   .#{$prefix}--grid {

diff --git a/src/components/grid/grid.config.js b/src/components/grid/grid.config.js
@@ -31,18 +31,18 @@ module.exports = {
       },
       {
         breakpoint: 'lg',
-        columns: Array.from({ length: 16 }),
-        title: 'Large (16 columns @ 1312px)',
+        columns: Array.from({ length: 12 }),
+        title: 'Large (12 columns @ 1312px)',
       },
       {
         breakpoint: 'xlg',
-        columns: Array.from({ length: 16 }),
-        title: 'X-Large (16 columns @ 1312px)',
+        columns: Array.from({ length: 12 }),
+        title: 'X-Large (12 columns @ 1312px)',
       },
       {
         breakpoint: 'max',
-        columns: Array.from({ length: 16 }),
-        title: 'Max (16 columns @ 1584px)',
+        columns: Array.from({ length: 12 }),
+        title: 'Max (12 columns @ 1584px)',
       },
     ],
   },
@@ -51,5 +51,37 @@ module.exports = {
       name: 'default',
       label: 'Grid',
     },
+    {
+      name: '16',
+      context: {
+        rows: [
+          {
+            breakpoint: 'sm',
+            columns: Array.from({ length: 4 }),
+            title: 'Small (4 columns @ 320px)',
+          },
+          {
+            breakpoint: 'md',
+            columns: Array.from({ length: 8 }),
+            title: 'Medium (8 columns @ 672px)',
+          },
+          {
+            breakpoint: 'lg',
+            columns: Array.from({ length: 16 }),
+            title: 'Large (16 columns @ 1316px)',
+          },
+          {
+            breakpoint: 'xlg',
+            columns: Array.from({ length: 16 }),
+            title: 'X-Large (16 columns @ 1316px)',
+          },
+          {
+            breakpoint: 'max',
+            columns: Array.from({ length: 16 }),
+            title: 'Max (16 columns @ 1584px)',
+          },
+        ],
+      },
+    },
   ],
 };
diff --git a/src/components/grid/grid.hbs b/src/components/grid/grid.hbs
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the