-
Notifications
You must be signed in to change notification settings - Fork 137
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
docs(grid): expands design guidelines for grid layout. #3672
Conversation
packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md
Outdated
Show resolved
Hide resolved
packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md
Outdated
Show resolved
Hide resolved
packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md
Outdated
Show resolved
Hide resolved
packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md
Outdated
Show resolved
Hide resolved
packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md
Outdated
Show resolved
Hide resolved
|
||
By adjusting the column span, row span, and order at various [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), you can adapt the grid for different screen sizes. | ||
|
||
[A couple of image examples?] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As a designer, yes I would add image examples to understand. But as a dev, maybe linking to those variables is enough? I'll let Lucia opine haha
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I opted to remove that section, because I don't know how to visualize that info, but lmk if you think it's important to re-add!
Lmk how these images work lol I kind of scrapped them together |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One comment - otherwise looks good!
|
||
Grid items can be ordered in a number of ways to create groups. The span value of all grid items must equal 12, but this can be achieved by combining different section sizes. | ||
|
||
However, by following the rule that all items should span up to 12, the grid can easily be modified and readjusted: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is small but for some reason the "however" feels wrong here, cause you already have the "but this can be achieved..." which already has the positive spin to having to equal 12.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
that's a good catch - I agree! I updated this phrasing, lmk what you think
packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md
Outdated
Show resolved
Hide resolved
packages/documentation-site/patternfly-docs/content/design-guidelines/layouts/grid.md
Outdated
Show resolved
Hide resolved
…delines/layouts/grid.md
…delines/layouts/grid.md
closes #3585