Layout gives more meaning to design which makes it look more appealing, it'll help you maintain a balance between screens.
GZipped: 1.6Kb
ES Module module.js 5.99KB
CommonJS index.js 6.63KB
npm i -D shadow-overlay
pnpm i -D shadow-overlay
yarn add -D shadow-overlay
// index.ts
import "shadow-overlay";| attribute | type |
|---|---|
| opacity | number |
| color | Any css valid color unit |
| margin | Any css size unit |
| gutters | Any css size unit |
| width | Any css size unit |
| disabled | https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled |
| controller | Similar to disabled, controller='true' or just controller will work |
You can use the custom element by using import the main.js file in your <head>
The attribute type should be module
<!DOCTYPE html>
<html>
<head>
<script
type="module"
src="./node_modules/shadow-overlay/dist/module.js"
></script>
</head>
<body>
<grid-overlay /> --> custom element 🎉
</body>
</html>The custom attribute list above contains all attributes that can be passed to the overlay
<grid-overlay color="red" /> --> I'm a red grid now! ⭕⭕⭕⭕| attribute | type |
|---|---|
| start | undefined |
| setOpacity | number between 0 and 1 |
| setColor | any css color |
| setMargin | Any css size unit |
| setGutters | Any css size unit |
| setWidth | Any css size unit |
| setController | boolean |
Import the overlay and start the instance
import { overlay } from "shadow-overlay";
overlay.start();overlay.start();overlay.setOpacity(0.4);overlay.setColor("red");
overlay.setColor("ff0000");
overlay.setColor("hsl(0, 100%, 50%)");
overlay.setColor("rgb(255, 0, 0)");overlay.setMargin("16px");
overlay.setMargin("1em");
overlay.setMargin("1rem");
overlay.setMargin("5ch");
overlay.setMargin("5%");be careful not to use values that are too small or you risk not being able to see the grid
overlay.setWidth("920px");
overlay.setWidth("50rem");
overlay.setWidth("90ch");
overlay.setWidth("90%");overlay.setController(true);