you-dont-need/you-dont-need-javascript

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

English | 简体中文

You Don't Need JavaScript

Please be aware that the demos may exhibit significant accessibility issues, such as problems with keyboard navigation, speech synthesis, and progressive enhancement or degradation.

Style Guide:

## <a id="DemoSubject"></a>Carousel

[<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)

**[⬆ back to top](#quick-links)**

---

 

Quick links

• You Don't Need JavaScript
• Style Guide:
• Quick links
• Accordion / Toggle
• Analog-clock
• Animated Button
• Animated Buttons
• Bonfire
• Bubble
• Burger Menu
• Button Animation
• Captain America Shield
• Carousel
• Compass Loader
• City animation footer
• Counter of checked check-boxes
• Dog Box Animation
• Dropdown Menu
• Dynamic Image Colorizing
• Enable dark mode
• Fancy Menu
• Flip on click
• Floating label on Textfield
• Floating Labels V2
• Font-Face (Latin)
• Footer
• Gradient Animation
• growing-flower
• growing-flower
• Image Gallery
• infinite-carousel
• Info on hover/ Popover
• Jumping Ball
• Light Bulb Animation
• Loaders
• Mobile menu off canvas
• Modal/Popup
• Mouse tracking
• NavBar
• Neon Button
• Neon Card
• Neumorphism Card Design
• Parallax scrolling
• Pendulum
• Playing Card Animation
• Responsive Counter Showing # of Items That Didn't Fit Screen
• Ripple Effect
• Scary animation
• Scenary
• Shake Button
• Shake Button
• Shuffling squares
• Star Wars Intro
• Switch
• Tabs
• Thankyou-Animation
• Todo List
• Tooltips
• Treeview
• Twitter Heart Animation
• Book Animation
• Zoom when hover
• Contributors
• Contributing
• CSS Toggle
• Sliced Button
• DVD Screen Saver
• RotateSquare

CSS Toggle

⬆ back to top

Accordion / Toggle

⬆ back to top

---

 

Animated Buttons

⬆ back to top

---

---

 

Captain America Shield

⬆ back to top

---

 

Carousel

⬆ back to top

---

 

Counter of checked check-boxes

⬆ back to top

---

 

Flip on click

⬆ back to top

---

 

Flip on click

⬆ back to top

---

 

Flip on click

⬆ back to top

---

 

Animated Box

⬆ back to top

Analog-clock

⬆ back to top

---

 

⬆ 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

---

 

Button Animation

⬆ back to top

---

 

Compass Loader

⬆ back to top

---

 

Fancy Menu

⬆ back to top

---

 

Footer

⬆ back to top

---

 

Modal/Popup

⬆ back to top

---

 

Mouse tracking

⬆ back to top

---

 

---

NavBar

⬆ back to top

---

 

Parallax scrolling

⬆ back to top

---

 

Tabs

⬆ back to top

---

 

Todo List

⬆ back to top

---

 

Tooltips

• Demo

Treeview

⬆ back to top

---

 

Twitter Heart Animation

⬆ back to top

---

 

Book Animation

⬆ back to top

---

 

Dynamic Image Colorizing

⬆ back to top

---

 

DarkMode

⬆ back to top

 

Ripple Effect

⬆ back to top

---

 

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

⬆ back to top

---

 

A login Page with Glassmorphism Effect

[]

⬆ back to top

---

 

 

Neumorphism Card Design

⬆ back to top

---

 

Neon Button

⬆ back to top

---

 

Neon Card

⬆ back to top

---

 

Shake Button

⬆ back to top

Shake Button

⬆ back to top

---

 

Dog Box Animation

⬆ back to top

---

 

Thankyou-Animation

⬆ back to top

---

 

Square_rotation_animation (Latin)

⬆ back to top

---

 

Switch

⬆ back to top

---

 

Bonfire

⬆ back to top

---

 

Scenary

⬆ back to top

---

 

Bubble

⬆ back to top

---

 

Flower

⬆ back to top

---

 

Jumping Ball

⬆ back to top

---

 

Light Bulb Animation

⬆ back to top

---

 

City animation footer

⬆ back to top

---

 

Smoke

⬆ back to top

---

 

Loader

⬆ back to top

---

 

Spiner

⬆ back to top

---

 

Fire

⬆ back to top

---

 

Flame

⬆ back to top

---

Shuffling squares

---

Floating-labelV2

⬆ back to top

---

scary-animation

⬆ back to top

---

infinite-carousel

=======

=======

⬆ back to top

---

growing-flower

⬆ back to top

---

 

Playing Card Animation

⬆ back to top

---

Star Wars Intro

⬆ back to top

Gradient Animation

⬆ back to top

Zoom when hover

---

Floating-labelV2

⬆ back to top

---

CSS Tables

=======

3D Transform

Animated Button

⬆ back to top

---

Css FLEX

 

Coffee-Animation

⬆ back to top

=======  

Basketball-Animation

⬆ back to top

=======  

Business-Card

⬆ back to top

=======  

SolarSystem

⬆ back to top

 

Pendulum

⬆ back to top

 

SlicedButton

⬆ back to top

 

Rating Star

⬆ back to top

 

DVD Screen Saver

⬆ back to top

 

RotateSquare

[]

⬆ back to top

=======
 

---

## Contributors

Thanks to these wonderful people who have contributed to this project!

<a href="https://github.com/you-dont-need/You-Dont-Need-JavaScript/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=you-dont-need/You-Dont-Need-JavaScript" />
</a>

## Contributing

We welcome contributions from the community to make this project better. Feel free to fork the repository, make your changes, and submit a pull request. Be sure to follow our [Code of Conduct](CODE_OF_CONDUCT.md).

For detailed guidelines on how to contribute, please refer to our [CONTRIBUTING](CONTRIBUTING.md) file.

Let's build something great together!

you-dont-need-javascript's Issues

Add requirements for browsers

When viewing and further use of an examples, I would like to know in what min version of browser it will work.

Need add information about it in Readme for every new and old demo. (via Can I use)

I think it would be helpful. Thanks

Java

Accordion Toggle Height

for:
.vertical [type=checkbox]:checked ~ label ~ .content { height:300px; border:1px solid #542437; }

change height to auto (or add scrolling overflow), add corresponding CSS selector for radio button version.

you should fork these, put them under source control and give credit to the initial author.

Feature

Surface is an entire framework built with no js

Issues might not be the best place to do this, if you would rather I could move this over to Twitter etc.

Just wanted to let you know that I built a framework a number of years back that tried to use no JavaScript and see how far I could push html + CSS.

It has working and styled models, accordians etc.

Feel free to check it out 👍 https://github.com/mildrenben/surface

Broken Site Link

When we try to open the site deployment it shows page doesn't exit Error 404

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

Correct Link needs to be added

some examples can be modified for better UI

using only CSS and HTML5 to develop Website development components , is cool.
I am modifying the style of some examples for better UI experience.

Update Accordion CSS to Support radio on last rule

On most of the rules the CSS for the accordion example supports checkbox or radio however the last rule is missing the extra condition. If you add this condition to that rule then you can switch between checkbox and radio buttons in the html to decide whether to open one at a time or as they are clicked.

Great examples!

Pure-CSS float labels with HTML5 validation

There is a better way to implement a pure-CSS float labels!

• No JS!
• No hacks with required and :valid!
• => HTML5 validation support
• => <select> fields support

Check this out: https://github.com/tonystar/float-label-css

Suggest on README.md

I think a better "point of view" can be omitted for better reading because everyone knows what you are talking about, which the sample code might not compatible on their machines or browsers

README.MD missing word "not" in a sentence

Please bear with me. I am new to GitHub and git. In the very first sentence of the first paragraph (just below the page title (You Don't Need JavaScript) we have the sentence (set to bold for easy identification):

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.

Perhaps what you meant to say was (word in bold added):

Please note these demos should NOT 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.

"Carousels" in the Carousels section are actually slideshows. Suggest renaming section to Slideshows

Carousels show multiple items at a time and generally slide between items. Slideshows show one at a time and slide or fade to the next/previous item.

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:

Add a disclaimer that Floating Label only works without validation rules.

If you change input type to anything but text, and of course you should for email, url, tel (...) for accessibility (and to prompt the proper keyboard) the browser will have default validations checks for those types which means that the use of :invalid pseudo-selector won't work when the user actually enters invalid content. By this I mean that If, for example, the user inserts an invalid email and tab or focus the next field, the label will overlap the content.

You also have type="password" example, but that only works because there's not a pattern for the password so a 1 character long password will be considered valid, but of course this is not a real usecase.

If a validation pattern exists, which is mandatory in real sites, even if you use input[type="text"] for every field and user don't match it, the label will overlap the content.

Example fail usecases

CSS4

In the future there will be a proper solution using the :placeholder-shown pseudo selector, but its support is really bad (chrome only) at the time of writing.

CSS4 Example

---

Nice repo btw 👏 I gave a workshop for beginners on this a few months ago.. it was supposed to be turned into a repo of components like yours, you can check it for some magic :target solutions as well! (sry for the bad code organization, it was the result of a live coding workshop).

Cheers!

Add simple Moving Road Animation Using Power of CSS

Modals in Demo 1 are added to the nav to the nav stack.

The states of the modals displayed in Demo 1 are placed on the nav stack, you can reproduce this on the pen by clicking open and closed the modals a few times and then clicking "back" in your browser.

I think violates users' expectations about modals and the back button, but YMMV.

Does not install with `yarn add' on Ubuntu

Allow newlines in info hovers

I'm not sure the best way to do a pull-request with the way the demos are stored in codepen.

Adding this rule to the "Info on hover without JS" will allow the newlines to be displayed:

dfn::after {
  white-space: pre-wrap;
}

Should we rename the 10. menu to 10. drop-down menu?

I think this would better describe the menu type since we have different kinds of menu on the page.

Interested to join https://github.com/you-dont-need ?

Hi, this is a nice repo. Are you interested to join https://github.com/you-dont-need ? 😄

Mouse tracking example is pretty ridiculous

Rendering 500 animated elements instead of using one that is moved via JS... Really? Performance-wise it's disproving the whole point of this repo. "You don't need JS (unless it's more efficient to use it)".

Game Mod

Game modification is considered to be completely safe.

Provide demos that do not require Javascript

As of now, most links target codepen.io, which is only available if the browser has Javascript support.

Links to static pages with only HTML and CSS would fix this issue.

Emphasize that that using CSS in most of these ways is terrible practice

CSS was made to be a styling language and to be supplementary to the markup of a page, not vital to it. Use of practices such as the checkbox hack to replace functionality that should be done using JavaScript is bad practice as it creates bad semantics, wrecking the markup of a page.

This library to should emphasize the areas where these hacks should not be used, both in the README and each demo page where this is the case.

JavA

Add neon button animation

PR #132 solves this issue

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.

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

Accordion demo isn't a true accordion

In an accordion menu, only one "section" opens at a time (this mimics the musical instrument which stretches open one part the bellows at a time). In your demo, opening a second or third section does not close the previously-opened section.

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.

Use details element for accordion

Why not use the details element for the accordion instead of a hidden checkbox?

Want To Add Simple Animation Using Pure CSS

please, assing me this issue

Neon button animation pictutre/gif

In the readme file we don't have a demo gif for neon button instead we have a ')' which is added in the readme file

Solution:
Upload gif (neon-button.gif) in the images folder

Click on button for modal scrolls page to top

In the modal example, when you click on the button to show the modal, the modal shows but the page also scrolls to the top. This would end up as a bug in our backlog :)

Please add info about minimal browser requirements / version compatibilty to each example

These examples are great, but they urgently need meta information about which browsers are [not] supported! Kind of a "CanIUse"- Link for each example. Yes, mucho work,that is why i make it an issue, so when anybody adds more examples in the future please figure this out before you post! Thanks!

Adding a Author Page using simple CSS.

@you-dont-need Please assign me , I want to work on it.

Github badge in the README

I want to contribute to this repository by adding above shown badge to the repository.

Please assign me this issue.

Add demos for things which required JavaScript on ancient browsers

Some features used to be implemented with JavaScript but now are supported natively. Sometimes those old implementations are slow and/or not mobile-friendly, so when possible would be good using the non-javascript versions. Some examples:

• position: sticky (demo, Can I use);
• animations (Can I use);
• placeholders (Can I use)
• media files (old implementations were flash based...)

It's quite interesting topic

It could be better that we can include a list of features can be purely built by CSS and browser support.
You can use my project's readme as a template.

create a github page for html in the examples/ folder

So that it's easier to view

Menu demo

Since I am still finding ways to do a menu without javascript that is responsive, I found quite a few links:

http://output.jsbin.com/sevula/2/#navbar
https://hpbn.co/building-blocks-of-tcp/ (partial javascript, but the smooth menu opens without javascript)
http://webdesignerwall.com/demo/responsive-menu/ (choose-able)

Needs accessibility rules

Some of these examples do not work with keyboard only navigation.

Card flip hover effect animation using CSS

_

.

Add small gifs to showcase each items

Hello,

It would be nice to see each items without to run jsfiddle. A Gif is great for this. Use small and light one.

Cheers,

SCSS version and grunt task for the project?

Hey guys,

I was wondering if you can accept my help converting the css to scss files and configuring grunt for the project with some tasks like scss, watch, server, css min etc.

what do you think?

thanks.

todo list contains javascript mixed with jade

More than CSS!

There are more languages lurking out there that are also alternatives to JS that could be given a spotlight in this project. For example, PHP! Check out danwin/le-chat-php, as it is an entire functioning chat server. WebAssembly is also an upcoming supplement on the rise.

README.md update

in the very first line the word "that" is missing which makes it semantically incorrect.

Alert messages that can be hidden on click

http://codepen.io/TheJaredWilcurt/pen/rxmvVM

Works in IE9 and above.