From cd343a512988385fbffe900f79b3e502b9927a57 Mon Sep 17 00:00:00 2001 From: harriplappalainen Date: Tue, 21 Nov 2023 13:12:09 +0200 Subject: [PATCH 1/2] Update grid and breakpoint docs about Header max width --- site/src/docs/foundation/design-tokens/breakpoints/index.mdx | 4 ++-- site/src/docs/foundation/guidelines/grid.mdx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/site/src/docs/foundation/design-tokens/breakpoints/index.mdx b/site/src/docs/foundation/design-tokens/breakpoints/index.mdx index e9cb811d0b..abe6856ad5 100644 --- a/site/src/docs/foundation/design-tokens/breakpoints/index.mdx +++ b/site/src/docs/foundation/design-tokens/breakpoints/index.mdx @@ -39,6 +39,6 @@ The breakpoint tokens are divided into two sets; - **Breakpoint tokens** define exact widths (in pixels) where the next breakpoint comes into effect. - **Container width token** defines maximum container width. -When breakpoints change the left and right padding of the container changes. It is recommended to use the provided padding values because they match with HDS Navigation and HDS Footer paddings. You can find these paddings on the HDS Breakpoints tokens tab. +When breakpoints change the left and right padding of the container changes. It is recommended to use the provided padding values because they match with HDS Footer paddings. You can find these paddings on the HDS Breakpoints tokens tab. -The maximum content container width is always `--container-width-xl` (1200px). When the viewport width is below this value, the content container always takes all available space. +The maximum content container width is always `--container-width-xl` (1200px). When the viewport width is below this value, the content container always takes all available space. Note that the Header component is an exception with maximum width of 1440 pixels so it should not be placed inside the grid container. diff --git a/site/src/docs/foundation/guidelines/grid.mdx b/site/src/docs/foundation/guidelines/grid.mdx index 1ffdcf5d59..6dc6b4f254 100644 --- a/site/src/docs/foundation/guidelines/grid.mdx +++ b/site/src/docs/foundation/guidelines/grid.mdx @@ -22,6 +22,7 @@ import InternalLink from '../../../components/InternalLink'; ## Principles - HDS uses a standard 12 column grid whose maximum width is 1200 pixels. Container width and the number of columns change each breakpoint. + - The Header component is an exception with maximum width of 1440 pixels so it should not be placed inside the grid container. - Larger screen sizes use 24-pixel gutters while on mobile screen widths they shrink to 16 pixels and eventually to 12 pixels in the smallest breakpoint. - Even though HDS does not include grid implementation, it recommends and suggests methods how to handle changing amount of columns and column stacking. See [Layout columns](#layout-columns) for more information. - HDS also offers a Container component that helps to follow breakpoints and container widths. For more info refer to Breakpoints documentation. From 59c22f3f697cbc41cb6cb5eb69576dc9513559c1 Mon Sep 17 00:00:00 2001 From: harriplappalainen Date: Mon, 11 Dec 2023 08:48:49 +0200 Subject: [PATCH 2/2] HDS-2032 Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 52dab85eb6..7c1253e194 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -59,6 +59,7 @@ Changes that are not related to specific components Changes that are not related to specific components - [Component] What has been changed +- Updated grid documentation with information about the new Header #### Fixed