GitHub Page With Non-JS Alternatives for Common UI Features
Discover how to build a website without JavaScript. Learn the benefits and limitations of going script-free. Improve your web development skills today.
How many times have you wanted to build a quick CSS-only slideshow or modal window? These are some of the most common UI elements on the web and nowadays you can build them without any JavaScript.
Read Also: 20 Cool Stuff Built Using CSS
Sure, it’s possible to hit Google looking for solutions. But why not pick from a curated list of awesome resources?
That’s where this GitHub page comes into play. It’s titled "You Don’t Need JavaScript", and it offers a huge list of workable solutions for common interface elements.
One thing to note is that these codes are not end-all be-all solutions.
Not everything in the list supports all browsers, and many of these solutions aren’t fully capable of handling graceful degradation or issues with mobile browsers. So you’ll need to vet each one individually on a case-by-case basis.
However if you’re dying for pure CSS solutions then this GitHub has you covered.
The list features over 20 different UI elements with many prominent solutions, such as:
- Hamburger menus
- Tooltips
- Tabs
- Image galleries
- Dropdown menus
- And so much more.
Each project links out to a CodePen demo where you can see it live along with sample source code.
Note this specific GitHub repo doesn’t have any actual code in it. Rather it’s just a list of CodePen demos featuring non-JS solutions to common interface problems.
This is the perfect resource to bookmark for future reference and keep close by if needed.
You’re free to contribute by contacting anyone from the main GitHub page if you have ideas or suggestions for new resources.
You’re free to copy any source code from any of these demos and reuse them in your projects.
Just make sure that you check the CSS properties tab before copying anything because some contain extra libraries.
Overall, this is one fantastic GitHub repo and it’s much easier to use than scouring Google for that one perfect solution.
Check the full GitHub page here, and if you want to view all potential changes you can see those in the pull requests tab.