Quick Start Labels
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/search/label/starter-code
Starter Code
6
Reading List
https://jackwhiting.co.uk/posts/lazy-loading-vanilla-js-with-webpack-laravel-mix
https://medium.com/free-code-camp/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b
Libraries
https://github.com/verlok/vanilla-lazyload
Developer Resources
https://webpack.js.org/configuration/output/
https://web.dev/articles/preload-critical-assets
Reading List
https://www.codemzy.com/blog/how-to-name-webpack-chunk
How to name a webpack chunk (including split and common chunks)
Reading List
Featured Post
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
Make Your Web App Installable
February 16, 2025How to make your web app installable.
true
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/search/label/project-setup
project-setup
Featured Post
Sidebar Labels
https://vanillawebdev.blogspot.com/search/label/app-component
App Component
1
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/css-tips
CSS Tips
4
https://vanillawebdev.blogspot.com/search/label/data-server
Data Server
2
https://vanillawebdev.blogspot.com/search/label/layout
Layout
1
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/2025/02/ripple-effect-css-js.html
https://vanillawebdev.blogspot.com/2025/02/css-nesting-tips-for-chrome-devtools.html
https://vanillawebdev.blogspot.com/
https://vanillawebdev.blogspot.com/2025/02/overlay-sidebar.html
Overlay Sidebar
February 10, 2025
2025
February
10
01:39 PM
Animation not included.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<style>
.wg-sheet {
* {}
& {
position: fixed;
height: 100vh;
width: 0;
top: 0;
}
.content {
background: ghostwhite;
height: inherit;
width: 300px;
max-width: 100vw;
color: black;
position: absolute;
transform: translateX(-100%);
}
.backdrop {
background: #0000009c;
position: absolute;
height: inherit;
width: 100vw;
transform: translateX(-100%);
opacity: 0;
}
&.open .content {
/* position: absolute; */
/* width: 100%; */
/* transition: opacity 150ms, transform 250ms; */
/* opacity: 1; */
transform: translateX(0rem);
}
&.open .backdrop {
/* transition: opacity 200ms; */
/* transition: opacity 200ms, transform 250ms ease 200ms; */
transform: translateX(0%);
opacity: 1;
}
}
</style>
<!-- # sidebar -->
<div class="wg-sheet _sidebar">
[ .backdrop onclick="toggleSidebar()"]
[ .content
[ .inner {p:0.4rem 0.6rem}
[btn 'close' onclick="toggleSidebar()"]
]
]
</div>
[btn 'open' onclick="toggleSidebar()"]
<script>
function toggleSidebar() {
let $ = document.querySelector.bind(document)
$('._sidebar')?.classList.toggle('open');
}
</script>
</body>
</html>
https://vanillawebdev.blogspot.com/search/label/%40lvc
@lvc
https://vanillawebdev.blogspot.com/search/label/layout
Layout
https://vanillawebdev.blogspot.com/search/label/Web%20Design
Web Design
https://vanillawebdev.blogspot.com/2025/02/ripple-effect-css-js.html
https://vanillawebdev.blogspot.com/2025/02/css-nesting-tips-for-chrome-devtools.html
https://vanillawebdev.blogspot.com/