This project has existed on Github for a while, but I want to make it more public so, here it is.

Indium is as of right now a small project to make creating relatively simple things really quickly and effortlessly, such as a popup element or a gallery with navigation.

Features

Right now it has classes for pop-up windows, dialogue windows, drop-down menus, a gallery, a label and an image and video file upload preview.

Pop-up windows

So as the name suggests there is a class to easily create and use a pop-up window by instantiating PopWindow with a reference to an element and an element to close the window. This is the class that I've used the most times since I made it, and honestly it's so easy to create them now, before I would have to recreate the system for each page and obviously website project each time I needed one, now its a simple line of code, and a second line to open it with a button.

Dialogue

Dialogue's are essentially the same as a pop-up window, but instead of having a button to close the window, you just have the original button you clicked to open it, and the rest of the screen, clicking anywhere outside the window except the button you clicked to open will close it.

Drop-down's

Drop-down's are again in the name, its just a drop-down menu like a select element, but you can put elements inside it, it functions exactly the same as a select, it opens directly below the button, or in another place if there is no space, and closes if you click anything other than the drop-down or the button you clicked to open it.

Gallery

The gallery system is a bit more complex than the other ones, its a system that lets you have a gallery on a page, but you can click the images to expand them to see the full image at a higher resolution across the screen. It obviously also has functionality to go to the next and previous image in the container of all the images. It would be better to see a live example, which there is one here on https://pi0h1.com/gallery, a website I recently updated, and switched from my old Javascript over to Indium.

Labels

Labels are pretty simple, they just open above the element they were opened by, so if you wanted to provide clarification on what something means on your website, you could make the word/phrase a link for example, and on click it could open a label which would have some text clarifying whatever the text means.

Image & Video preview

This was as of now the most recent addition to Indium, essentially, when uploading an image or video, especially when uploading multiple you may want to preview the image/video before you upload it, with this class, you can really easily and efficiently, just instantiate the class with the reference to the file input and the preview container and it will automatically add the images when you select them.

So there we are as of current this is a long explanation of each class that exists in Indium!