Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Docs: 1px grid update (carbon-design-system#1736)
Browse files Browse the repository at this point in the history
* docs: 1px grid update

* docs: border update

Co-authored-by: Alessandra Davila <aledavila@ibm.com>
2 people authored and natashadecoste committed May 19, 2021
1 parent 21470cb commit 23b41b6
Showing 1 changed file with 10 additions and 4 deletions.
14 changes: 10 additions & 4 deletions src/pages/guidelines/2x-grid/implementation.mdx
Original file line number Diff line number Diff line change
@@ -554,7 +554,7 @@ containers and certain components to “hang” into the gutter.
<Row>
<Column colLg={2} colMd={2}>

**Condensed**<br/> 2px gutter
**Condensed**<br/> 1px gutter

</Column>
<Column colLg={10} colMd={6}>
@@ -710,12 +710,18 @@ Wide and a Narrow grid scenario in the [Mix and match](#mix-and-match) section.

### The Condensed grid

The Condensed grid collapses the gutter to 2px. To achieve this, containers and
The Condensed grid collapses the gutter to 1px. To achieve this, containers and
components bleed 16px into the gutter on either side of the column. This grid
mode is most often used in conjunction with another grid mode and arguably
requires the most design skill to incorporate into layouts.

Rows that are adjacent will have a 2px of margin between them to match gutter.
In order to emphasize the gutters, 1px borders that are darker than the
background color (in both light and dark themes), must be added to any tiles or
cards. The borders add just enough clarity to the gutters to stand out, while
still registering to the user as the background color. The token for these
borders is `$ui-03`.

Rows that are adjacent will have a 1px of margin between them to match gutter.
Use vertical helpers here.

<Row>
@@ -758,7 +764,7 @@ UI. See it in action on the
As mentioned above, fixed components with labels, such as input fields and
dropdowns, should not hang into the gutter.

![2px gutter](images/2px_gutter.png)
![1px gutter](images/2px_gutter.png)

<DoDontRow>
<DoDont caption="Do keep all type (inside and outside containers) aligned with the column grid.">

0 comments on commit 23b41b6

Please sign in to comment.