Reset
The framework include a simple reboot to makes browsers render all elements more consistently and in line with modern standards.
- Unset all default style (except display)
- Change box-sizing to
border-boxon all element - Render media as block with a default 100% width
- Change the
overflow-wrapfor text - Set default size and align for
<svg> - Set
<table>default width - Set default cursor for
draggable - Set default cursor and animation for tree
- Enable
scroll-behaviorifprefers-reduced-motionis not set - Set default
<body>setting +inertmode for<dialog> - Set functionalities on
<body>forinertanddata-preloadattributes
To use it, import this file:
scss
@use '@natachah/vanilla-frontend/scss/base/reset';Preload
If you need to disabled the CSS animation on first load of the page add the data attribute data-preload on the <body>.
And then add this script that will remove the attribute after a timeout:
js
setTimeout(() => {
document.body.removeAttribute('data-preload')
}, 10)