A collection of no-dependency, drop-in web components.
The package can be found here: https://jsr.io/@nidhugg/web-components and the code is hosted here: https://github.com/fredrikbergqvist/nidhu.gg
npx jsr add @nidhugg/web-componentsyarn dlx jsr add @nidhugg/web-components- Include the script in your HTML file by importing the
node_modules/@nidhugg/web-components/dist/index.js-file from node modules.- Note: The js file is not minified, so ideally you should minify it and add it to your bundle before using it in
production, you can also use the minified version
node_modules/@nidhugg/web-components/dist/index.min.js.
- Note: The js file is not minified, so ideally you should minify it and add it to your bundle before using it in
production, you can also use the minified version
- Add the
node_modules/@nidhugg/web-components/dist/bundle.css-file to your HTML file. This file also has a minified versionnode_modules/@nidhugg/web-components/dist/bundle.min.css. - Add one of the web components to your HTML file. In the example
<nidhugg-image-modal>is used.
<html lang="en">
<body>
<nidhugg-image-modal>
<img
src="roses.webp"
alt="A picture filled with blossoming, red roses"
data-caption="Look at all those pretty roses"
loading="lazy"
width="2250"
height="1500"
/>
<img src="balloon.jpg" alt="A balloon floating over water on a clear starry night" loading="lazy" width="1929" height="1307" />
</nidhugg-image-modal>
</body>
</html>You can get the latest version of the components and styles by including the following script and stylesheet in the <head> of your HTML file.
<html lang="en">
<head>
<title>My page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fredrikbergqvist/nidhu.gg/dist/bundle.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fredrikbergqvist/nidhu.gg/dist/index.min.js" defer></script>
</head>
<body>
<nidhugg-image-modal>
<img
src="roses.webp"
alt="A picture filled with blossoming, red roses"
data-caption="Look at all those pretty roses"
loading="lazy"
width="2250"
height="1500"
/>
<img src="balloon.jpg" alt="A balloon floating over water on a clear starry night" loading="lazy" width="1929" height="1307" />
</nidhugg-image-modal>
</body>
</html>The components make use of the following CSS variables for easy customization:
:root {
--nidhugg-base-100: #2a303c;
--nidhugg-base-200: #242933;
--nidhugg-base-300: #20252e;
--nidhugg-base-400: #1c212b;
--nidhugg-base-500: #0f1216;
--nidhugg-base-content: #fefefe;
--nidhugg-neutral: #1c212b;
--nidhugg-neutral-content: #b2ccd6;
--nidhugg-rounded: 0.5rem;
}Have a look at the documentation for more information.