you-dont-need / you-dont-need-javascript Goto Github PK
View Code? Open in Web Editor NEWCSS is powerful, you can do a lot of things without JS.
License: GNU General Public License v3.0
CSS is powerful, you can do a lot of things without JS.
License: GNU General Public License v3.0
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.
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
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.
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)".
using only CSS and HTML5 to develop Website development components , is cool.
I am modifying the style of some examples for better UI experience.
@you-dont-need Please assign me , I want to work on it.
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.
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.
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
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.
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.
Hi, this is a nice repo. Are you interested to join https://github.com/you-dont-need ? 😄
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!
Why not use the details
element for the accordion instead of a hidden checkbox?
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.
So that it's easier to view
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!
Game modification is considered to be completely safe.
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.
There is a better way to implement a pure-CSS float labels!
required
and :valid
!<select>
fields supportCheck this out: https://github.com/tonystar/float-label-css
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
I think this would better describe the menu type since we have different kinds of menu on the page.
Some of these examples do not work with keyboard only navigation.
in the very first line the word "that" is missing which makes it semantically incorrect.
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)
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.
PR #132 solves this issue
http://codepen.io/TheJaredWilcurt/pen/rxmvVM
Works in IE9 and above.
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
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,
please, assing me this issue
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:
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.
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.
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!
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 :)
.
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:
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;
}
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.
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.
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.
http://codepen.io/ekrof/pen/YqmXdQ
It has at least two additional examples not covered by existing demos:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.