docs: Add fluid responsive design demo #58
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR adds an interactive fluid responsive design demo component to enhance documentation by providing a visual, hands-on example of how typography and layouts scale smoothly across viewport sizes using mathematical interpolation.
Key Changes:
- Introduced
FluidResponsiveDesignDemo.vuecomponent with interactive viewport slider and real-time scaling preview - Integrated the demo into fluid design documentation, Pro overview, and main index pages
- Removed redundant border class from index.md page section
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 8 comments.
| File | Description |
|---|---|
apps/docs/app/components/content/demo/FluidResponsiveDesignDemo.vue |
New interactive demo component showcasing fluid typography scaling with viewport adjustment controls |
apps/docs/content/docs/04.design-tokens/06.fluid-design/01.index.md |
Embedded fluid design demo into the fluid design documentation section |
apps/docs/content/pro.md |
Added demo to Pro overview page to highlight fluid design as a premium feature |
apps/docs/content/index.md |
Integrated demo into main index page and simplified border styling on page section |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
apps/docs/app/components/content/demo/FluidResponsiveDesignDemo.vue
Outdated
Show resolved
Hide resolved
apps/docs/app/components/content/demo/FluidResponsiveDesignDemo.vue
Outdated
Show resolved
Hide resolved
apps/docs/app/components/content/demo/FluidResponsiveDesignDemo.vue
Outdated
Show resolved
Hide resolved
| </p> | ||
| <div | ||
| class="cards flex gap-4" | ||
| :class="screenWidth < 768 ? 'flex-col' : 'flex-row'" |
There was a problem hiding this comment.
Inconsistent breakpoint value. The template uses 768px as the threshold for switching card layout, but this value doesn't match any of the breakpoints used in viewportLabel (576, 992, 1200). Consider using a consistent breakpoint value or extracting all breakpoint values as named constants.
| const h1Min = baseFontSizeMin * getScalePower(2, true); | ||
| const h1Max = baseFontSizeMax * getScalePower(2, false); |
There was a problem hiding this comment.
Inconsistent scale power calculation for h1 size. In fluidFontSizes computed (lines 46-48), h1 uses getScalePower(4, ...), but here in actualSizes it uses getScalePower(2, ...). This will cause the displayed size values to differ from the actual rendered sizes, leading to incorrect information shown to users.
| const h1Min = baseFontSizeMin * getScalePower(2, true); | |
| const h1Max = baseFontSizeMax * getScalePower(2, false); | |
| const h1Min = baseFontSizeMin * getScalePower(4, true); | |
| const h1Max = baseFontSizeMax * getScalePower(4, false); |
apps/docs/app/components/content/demo/FluidResponsiveDesignDemo.vue
Outdated
Show resolved
Hide resolved
…o.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…o.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…o.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…o.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…o.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
This pull request introduces a new interactive demo component for fluid responsive design and integrates it into multiple documentation pages to illustrate how typography and layout scale fluidly across different viewport sizes. The main focus is on enhancing the documentation experience by providing a live, visual example of fluid design principles in action.
Key changes:
New Component Implementation
FluidResponsiveDesignDemo.vue, which demonstrates fluid scaling of typography and card elements based on viewport width. The component uses mathematical calculations to interpolate font sizes and scale ratios, allowing users to interactively adjust the viewport and observe real-time changes.Documentation Enhancements
FluidResponsiveDesignDemocomponent into the fluid design documentation page (01.index.md) to provide readers with a hands-on example of fluid responsive design. [1] [2]index.md) to showcase fluid design as a core feature, and made a minor section border adjustment for improved layout. [1] [2]pro.md) to highlight fluid responsive design as a foundational feature of the premium offering.