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

Related tags

Learning resource javascript css game font counter popover accordion carousel tooltip textfield treeview burger-menu
Overview

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. Menu
  10. Mobile menu off canvas
  11. Burger menu
  12. Fancy menu
  13. Modal/Popup
  14. Mouse tracking
  15. Parallax scrolling
  16. Tabs
  17. Todo List
  18. Tooltips
  19. Treeview
  20. Twitter Heart Animation
  21. Dynamic Image Colorizing
  22. Ripple Effect
  23. Responsive Counter Showing # of Items That Didn't Fit Screen

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

 

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

 

Contributing

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

Comments
  • HTML files for demos

    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.

    opened by gilmrjc 3
  • user-select: none;

    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:

    opened by shezhangzhang 2
  • Added Nuemorphism cards to the list

    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

    opened by saviomartin 1
  • Mention of accessibility issues of these demos

    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

    opened by nico3333fr 1
  • Add compatibility information.

    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.

    opened by oknoorap 1
  • Browser compatibility

    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.

    opened by martinheidegger 1
  • Another awesome demo

    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
    opened by sgtpep 1
  • add my darkmode

    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

    opened by MarceleSilv 0
Owner
You Don't Need
People choose popular projects, often not because it applies to their problems.
You Don't Need
GitHub
Automated testing for single-page applications (SPAs). Small, portable, and easy to use. Click on things, fill in values, await for things exist, etc.

SPA Check Automated testing for single-page applications (SPAs). Small, portable, and easy to use. Click on things, fill in values, await for things e

Cory Leigh Rahman 5 Dec 23, 2022
"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. You will build a simple website that allows for doing that, and you will do it using ES6 and Webpack!

To-do-list Description "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark t

Cindy Dorantes 12 Oct 18, 2022
"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. It is created with HTML , CSS , JS and webpack and NPM.

My Todo List "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as com

Dyary Raoof Bayz Agha 5 Mar 29, 2022
"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Hello! I am a software developer! I can help you build a product, feature or website. Take a look of my works. If you like what you see and have a pro

ABDUL ALI 7 Jul 17, 2022
"To-do list" is a tool that lists the things you need to do and allows you to mark them as complete. Built with JavaScript, HTML, CSS, and Webpack!

HTML CSS JS ES6 WEBPACK NPM LINTERS Todo List Project "To-do list" is a tool that helps to organize your day. It simply lists the things that you need

null 5 Jul 2, 2022
To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Microverse Webpack Javascript For the second Javascript milestone in building a todo website, set up a new repository and prepare it for development u

TOFANA SILVIA 16 Jun 13, 2022
BestBuy Bot is an Add to cart and Auto Checkout Bot. This auto buying bot can search the item repeatedly on the ITEM page using one keyword. Once the desired item is available it can add to cart and checkout very fast. This auto purchasing BestBuy Bot can work on Firefox Browser so it can run in all Operating Systems. It can run for multiple items simultaneously.

BestBuy Bot — Open Source GPU/PS5/Xbox Bot I took bits from best open and closed sourced bots and made this simple bot. Please star my repo if this co

Karan Kapuria 585 Dec 31, 2022
CSS Generator has a lot of tools 😉 🎉 👀

Css Generator ?? Packages used in Project : React Router Dom Framer Motion react-color react-icons react-awesome-button Preview Tools ?? Background to

Mohammad 19 Dec 31, 2022
jQuery Tabs Plugin. CSS Tabs with Accessible and Responsive Design. Lot of Tab Themes with Vertical and Horizontal Orientation.

Macaw Tabs Macaw Tabs is jQuery tabs plugin. It helps you to create accessible and responsive jQuery tabs by implementing the W3 design patterns for t

HTMLCSSFreebies 6 Dec 8, 2022
This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do any operations that can be performed in python shell with this package.

Django execute code This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do

Shinu 5 Nov 12, 2022
"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete

To Do List "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as compl

Sahar Abdel Samad 16 Aug 9, 2022
"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete.

Todo_List Description "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark th

Cynthia Inga 4 Apr 19, 2022
"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete.

todo-list "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as comple

Okoroji Victor Ebube 13 Jul 4, 2022
"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete.

To-Do List "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as compl

Juan Palacios 10 May 24, 2022
To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Built with JavaScript.

To Do List Application that record the tasks to remind you and got many features that you might need. This is an image for it Live Demo Live Demo Here

Omar Ragheb 14 Jul 13, 2022
To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Built with JavaScript.

To-do List To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complet

Leonardo Goss 9 Mar 4, 2022
"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete.

Hello! I am a software developer! I can help you build a product, feature or website. Tak a look of my works. If you like what you see and have a proj

Roberto A. Baños Alvarez 5 Apr 29, 2022
To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. I build a simple website that allows for doing that, and I do it using ES6 and Webpack!

Project Name : TO-Do list "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mar

Chris Siku 13 Aug 22, 2022
"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete.

To do list "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as compl

Ndikumana Isaie 4 Jun 10, 2022