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/01/css-classname-in-js.html
https://vanillawebdev.blogspot.com/2024/11/console-log-snippet.html
https://vanillawebdev.blogspot.com/
https://vanillawebdev.blogspot.com/2025/01/css-dialog-form-skin.html
CSS Dialog Form Skin
January 22, 2025
2025
January
22
04:58 PM
To simplify the HTML structure of a dialog form, we can:
limit the use of containers,
use
<br>for spacing,use utility classes sparingly,
use CSS nesting for a consistent dialog form style.
index.html
<dialog open>
<form method="dialog" data-ref="form" class="wg-form-skin1">
[l 'Activity Name' for="i1"]
[in type="text" name="name" placeholder="Short activity" .flex-1 #i1]
[br]
[l 'Target Time' for="i3"]
[in type="text" name="timer" #i3 .flex-1]
[small 'e.g. 1h30m, 20m, 180m, etc.' .opacity-50]
[br]
[br]
[ .flex .justify-end .gap-50
[btn 'OK' value="ok"]
[btn 'Cancel']
]
</form>
</dialog>style.css
.wg-form-skin1 {
br{
content: '';
}
br::after{
content: '';
padding-bottom: 0.6rem;
display: block;
}
label{
font-weight: bold;
font-size: 0.95rem;
padding-bottom:0.4rem;
display: inline-flex;
}
input + small {
display: inline-flex;
padding-top: 0.2rem;
}
input{
width: 100%;
font-size: 1rem;
padding: 0.4rem 0.6rem;
}
}
https://vanillawebdev.blogspot.com/search/label/%40lvc
@lvc
https://vanillawebdev.blogspot.com/search/label/ui
UI
https://vanillawebdev.blogspot.com/2025/01/css-classname-in-js.html
https://vanillawebdev.blogspot.com/2024/11/console-log-snippet.html
https://vanillawebdev.blogspot.com/