<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
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
- Minimal Slider
- Price Range Slider
- Thin Select
- Thin UI
Price Range Slider
Mine is the simplest 🤨 and the most fit for my purpose. Feel free to borrow it and improve upon it.
A custom replacement for your HTML
<select> elements inside a
<div class="thin-select"></div> element and call it a day.
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.
A custom, tiny confirmation modal dialog with Promise support to your website.
If you like this article, go ahead and follow me on Twitter or buy me a coffee to support my work!