Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(docs): update grid page to use new layout #683

Merged
merged 2 commits into from
Jan 19, 2022

Conversation

jorgemoya
Copy link
Contributor

What?

Update grid to use new layout. I'm terrible at copy so need help to fill out info.

Screenshots/Screen Recordings

screencapture-localhost-3000-grid-2022-01-18-18_27_32

@jorgemoya jorgemoya requested review from a team as code owners January 19, 2022 00:29
Copy link
Contributor

@chanceaclark chanceaclark left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, looks great.

</Text>
<Panel header="Overview" headerId="overview">
<Text>
<Code primary>Grid</Code> is a two-dimensional grid-based layout system.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's just say something similar as to what is in the Flex PR.

Suggested change
<Code primary>Grid</Code> is a two-dimensional grid-based layout system.
The <Code primary>Grid</Code> component extends the <Code primary>Box</Code> utility component and provides a <Link href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid" external target="_blank" rel="external nofollow noreferrer">CSS grid</Link> container alongside grid properties.

<GuidelinesTable
recommended={[
<>
Use <Link href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS-Tricks complete guide</Link>{' '}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We probably want this on the Flex PR too 🤦

Suggested change
Use <Link href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS-Tricks complete guide</Link>{' '}
Use <Link href="https://css-tricks.com/snippets/css/complete-guide-grid/" external target="_blank" rel="external nofollow noreferrer">CSS-Tricks complete guide</Link>{' '}

Comment on lines +211 to +229
Don’t use <Code primary>Grid</Code> when focusing on content flow. Use{' '}
<NextLink href="flex">Flex</NextLink> instead.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@jorgemoya jorgemoya merged commit fcca1ed into bigcommerce:master Jan 19, 2022
@jorgemoya jorgemoya deleted the update-grid branch January 19, 2022 22:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants