centered-css
v1.2.2
Published
A centered, auto-scaling CSS box
Downloads
8
Readme
Centered CSS framework
A centered, auto-scaling CSS box
NPM: https://www.npmjs.com/package/centered-css
Demo: https://tomsoderlund.github.io/centered-css/
Install
yarn add centered-css
Add class centered
on your element that you want centered.
Class centered portrait
will make it in portrait aspect ratio, more suitable for phones.
Import in JavaScript
import '../node_modules/centered-css/dist/centered.min.css'
Optional: Add this for iOS Safari resize fix:
<script type="application/javascript">
// iOS Safari resize fix
function handleResize () { window.document.documentElement.style.setProperty('--vmin', `${Math.min(window.innerWidth, window.innerHeight) * 0.01}px`); };
window.onresize = handleResize;
handleResize();
</script>
or for React:
useLayoutEffect(() => {
// iOS Safari resize fix in React
function handleResize () { window.document.documentElement.style.setProperty('--vmin', `${Math.min(window.innerWidth, window.innerHeight) * 0.01}px`); };
window.addEventListener('resize', handleResize);
handleResize();
return () => window.removeEventListener('resize', handleResize);
}, []);
Update NPM
yarn publish
(Will run yarn prepare
automatically, which builds the /dist
folder)