# You-Dont-Need-JavaScript

**Repository Path**: ulia/You-Dont-Need-JavaScript

## Basic Information

- **Project Name**: You-Dont-Need-JavaScript
- **Description**: CSS is powerful, you can do a lot of things without JS.
- **Primary Language**: CSS
- **License**: WTFPL
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-06-09
- **Last Updated**: 2024-08-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# You Don't Need JavaScript

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:

```markdown
## 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;
```

***
&nbsp;

## Quick links

1. [Accordion / Toggle](#Accordion)
1. [Carousel](#Carousel)
1. [Counter of checked check-boxes](#Counter)
1. [Flip on click](#Flip)
1. [Floating label on Textfield](#Floating)
1. [Font-Face (Latin)](#Font)
1. [Games](#Games)
1. [Info on hover/ Popover](#Info)
1. [Image Gallery](#Image)
1. [Menu](#Menu)
1. [Mobile menu off canvas](#Mobile)
1. [Burger menu](#BurgerMenu)
1. [Fancy menu](#FancyMenu)
1. [Modal/Popup](#Modal)
1. [Mouse tracking](#Mouse)
1. [Parallax scrolling](#Parallax)
1. [Tabs](#Tabs)
1. [Todo List](#Todo)
1. [Tooltips](#Tooltips)
1. [Treeview](#Treeview)
1. [Twitter Heart Animation](#Twitter)
1. [Dynamic Image Colorizing](#ImageColorizing)
1. [Ripple Effect](#RippleEffect)
1. [Responsive Counter Showing # of Items That Didn't Fit Screen](#ResponsiveItemShowcase)


## <a id="Accordion"></a>Accordion / Toggle

[<img src="images/accordion.png" height="230" title="Demo 1">](http://www.mraffaele.com/labs/css-only-accordions/)
[<img src="images/toggler.png" height="230" title="Demo 2">](http://codepen.io/cristina-silva/pen/pyXQrj)
[<img src="images/toggler2.png" height="230" title="Demo 3">](http://codepen.io/PaulZi/pen/zBbVvV)
[<img src="images/accordion.gif" height="230" title="Demo 4">](http://codepen.io/ekrof/pen/YqmXdQ)

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

***
&nbsp;

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

[<img src="images/slideshow2.png" height="230" title="Demo 1">](http://codepen.io/SitePoint/pen/MyPVdK)
[<img src="images/slideshow.png" height="230" title="Demo 2">](https://codepen.io/cavico/pen/yOjwya)

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

***
&nbsp;

## <a id="Counter"></a>Counter of checked check-boxes

[<img src="images/checkedcounter.png" height="230" title="Demo 1">](https://codepen.io/anon/pen/eZWXOZ)
[<img src="images/checkedcounter2.png" height="230" title="Demo 2">](http://codepen.io/lonekorean/pen/wKbzv)

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

***
&nbsp;

## <a id="Flip"></a>Flip on click

[<img src="images/flipper.png" height="230" title="Demo">](https://codepen.io/RuudBurger/pen/bwjry)

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

***
&nbsp;

## <a id="Floating"></a>Floating label on Textfield

[<img src="images/textfields.png" height="230" title="Demo">](http://codepen.io/KtorZ/pen/ZOzdqG)

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

***
&nbsp;

## <a id="Font"></a>Font-Face (Latin)

[<img src="images/sansfont.png" height="230" title="Demo">](https://yusugomori.com/projects/css-sans/fonts)

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

***
&nbsp;

## <a id="Games"></a>Games

[<img src="images/game.png" height="230" title="Game 1">](https://codepen.io/i0z/pen/mFLCw)
[<img src="images/sudoku.png" height="230" title="Game 2">](https://codepen.io/TabAtkins/pen/JYZgRo)

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

***
&nbsp;

## <a id="Info"></a>Info on hover/ Popover

[<img src="images/tooltips.png" height="230" title="Demo 1">](https://codepen.io/guuslieben/pen/gabQWM)
[<img src="images/tooltips2.png" height="230" title="Demo 2">](http://codepen.io/cristina-silva/pen/XXOpga)
[<img src="images/info-on-hover.png" height="230" title="Demo 3">](http://codepen.io/SitePoint/pen/akAmPw)
[<img src="images/tooltips.gif" height="230" title="Demo 4">](http://codepen.io/ekrof/pen/YqmXdQ)

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

***
&nbsp;

## <a id="Image"></a>Image Gallery
[<img src="images/gallery.png" height="230" title="Demo 1">](https://codepen.io/shaishgandhi/pen/yJzamw)
[<img src="images/gallery2.png" height="230" title="Demo 2">](http://codepen.io/pavlovsk/pen/sjubp)

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

***
&nbsp;

## <a id="Loaders"></a>Loaders

[<img src="images/loader.png" height="230" title="Demo 1">](http://codepen.io/lucadem1313/pen/vKWqRV)
[<img src="images/loader2.png" height="230" title="Demo 2">](http://codepen.io/lucadem1313/pen/XKzLER)
[<img src="images/loader3.png" height="230" title="Demo 3">](http://codepen.io/brunjo/pen/xbwVXJ)
[<img src="images/loader4.png" height="230" title="Demo 4">](http://codepen.io/brunjo/pen/ByjRPy)
[<img src="images/loader5.png" height="230" title="Demo 5">](http://codepen.io/brunjo/pen/LEGyrJ)
[<img src="images/loader6.png" height="230" title="Demo 6">](http://codepen.io/brunjo/pen/bNEWjV)
[<img src="images/loader7.png" height="230" title="Demo 7">](http://codepen.io/brunjo/pen/wBKmbm)
[<img src="images/loader8.png" height="230" title="Demo 8">](http://tobiasahlin.com/spinkit/)
[<img src="images/loader9.png" height="230" title="Demo 9">](http://codepen.io/viduthalai1947/pen/JkhDK)

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

***
&nbsp;

## <a id="Menu"></a>Menu

[<img src="images/menu2.png" height="230" title="Demo 1">](https://codepen.io/antoniputra/pen/BzyWmb)
[<img src="images/menu3.png" height="230" title="Demo 2">](http://codepen.io/cristina-silva/pen/NNOodj)

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

***
&nbsp;

## <a id="Mobile"></a>Mobile menu off canvas

[<img src="images/menu.png" height="230" title="Demo">](https://codepen.io/fabricionaweb/pen/xOLwxj)

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

***
&nbsp;

## <a id="BurgerMenu"></a>Burger Menu

[<img src="images/menu4.png" height="230" title="Demo">](https://codepen.io/eduardoboucas/pen/BNyKwO)

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

***
&nbsp;

## <a id="FancyMenu"></a>Fancy Menu

[<img src="images/fancyMenu.gif" height="230" title="Demo">](http://codepen.io/lbebber/pen/RNgBPP)

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

***
&nbsp;

## <a id="Modal"></a>Modal/Popup

[<img src="images/modal2.png" height="230" title="Demo 1">](https://codepen.io/peiche/pen/vhqym)
[<img src="images/modal.png" height="230" title="Demo 2">](https://codepen.io/chrisburnell/pen/scyKF)

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

***
&nbsp;

## <a id="Mouse"></a>Mouse tracking

[<img src="images/mousetracking.png" height="230" title="Demo">](https://codepen.io/Momciloo/pen/GoGRrQ)

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

***
&nbsp;

## <a id="Parallax"></a>Parallax scrolling

[<img src="images/parallax.png" height="230" title="Demo">](http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/)

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

***
&nbsp;

## <a id="Tabs"></a>Tabs

[<img src="images/tabs.png" height="230" title="Demo 1">](https://codepen.io/llgruff/pen/ZGBxOa)
[<img src="images/tabs2.png" height="230" title="Demo 2">](https://codepen.io/fusco/pen/Wvzjrm)

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

***
&nbsp;

## <a id="Todo"></a>Todo List
[<img src="images/todo.png" height="230" title="Demo">](http://codepen.io/scryptonite/pen/oLGzdj)

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

***
&nbsp;

## <a id="Tooltips"></a>Tooltips
+ [Demo](https://kushagragour.in/lab/hint/)

## <a id="Treeview"></a>Treeview

[<img src="images/tree.png" height="230" title="Demo">](https://codepen.io/rgg/pen/WrKyzj)

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

***
&nbsp;

## <a id="Twitter"></a>Twitter Heart Animation

[<img src="images/art_twitter_heart_animation.gif" height="230" title="Demo">](http://codepen.io/thebabydino/pen/RRRRZE)

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

***
&nbsp;

## <a id="ImageColorizing"></a>Dynamic Image Colorizing

[<img src="images/imagecolorizing.png" height="230" title="Demo">](http://codepen.io/noahblon/pen/ZbjmbK)

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

***
&nbsp;

## <a id="RippleEffect"></a>Ripple Effect

[<img src="images/ripple-effect.gif" height="230" title="Ripple EffectDemo">](http://mladenplavsic.github.io/css-ripple-effect/)

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

***
&nbsp;

## <a id="ResponsiveItemShowcase"></a>Responsive Counter Showing # of Items That Didn't Fit Screen

[<img src="images/responsive-item-showcase.gif" title="Responsive Item Showcase">](https://codepen.io/pavlovsk/pen/QqrZzv/right/)

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

***
&nbsp;

## Contributing

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