CSS is powerful, you can do a lot of things without JS.

  • By You Don't Need
  • Last update: Jan 9, 2023
  • Comments: 8

English | 简体中文

You Don't Need JavaScript

Join the community on Spectrum

Please note these demos should be considered as CSS "Proofs of Concepts". They may have serious issues from accessibility point of view (keyboard navigation, speech synthesis, etc.), or progressive enhancement/degradation/etc.

Style Guide:

## Subject

[<img src="images/image1.png" height="230" title="Demo 1">](http://url-to-page)
[<img src="images/image2.png" height="230" title="Demo 2">](http://url-to-page)
[<img src="images/image3.png" height="230" title="Demo 3">](http://url-to-page)

***
&nbsp;

 

Quick links

  1. Accordion / Toggle
  2. Carousel
  3. Counter of checked check-boxes
  4. Flip on click
  5. Floating label on Textfield
  6. Font-Face (Latin)
  7. Info on hover/ Popover
  8. Image Gallery
  9. Loaders
  10. Dropdown Menu
  11. Mobile menu off canvas
  12. Burger menu
  13. Fancy menu
  14. Modal/Popup
  15. Mouse tracking
  16. Parallax scrolling
  17. Tabs
  18. Todo List
  19. Tooltips
  20. Treeview
  21. Twitter Heart Animation
  22. Dynamic Image Colorizing
  23. Ripple Effect
  24. Responsive Counter Showing # of Items That Didn't Fit Screen
  25. Neumorphism Card Design

Accordion / Toggle

back to top


 

Carousel

back to top


 

Counter of checked check-boxes

back to top


 

Flip on click

back to top


 

Floating label on Textfield

back to top


 

Font-Face (Latin)

back to top


 

Info on hover/ Popover

back to top


 

Image Gallery

back to top


 

Loaders

back to top


 

Dropdown Menu

back to top


 

Mobile menu off canvas

back to top


 

Burger Menu

back to top


 

Fancy Menu

back to top


 

Modal/Popup

back to top


 

Mouse tracking

back to top


 

Parallax scrolling

back to top


 

Tabs

back to top


 

Todo List

back to top


 

Tooltips

Treeview

back to top


 

Twitter Heart Animation

back to top


 

Dynamic Image Colorizing

back to top


 

Ripple Effect

back to top


 

Responsive Counter Showing # of Items That Didn't Fit Screen

back to top


 

Neumorphism Card Design

back to top


 

Contributing

Welcome to contribute to this project. Send us a Pull Request now!

Github

https://github.com/you-dont-need/You-Dont-Need-JavaScript

Comments(8)

  • 1

    HTML files for demos

    The demos should be accessible without JS, as mentioned in #29. I didn't port all the examples because there are assets used in the demos, and I'm not sure if there is a license for them.

  • 2

    user-select: none;

    I think add in the css code:

    body {
        user-select: none;
    }
    

    will be better, because when I quickly click on these stuff will not appear like when the double click on the selected character style. My English is not good enough, hope you can understand what I mean.:joy:

  • 3

    Added Nuemorphism cards to the list

    Hi Bro, I have developed Nuemorphism card Design and added it.

    • [x] Changed the readme.md with my project at the last.
    • [x] added my file nuemorphism-card-design.html to examples folder.
    • [x] added my image nuemorphism-card-design.gif to images folder.

    Hope It Helps Savio Martin

  • 4

    Mention of accessibility issues of these demos

    Hi there,

    these demos are really interesting from a CSS Proof of Concept or technical point of view, but are a real nonsense from accessibility point of view.

    Please mention it before it comes to production and create problems for people who need accessible solutions.

    Kind regards, Nicolas

  • 5

    Add compatibility information.

    This repo is awesome, this could be replacing some basic js library (accordion, tab). But, please add browsers compatibility information. e.g Flex isn't supported yet in many old browser like IE8.

    If you add compatibility info, frontend developers could add fallback (polyfill) for old browsers.

  • 6

    Browser compatibility

    It would be awesome if this page had a browser-compatibility table that not just shows that these things work in css but also that they work cross/browser/platform.

  • 7

    Another awesome demo

    http://codepen.io/ekrof/pen/YqmXdQ

    It has at least two additional examples not covered by existing demos:

    • tooltip on click (aka popover)
    • side navigation menu
  • 8

    add my darkmode

    Description: It's a switch that works in a fun way, aiming to reduce light exposure while reading and help with eye strain.

    -Please add this contribution pull-requests to Hacktoberfest2022.

    https://codepen.io/marcelesilv/pen/yLjrEzz