docs: Oryx's Responsive Design system #2214
Merged
Conversation
This file contains 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
tobi-or-not-tobi
requested review from
andriitserkovnyi and
tolerants
as code owners
Sinucid
reviewed
Oct 3, 2023
.../front-end-development/202307.0/oryx/building-applications/styling/oryx-responsive-design.md
Outdated
Show resolved
Hide resolved
.../front-end-development/202307.0/oryx/building-applications/styling/oryx-responsive-design.md
Outdated
Show resolved
Hide resolved
.../front-end-development/202307.0/oryx/building-applications/styling/oryx-responsive-design.md
Outdated
Show resolved
Hide resolved
.../front-end-development/202307.0/oryx/building-applications/styling/oryx-responsive-design.md
Outdated
Show resolved
Hide resolved
.../front-end-development/202307.0/oryx/building-applications/styling/oryx-responsive-design.md
Outdated
Show resolved
Hide resolved
.../front-end-development/202307.0/oryx/building-applications/styling/oryx-responsive-design.md
Outdated
Show resolved
Hide resolved
.../front-end-development/202307.0/oryx/building-applications/styling/oryx-responsive-design.md
Outdated
Show resolved
Hide resolved
Sinucid
previously approved these changes
Oct 5, 2023
Sinucid
reviewed
Oct 9, 2023
.../front-end-development/202307.0/oryx/building-applications/styling/oryx-responsive-design.md
Outdated
Show resolved
Hide resolved
.../front-end-development/202307.0/oryx/building-applications/styling/oryx-responsive-design.md
Outdated
Show resolved
Hide resolved
|
|
||
| While the `xs` and `xl` sizes are available in the TypeScript enumeration, they are not used in most Oryx components and layouts. However, you can use the definitions to create an optimized user experience for these screen sizes. Moreover, you can introduce additional screen sizes if needed. | ||
|
|
||
| The actual screen definition is provided by a breakpoint configuration and can be referenced by their code. If you need to use the screen definitions in your custom code, you can use `ScreenService` provided by the [layout package](https://www.npmjs.com/package/@spryker-oryx/layout). |
There was a problem hiding this comment.
Who are you referencing to by their?
.../front-end-development/202307.0/oryx/building-applications/styling/oryx-responsive-design.md
Outdated
Show resolved
Hide resolved
| ### Inline stylesheets | ||
|
|
||
| In the following example, style rules are added for small screens (`sm`) only. | ||
| The disadvantage of adding styles to the component definition is the instant effect when the application is bootstrapped. In most cases, we recommend dynamically importing the styles so that they're only loaded when the component is used. |
There was a problem hiding this comment.
Could you elaborate on the instant effect? I feel like there is something wrong here, but need more info to figure it out
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.
Learn how to leverage Oryx's Responsive Design system to create stunning and user-friendly websites and applications that seamlessly adapt to different screen sizes and devices.
closes HRZ-2164