From 77ea8acc7dfb49970fbec93bbb80338f7376f094 Mon Sep 17 00:00:00 2001 From: Scott Strubberg Date: Wed, 7 Sep 2022 10:46:23 -0500 Subject: [PATCH 1/3] docs(grid): updated with API docs and example --- .../guidelines/2x-grid/implementation.mdx | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/pages/guidelines/2x-grid/implementation.mdx b/src/pages/guidelines/2x-grid/implementation.mdx index fa38493cf05..8554af6a30b 100644 --- a/src/pages/guidelines/2x-grid/implementation.mdx +++ b/src/pages/guidelines/2x-grid/implementation.mdx @@ -30,6 +30,7 @@ guide to start building. Incorporating the shell Alignments Techniques +API Resources @@ -1343,6 +1344,37 @@ Image size can change ratios when the breakpoint changes. +## API + +```css +.component { + display: inline; + + /* applies styles inside mixin on md breakpoint or below, like max-width */ + @include carbon--breakpoint-down('md') { + display: none; + } +} +``` + +| Name | Description | Type | Default | +| :----------------------- | :---------------------------------------------------------------------------------- | :---------- | :------------ | +| `css-grid` | Generate the CSS for using the CSS Grid | `@mixin` | | +| `$prefix` | Specify the prefix used for CSS selectors | `String` | `'cds'` | +| `$flex-grid-columns` | Specify the number of columns for the flex grid | `Number` | `16` | +| `$grid-gutter` | Specify the gutter of the grid | `Number` | `32px (2rem)` | +| `$grid-gutter-condensed` | Specify the gutter of the condensed grid | `Number` | `1px` | +| `$grid-breakpoints` | Specify the breakpoints for the grid | `Map` | | +| `breakpoint-next` | Get the value of the next breakpoint | `@function` | | +| `breakpoint-prev` | Get the value of the previous breakpoint | `@function` | | +| `is-smallest-breakpoint` | Check to see if the given breakpoint is the smallest breakpoint | `@function` | | +| `is-largest-breakpoint` | Check to see if the given breakpoint is the largest breakpoint | `@function` | | +| `breakpoint-up` | Generate a media query from the width of the given breakpoint to infinity | `@mixin` | | +| `breakpoint-down` | Generate a media query that applies below the maximum width of the given breakpoint | `@mixin` | | +| `breakpoint-between` | Generate a media query for the range between the lower and upper breakpoints | `@mixin` | | +| `largest-breakpoint` | Generate a media query for the largest breakpoint | `@mixin` | | +| `breakpoint` | Generate a media query for a given breakpoint, alias of `breakpoint-up` | `@mixin` | | + ## Resources From a85aeaff832761fe392eb2551b2537dea2551a54 Mon Sep 17 00:00:00 2001 From: Scott Strubberg Date: Wed, 7 Sep 2022 11:12:11 -0500 Subject: [PATCH 2/3] docs(grid): better description --- src/pages/guidelines/2x-grid/implementation.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/pages/guidelines/2x-grid/implementation.mdx b/src/pages/guidelines/2x-grid/implementation.mdx index 8554af6a30b..d613611c179 100644 --- a/src/pages/guidelines/2x-grid/implementation.mdx +++ b/src/pages/guidelines/2x-grid/implementation.mdx @@ -1346,6 +1346,11 @@ Image size can change ratios when the breakpoint changes. ## API +There are many ways to make the 2x Grid work for your application using our API. +The example below illustrates removing visibility of a given component based on +the maximum width of the `md` breakpoint. Check out the table to learn more +about our API. + ```css .component { display: inline; From 622d27d7e88c38df047ead2b5ba1394bdca23b32 Mon Sep 17 00:00:00 2001 From: Scott Strubberg Date: Fri, 9 Sep 2022 16:24:46 -0500 Subject: [PATCH 3/3] docs(grid): progressive disclosure and helpers --- .../guidelines/2x-grid/implementation.mdx | 59 ++++++++++++------- 1 file changed, 38 insertions(+), 21 deletions(-) diff --git a/src/pages/guidelines/2x-grid/implementation.mdx b/src/pages/guidelines/2x-grid/implementation.mdx index d613611c179..ef8e0be4b48 100644 --- a/src/pages/guidelines/2x-grid/implementation.mdx +++ b/src/pages/guidelines/2x-grid/implementation.mdx @@ -30,7 +30,7 @@ guide to start building. Incorporating the shell Alignments Techniques -API +API & Helpers Resources @@ -1344,12 +1344,11 @@ Image size can change ratios when the breakpoint changes. -## API +## API & Helpers There are many ways to make the 2x Grid work for your application using our API. The example below illustrates removing visibility of a given component based on -the maximum width of the `md` breakpoint. Check out the table to learn more -about our API. +the maximum width of the `md` breakpoint. ```css .component { @@ -1362,23 +1361,21 @@ about our API. } ``` -| Name | Description | Type | Default | -| :----------------------- | :---------------------------------------------------------------------------------- | :---------- | :------------ | -| `css-grid` | Generate the CSS for using the CSS Grid | `@mixin` | | -| `$prefix` | Specify the prefix used for CSS selectors | `String` | `'cds'` | -| `$flex-grid-columns` | Specify the number of columns for the flex grid | `Number` | `16` | -| `$grid-gutter` | Specify the gutter of the grid | `Number` | `32px (2rem)` | -| `$grid-gutter-condensed` | Specify the gutter of the condensed grid | `Number` | `1px` | -| `$grid-breakpoints` | Specify the breakpoints for the grid | `Map` | | -| `breakpoint-next` | Get the value of the next breakpoint | `@function` | | -| `breakpoint-prev` | Get the value of the previous breakpoint | `@function` | | -| `is-smallest-breakpoint` | Check to see if the given breakpoint is the smallest breakpoint | `@function` | | -| `is-largest-breakpoint` | Check to see if the given breakpoint is the largest breakpoint | `@function` | | -| `breakpoint-up` | Generate a media query from the width of the given breakpoint to infinity | `@mixin` | | -| `breakpoint-down` | Generate a media query that applies below the maximum width of the given breakpoint | `@mixin` | | -| `breakpoint-between` | Generate a media query for the range between the lower and upper breakpoints | `@mixin` | | -| `largest-breakpoint` | Generate a media query for the largest breakpoint | `@mixin` | | -| `breakpoint` | Generate a media query for a given breakpoint, alias of `breakpoint-up` | `@mixin` | | +In addition, you can also use Helpers to control what is being displayed on the +screen at a given breakpoint. + +```css +@use '@carbon/styles/scss/utilities/helper-classes'; + +.my-class { + @include helper-classes.hide-at-sm(); +} +``` + +Checkout the [resources](#resources) section for links to +[the helpers on storybook](https://react.carbondesignsystem.com/?path=/story/helpers-hideatbreakpoint--hide-at-breakpoint) +and the full +[API list on Github](https://github.com/carbon-design-system/carbon/blob/main/packages/grid/docs/sass.md#api). ## Resources @@ -1411,6 +1408,26 @@ about our API. + + + + + + + + + + + + + +