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
using only CSS and HTML5 to develop Website development components , is cool.
I am modifying the style of some examples for better UI experience.
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.
@you-dont-need Please assign me , I want to work on it.
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!
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.
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:
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.
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.
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.
.
please, assing me this issue
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
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.
Some of these examples do not work with keyboard only navigation.
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)".
Hi, this is a nice repo. Are you interested to join https://github.com/you-dont-need ? 😄
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:
So that it's easier to view
Game modification is considered to be completely safe.
Why not use the details
element for the accordion instead of a hidden checkbox?
http://codepen.io/TheJaredWilcurt/pen/rxmvVM
Works in IE9 and above.
in the very first line the word "that" is missing which makes it semantically incorrect.
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!
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
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.
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)
http://codepen.io/ekrof/pen/YqmXdQ
It has at least two additional examples not covered by existing demos:
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.
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.
I think this would better describe the menu type since we have different kinds of menu on the page.
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,
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!
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
PR #132 solves this issue
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 :)
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.
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.
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 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
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.
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.