Git Product home page Git Product logo

you-dont-need-javascript's Introduction

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!

you-dont-need-javascript's People

Contributors

nampnq avatar cht8687 avatar stevemao avatar lucademian avatar re5pawn avatar gilmrjc avatar scriptype avatar shaishavgandhi avatar dennisxzx avatar saviomartin avatar nhducit avatar josephfusco avatar midzer avatar fltenwall avatar invision70 avatar momciloo avatar ristaa avatar doomhammerhell avatar krutsch avatar chirag64 avatar tobozo avatar sakar-01 avatar scryptonite avatar citguy avatar rickfreitas avatar nico3333fr avatar mladenplavsic avatar ktorz avatar hulsbosch avatar chinchang avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.