Web Layout Explanation
Front-End Setup Overview
Font Settings
- Traditional Chinese fonts: Google Noto Sans TC and Google Noto Serif TC.
- English fonts: Roboto (sans-serif).
- For multilingual setups, fonts will be configured using Google Fonts for optimal compatibility.
UI Settings
Mainly used for form styling. Bootstrap CSS will be applied with my own adjustments. Please inform me if you have specific styling preferences, thank you.
Web Framework Settings
Bootstrap will be installed by default to handle front-end interactions such as carousels or modals, making slicing smoother. (Bootstrap will not be used as a full development framework.)
Vue3 + Vite / Nuxt
Only minimal npm installations are applied for slicing purposes. Since I only handle layout conversion, advanced front-end development should be done by a dedicated developer.
Post-Slicing Testing Guidelines
Desktop Testing
As laptop screen resolutions increase, manufacturers often scale up system fonts, which can cause discrepancies between mockups and the final layout. Please set display scaling to 100% and resolution to 1920x1080 for best consistency.
Tablet Testing
Tablet devices vary greatly in size and ratio. Please test using mainstream devices to avoid layout inconsistencies caused by niche models.
Mobile Testing
Please provide the minimum acceptable mobile resolution to help define responsive breakpoints and ensure complete mobile testing coverage.
Special Notes
1. My default RWD breakpoints are:
Desktop: min-width 1190px
Tablet: min-width 576px to max-width 1190px
Mobile: max-width 576px
2. Upon request, I can provide HAML, JS, and partial Dart SCSS files. The complete Dart SCSS cannot be shared as it represents years of personal refinement. Thank you for your understanding.