@carbon/grid 10.22.0 → 10.23.0

package/README.md

@@ -70,6 +70,13 @@ The `.bx--col-sm-1` class names tells us that this `<div>` should only span one
 column at our `sm` breakpoint. By default, as we scale beyond the breakpoint the
 layout will still take up a percentage of the overall width.
 
+## 📚 Examples
+
+If you're looking for more examples on how to use `@carbon/grid`, we have some
+examples that you can check out:
+
+- [css-grid](./examples/css-grid)
+
 ## 🙌 Contributing
 
 We're always looking for contributors to help us fix bugs, build new features,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/grid",
   "description": "Grid for digital and software products using the Carbon Design System",
-  "version": "10.22.0",
+  "version": "10.23.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,10 +32,10 @@
   },
   "dependencies": {
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.20.0"
+    "@carbon/layout": "^10.21.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.20.0",
+    "@carbon/cli": "^10.21.0",
     "rimraf": "^3.0.0"
   },
   "eyeglass": {
@@ -44,5 +44,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "d3dc7ca3254a97d52d39ef8d26b9afdbc1235390"
+  "gitHead": "9d5ddba624d9cc7afe54717fd430228349c043e3"
 }

package/scss/modules/_css-grid.scss

@@ -0,0 +1,350 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+@use 'config' as *;
+@use 'breakpoint' as *;
+
+@mixin css-grid() {
+  display: grid;
+  grid-template-columns: repeat(
+    var(--cds-grid-columns),
+    minmax(0, var(--cds-grid-column-size))
+  );
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
+  padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
+  column-gap: var(--cds-grid-gutter);
+}
+
+@mixin subgrid() {
+  display: grid;
+  grid-template-columns: repeat(
+    var(--cds-grid-columns),
+    minmax(0, var(--cds-grid-column-size))
+  );
+  column-gap: var(--cds-grid-gutter);
+}
+
+:root {
+  --cds-grid-columns: 4;
+  --cds-grid-column-size: 1fr;
+  --cds-grid-gutter: 2rem;
+  --cds-grid-hang: 1rem;
+  --cds-grid-margin: 0;
+
+  @include breakpoint(md) {
+    --cds-grid-columns: 8;
+    --cds-grid-margin: 1rem;
+  }
+
+  @include breakpoint(lg) {
+    --cds-grid-columns: 16;
+  }
+
+  @include breakpoint(max) {
+    --cds-grid-margin: 1.5rem;
+  }
+}
+
+.#{$prefix}--css-grid {
+  @include css-grid();
+}
+
+.#{$prefix}--css-grid--12 {
+  @include css-grid();
+  @include breakpoint(lg) {
+    --cds-grid-columns: 12;
+  }
+}
+
+.#{$prefix}--subgrid {
+  @include subgrid();
+}
+
+.#{$prefix}--css-grid--narrow .#{$prefix}--subgrid.#{$prefix}--css-grid {
+  margin-right: 0;
+  margin-left: 0;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.#{$prefix}--css-grid--condensed .#{$prefix}--subgrid.#{$prefix}--css-grid {
+  --cds-grid-gutter: 2rem;
+
+  margin-right: 0;
+  margin-left: 0;
+  padding-right: calc(var(--cds-grid-gutter) / 2);
+  padding-left: calc(var(--cds-grid-gutter) / 2);
+}
+
+// -----------------------------------------------------------------------------
+// Narrow
+// -----------------------------------------------------------------------------
+.#{$prefix}--css-grid--narrow {
+  --cds-grid-margin: 1rem;
+
+  padding-right: var(--cds-grid-margin);
+  padding-left: var(--cds-grid-margin);
+
+  @include breakpoint(md) {
+    padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
+    padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
+  }
+}
+
+.#{$prefix}--css-grid--narrow > [class*='#{$prefix}--col'] {
+  margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
+}
+
+// Narrow subgrid inside condensed
+.#{$prefix}--css-grid--condensed
+  .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow {
+  --cds-grid-gutter: 2rem;
+
+  padding-right: calc(var(--cds-grid-gutter) / 2);
+  padding-left: calc(var(--cds-grid-gutter) / 2);
+}
+
+// -----------------------------------------------------------------------------
+// Condensed
+// -----------------------------------------------------------------------------
+.#{$prefix}--css-grid--condensed {
+  --cds-grid-gutter: 2px;
+
+  column-gap: var(--cds-grid-gutter);
+  row-gap: var(--cds-grid-gutter);
+}
+
+// condensed subgrid inside wide
+.#{$prefix}--css-grid .bx--subgrid.#{$prefix}--css-grid--condensed {
+  margin-right: calc(
+    (var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1
+  );
+  margin-left: calc((var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1);
+}
+
+// -----------------------------------------------------------------------------
+// No Gutter
+// -----------------------------------------------------------------------------
+.#{$prefix}--css-grid--no-gutter {
+  // This is set to 0px (versus 0) so that the calc expression for padding for
+  // a grid container works as epxected. Without the unit, the calc() will
+  // result in a value of 0.
+  // stylelint-disable-next-line length-zero-no-unit
+  --cds-grid-gutter: 0px;
+
+  column-gap: var(--cds-grid-gutter);
+}
+
+// -----------------------------------------------------------------------------
+// Column span
+// -----------------------------------------------------------------------------
+@mixin -column-span($i) {
+  @if $i == 0 {
+    display: none;
+  } @else {
+    --cds-grid-columns: #{$i};
+
+    grid-column: span $i / span $i;
+  }
+}
+
+@for $i from 0 through 16 {
+  .#{$prefix}--col-span-#{$i} {
+    @include -column-span($i);
+  }
+}
+
+.#{$prefix}--col-span-auto {
+  grid-column: auto;
+}
+
+.#{$prefix}--col-span-100 {
+  grid-column: 1 / -1;
+}
+
+@each $name, $value in $grid-breakpoints {
+  $columns: map.get($value, columns);
+
+  @include breakpoint($name) {
+    @for $i from 0 through $columns {
+      .#{$prefix}--#{$name}\:col-span-#{$i} {
+        @include -column-span($i);
+      }
+    }
+
+    .#{$prefix}--#{$name}\:col-span-auto {
+      grid-column: auto;
+    }
+
+    .#{$prefix}--#{$name}\:col-span-100 {
+      grid-column: 1 / -1;
+    }
+  }
+}
+
+.#{$prefix}--col-span-25 {
+  --cds-grid-columns: 1;
+
+  grid-column: span 1;
+
+  @include breakpoint(md) {
+    --cds-grid-columns: 2;
+
+    grid-column: span 2;
+  }
+
+  @include breakpoint(lg) {
+    --cds-grid-columns: 4;
+
+    grid-column: span 4;
+  }
+}
+
+.#{$prefix}--col-span-50 {
+  --cds-grid-columns: 2;
+
+  grid-column: span 2;
+
+  @include breakpoint(md) {
+    --cds-grid-columns: 4;
+
+    grid-column: span 4;
+  }
+
+  @include breakpoint(lg) {
+    --cds-grid-columns: 8;
+
+    grid-column: span 8;
+  }
+}
+
+.#{$prefix}--col-span-75 {
+  --cds-grid-columns: 3;
+
+  grid-column: span 3;
+
+  @include breakpoint(md) {
+    --cds-grid-columns: 6;
+
+    grid-column: span 6;
+  }
+
+  @include breakpoint(lg) {
+    --cds-grid-columns: 12;
+
+    grid-column: span 12;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Column offset
+// -----------------------------------------------------------------------------
+@for $i from 1 through 16 {
+  .#{$prefix}--col-start-#{$i} {
+    grid-column-start: $i;
+  }
+
+  .#{$prefix}--col-end-#{$i} {
+    grid-column-end: $i;
+  }
+}
+
+.#{$prefix}--col-start-auto {
+  grid-column-start: auto;
+}
+
+.#{$prefix}--col-end-auto {
+  grid-column-start: end;
+}
+
+@each $name, $value in $grid-breakpoints {
+  $columns: map.get($value, columns);
+
+  @include breakpoint($name) {
+    @for $i from 1 through $columns {
+      .#{$prefix}--#{$name}\:col-start-#{$i} {
+        grid-column-start: $i;
+      }
+
+      .#{$prefix}--#{$name}\:col-end-#{$i} {
+        grid-column-end: $i;
+      }
+    }
+
+    .#{$prefix}--#{$name}\:col-start-auto {
+      grid-column-start: auto;
+    }
+
+    .#{$prefix}--#{$name}\:col-end-auto {
+      grid-column-start: end;
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Hang
+// -----------------------------------------------------------------------------
+.#{$prefix}--hang {
+  padding-left: var(--cds-grid-hang);
+}
+
+// -----------------------------------------------------------------------------
+// Column gutter
+// -----------------------------------------------------------------------------
+.#{$prefix}--gutter {
+  padding-right: var(--cds-grid-hang);
+  padding-left: var(--cds-grid-hang);
+}
+
+.#{$prefix}--gutter-start {
+  padding-left: var(--cds-grid-hang);
+}
+
+[dir='rtl'] .#{$prefix}--gutter-start {
+  padding-right: var(--cds-grid-hang);
+}
+
+.#{$prefix}--gutter-end {
+  padding-right: var(--cds-grid-hang);
+}
+
+[dir='rtl'] .#{$prefix}--gutter-end {
+  padding-left: var(--cds-grid-hang);
+}
+
+// -----------------------------------------------------------------------------
+// Utilities
+// -----------------------------------------------------------------------------
+
+/// Justify items
+.#{$prefix}--justify-items-start {
+  justify-items: start;
+}
+
+.#{$prefix}--justify-items-end {
+  justify-items: end;
+}
+
+.#{$prefix}--justify-items-center {
+  justify-items: center;
+}
+
+/// Align items
+.#{$prefix}--align-items-start {
+  align-items: start;
+}
+
+.#{$prefix}--align-items-end {
+  align-items: end;
+}
+
+.#{$prefix}--align-items-center {
+  align-items: center;
+}