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

docs(grid): expands design guidelines for grid layout. #3672

Merged
merged 12 commits into from
Sep 27, 2023

Conversation

edonehoo
Copy link
Collaborator

closes #3585

@edonehoo edonehoo self-assigned this Jul 31, 2023
@edonehoo edonehoo marked this pull request as draft July 31, 2023 15:35
@patternfly-build
Copy link
Contributor

patternfly-build commented Jul 31, 2023

@edonehoo edonehoo changed the title docs: expands design guidelines for grid layout. docs(grid): expands design guidelines for grid layout. Aug 8, 2023
@edonehoo edonehoo marked this pull request as ready for review August 25, 2023 16:53
@edonehoo
Copy link
Collaborator Author

@lboehling @mmenestr


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?]
Copy link
Collaborator

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

Copy link
Collaborator Author

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!

@edonehoo
Copy link
Collaborator Author

edonehoo commented Sep 6, 2023

Lmk how these images work lol I kind of scrapped them together

Copy link
Collaborator

@mmenestr mmenestr left a 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:
Copy link
Collaborator

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.

Copy link
Collaborator Author

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

@mmenestr mmenestr merged commit 9c4d902 into patternfly:main Sep 27, 2023
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Enhance design guidelines for our Layouts pages - Grid
3 participants