Sure, it’s possible to hit Google looking for solutions. But why not pick from a curated list of awesome resources?
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
- 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.
Read Also: 4 Ways to Create Awesome CSS-Only Accordions