Today, I launched my personal repository of JavaScript libraries and components. All scripts and libraries in this repository have been created in-house, either as client work or simply as a demo. The libraries range from masonry grids to custom <select> elements to sliders and entire design libraries. All of these components and libraries have been optimized over time for size and performance and zero dependencies, and I am using them in most of my projects.
As I mostly work with back-end development, these libraries are very helpful to me to create interfaces that look modern and behave pixel-perfect on all devices.
There are several sites out there that compile libraries and offer links to their respective authors and GitHub repositories, so I did the same, and I created demo pages, GitHub repositories (if available), and the actual code (if a repository is not available).
This is just the beginning, as I have various more that I am currently using, but they are not standardized yet, I simply copy them from one project to another. Whenever this becomes too tedious, I turn them into libraries, and, if they are big enough, they are getting a GitHub repo and, maybe, an npm link.
Feel free to use any of them in any of your projects, they are GPL-licensed. Here is the list of the initial 12 libraries (alphabetically ordered):
Table of Contents
- Boxed Carousel
- Draggable Carousel
- DragonflyJS
- inView
- Minimal Slider
- Price Range Slider
- RoarJS
- Stackgrid
- tail.select
- Thin Select
- Thin UI
- Tiny
Boxed Carousel
A zero-dependency, vanilla JavaScript boxed carousel.
Draggable Carousel
A zero-dependency, vanilla JavaScript draggable and horizontally scrollable carousel.
DragonflyJS
A tiny vanilla JavaScript library that enables drag and drop functionality with zero dependencies. By implementing this library, a user is able to drag and drop elements and reorder them.
inView
A tiny, tiny vanilla JavaScript lazy loading script that loads images based on screen visibility. Did I say tiny?
Minimal Slider
A minimal responsive JavaScript slider with CSS transitions, autoplay, infinite slides and wrap-around functionality.
Price Range Slider
All JavaScript range sliders are hacks or workarounds. Because there’s no native HTML element for a range slider (only a single value slider), there are lots of libraries and solutions out there.
Mine is the simplest 🤨 and the most fit for my purpose. Feel free to borrow it and improve upon it.
RoarJS
A responsive, customizable, accessible, zero-dependency, vanilla JavaScript alert/confirm replacement. It automatically centers itself on the page and looks great on any device.
Stackgrid
A lightweight, easy to implement and fully responsive vanilla JavaScript Masonry grid. As the screen width changes, the grid automatically adjusts the size and position of the cards to create a seamless and visually appealing layout.
tail.select
A custom replacement for your HTML <select> fields with nothing but vanilla JavaScript!
Thin Select
A custom <select> element with vanilla JavaScript and CSS. Drop your <select> elements inside a <div class="thin-select"></div> element and call it a day.
Thin UI
Thin UI is an opinionated, lightweight UI framework consisting of a Flex-powered column grid and a list of basic components, such as form fields and buttons. Built using a functional CSS approach, which means you get exactly what you ask for, without any hidden surprises. The resulting file size is far smaller than a traditional CSS framework.
Tiny
A custom, tiny confirmation modal dialog with Promise support to your website.
Technical SEO specialist, JavaScript developer and senior full-stack developer. Owner of getButterfly.com.
If you like this article, go ahead and follow me on Twitter or buy me a coffee to support my work!
