{"id":29068,"date":"2017-01-31T20:01:46","date_gmt":"2017-01-31T12:01:46","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29068"},"modified":"2023-04-06T21:53:55","modified_gmt":"2023-04-06T13:53:55","slug":"dont-need-js","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/dont-need-js\/","title":{"rendered":"GitHub Page With Non-JS Alternatives for Common UI Features"},"content":{"rendered":"

How many times have you wanted to build a quick CSS-only slideshow or modal window<\/strong>? These are some of the most common UI elements<\/strong> on the web and nowadays you can build them without any JavaScript.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t20 Cool Stuff Built Using CSS<\/a>\n\t\t\t\t<\/p>\n

Sure, it\u2019s possible to hit Google looking for solutions. But why not pick from a curated list<\/strong> of awesome resources?<\/p>\n

That\u2019s where this GitHub page<\/a> comes into play. It\u2019s titled \"You Don\u2019t Need JavaScript\"<\/strong>, and it offers a huge list of workable solutions for common interface elements<\/strong>.<\/p>\n

\"preview<\/a><\/figure>\n

One thing to note is that these codes are not end-all be-all solutions<\/strong>.<\/p>\n

Not everything in the list supports all browsers, and many of these solutions aren\u2019t fully capable of handling graceful degradation or issues with mobile browsers. So you\u2019ll need to vet each one individually<\/strong> on a case-by-case basis.<\/p>\n

However if you\u2019re dying for pure CSS solutions<\/strong> then this GitHub has you covered.<\/p>\n

The list features over 20 different UI elements<\/strong> with many prominent solutions, such as:<\/p>\n

    \n
  • Hamburger menus<\/li>\n
  • Tooltips<\/li>\n
  • Tabs<\/li>\n
  • Image galleries<\/li>\n
  • Dropdown menus<\/li>\n
  • And so much more.<\/li>\n<\/ul>\n

    Each project links out to a CodePen demo<\/strong> where you can see it live<\/strong> along with sample source code<\/strong>.<\/p>\n

    Note this specific GitHub repo doesn\u2019t have any actual code<\/strong> in it. Rather it\u2019s just a list of CodePen demos<\/strong> featuring non-JS solutions to common interface problems<\/strong>.<\/p>\n

    This is the perfect resource to bookmark for future reference and keep close by if needed.<\/p>\n

    You\u2019re free to contribute by contacting anyone from the main GitHub page<\/a><\/strong> if you have ideas or suggestions for new resources.<\/p>\n