docs: adding CSS patterns for typography, grid, etc for developers #2755
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
✅ Deploy Preview for red-hat-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…terns' into docs/css-assets-patterns
Contributor
|
Size Change: 0 B Total Size: 257 kB ℹ️ View Unchanged
|
bennypowers
reviewed
Nov 17, 2025
zeroedin
reviewed
Nov 17, 2025
Co-authored-by: Steven Spriggs <[email protected]>
adamjohnson
reviewed
Nov 18, 2025
Collaborator
adamjohnson
left a comment
adamjohnson
left a comment
There was a problem hiding this comment.
Is this meant to solve #1432?
| *, | ||
| *:before, | ||
| *:after { | ||
| box-sizing: inherit; /* Make all elements inherit the root's setting */ |
Collaborator
There was a problem hiding this comment.
I see this is the "probably slightly better best practice" you linked to in the PR body; however, when I look at the DP it shows the following:
*,
*:before,
*:after {
box-sizing: border-box;
}Something must not be updating somewhere...?
| } | ||
|
|
||
| /* Remove default margin */ | ||
| :where(body, |
Collaborator
There was a problem hiding this comment.
Any reason to do this over:
* {
margin: 0;
}Not saying one way is better than the other. Curious if there's intent here.
Comment on lines
+30
to
+33
| /* Default scroll behavior */ | ||
| html:focus-within { | ||
| scroll-behavior: smooth; | ||
| } |
Collaborator
There was a problem hiding this comment.
Instead of doing it this way, you might consider:
@media (prefers-reduced-motion: no-preference) {
html:focus-within {
scroll-behavior: smooth;
}
}Then removing lines 43-57.
This way we explicitly allow it when a user has no-preference and don't need to undo it otherwise. Less bytes down the wire.
Collaborator
There was a problem hiding this comment.
We may consider adding:
- Improving media defaults
- Enable keyword animations (add this to the
no-preferenceblock mentioned below, if applicable)
Collaborator
There was a problem hiding this comment.
Pedantic me would love to see these properties alphabetized.
@font-face {
font-family: RedHatDisplay;
font-style: normal;
font-weight: 400;
src: url('path/to/fonts/RedHatDisplay/RedHatDisplay-Regular.woff');
text-rendering: optimizelegibility;
}
/* ...et all... */YMMV.
Collaborator
There was a problem hiding this comment.
These tokens should probably have fallbacks baked in, eg:
- line-height: var(--rh-line-height-heading);
+ line-height: var(--rh-line-height-heading, 1.3);
Collaborator
There was a problem hiding this comment.
Also, consider alphabetizing properties, should it suit you.
|
|
||
| :where(kbd) { | ||
| font-family: var(--rh-font-family-body-text); | ||
| font-size: 1rem; |
Collaborator
There was a problem hiding this comment.
Should this be:
Suggested change
| font-size: 1rem; | |
| font-size: var(--rh-font-size-body-text-md, 1rem); |
?
|
|
||
| ### Red Hat CDN | ||
|
|
||
| If you are on a `*.redhat.com` domain, you can use our CDN to access the Red Hat fonts: |
Collaborator
There was a problem hiding this comment.
Curiously, you can hit this CSS file in your browser if you go to the URL. That said, the actual .woff2 files are blocked by a CORS error for non-Red Hat domains.
| If you are on a `*.redhat.com` domain, you can use our CDN to access the Red Hat fonts: | ||
|
|
||
| ```html code-block {dedent: true, language: "css", highlighting: "prerendered"} | ||
| https://www.redhatstatic.com/dssf-001/v2/@redhat/[email protected]/font.min.css |
Collaborator
There was a problem hiding this comment.
Should this be wrapped in a <link> tag? Or are people meant to copy-paste this URL and see its contents?
<link rel="stylesheet" href="https://www.redhatstatic.com/dssf-001/v2/@redhat/[email protected]/font.min.css">
Collaborator
There was a problem hiding this comment.
This is over 2,000 lines and will get out of date if we ever change rhx-grid.
I would recommend removing this source file in favor of referencing the file in the repo.
Then, add example HTML to show what would be required to use this grid. Something like:
<link rel="stylesheet" href="../path/to/rhx-grid.min.css">
...
<div class="rhx-grid" data-rhx-cols="2xs:2 xs:3 md:4">
<div>Grid Item 1</div>
<div>Grid Item 2</div>
<div>Grid Item 3</div>
<div>Grid Item 4</div>
</div>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What I did
CSS foundationssection to the Get Started: Developers guide with foundational CSS patterns for typography, grid/layout, etc.typography.cssto itsflowlayer instyles.css, since it seems more appropriate.reset.cssto follow a "probably slightly better best practice"Testing Instructions
Notes to Reviewers