search

locomotivemtl / locomotive-boilerplate

🚂 Front-end boilerplate for projects by Locomotive.
https://locomotivemtl-boilerplate.vercel.app/
MIT License
455 stars 71 forks source link

Viewport sizes fallbacks #166

Closed lucasvallenet closed 6 months ago

lucasvallenet commented 6 months ago

Javascript support

Automatically add vw unit to avoid bugs with scrollbar: <html style="--vw: [1 vw];">

If not supported by the browser, add and update viewport sizes variables (CSS custom properties) to the html DOM element on app init and window resize: <html style="--svh: [1 svh]; --lvh: [1 lvh]; --dvh: [1 dvh];">

Scss functions

Add scss functions to use dynamic viewport sizes with fallbacks in styles/tools/functions.scss: Small viewport height: svh() Large viewport height: lvh() Dynamic viewport height: dvh() Viewport width: vw()

Recomended use

Always use the scss functions to ensure cross-browser compatibility:

.container {
    width: vw(100);
    height: svh(100);
}
mcaskill commented 6 months ago

Removing myself from reviewers; this topic is beyond my realm of understanding.

cloudflare-pages[bot] commented 6 months ago

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 276b5ee
Status: âœ…  Deploy successful!
Preview URL: https://2aad9f75.locomotive-boilerplate.pages.dev
Branch Preview URL: https://feature-viewport-units.locomotive-boilerplate.pages.dev

View logs