una / youmightnotneedjs

You Might Not Need JavaScript

A fork of YouMightNotNeedjQuery.com. You might not need scripts at all.

YouMightNotNeedJs.com

To contribute, please open an issue and/or submit a Pull Request referencing the issue.

File Structure:

• index.jade = Jade code layout
• index.styl = Stylus styling
• comparisons/ = folder containing comparison items and topics
  • Individual subtopics are inside of comparisons. Each has:
    • html.html = markup
    • scss.scss or css.css = css
    • resources.txt = resource list

youmightnotneedjs's Issues

CSS only tooltip

Felt inspired so made something else.

https://jsfiddle.net/link2twenty/aoqewhde/

Slide in navigation

Here's a slide in navigation
https://jsfiddle.net/link2twenty/3bkvu1sq/

Needs Fixing:

1. Can still scroll background content when the menu is open.

CanIUse Support Visuals

To help better visualize the browser support of some of these features, it would be nice to have a table of browser versions which work with them

unsplash.it seems to be down

Something seems to be wrong over at unsplash.it, not sure if the image references should be switched to another location or not. Right now they are all broken.

CSS Drop-down Menus

Please add a demo of drop-down menus with pure CSS. Could be either on-hover or on-click.

Typeahead Component?

The HTML5 <datalist> component is really exciting to me. You can create a familiar typeahead component without any JavaScript! And with a bonus if you are clever with how you structure the markup it can be backwards compatible as a <select> as well.

I'd be glad to send a PR for this.

Example
https://jpdevries.github.io/datalist/

Note: <datalist> can also be used with <input type="range"> to create "snap points".

Tree Component?

I recently whipped up a HTML5 tree component that works entirely without any JavaScript. I'm pretty excited about it and could submit a PR if it would be considered.

https://codepen.io/jpdevries/pen/rrJGOX
https://github.com/jpdevries/deets
http://jpdevries.github.io/deets

Sidebar menu

There is the pure css for sidebar menu.

Accordion does not even need css trickery: <details> <summary> tags

The HTML <details> and <summary> tags will do just fine.

FAQ Example (can even be nested)

What is 42

The answer.

Where do we come from

There is no answer to that.

You accidentally used Javascript on your web site, about not using Javascript

I'm sure it was an oversight. You might not need javascript.

http://youmightnotneedjs.com/#color_picker not working under Safari 10.0

Read more

How about an animated read more toggle?

CSS-Only Modal - FF/Safari

first up... Love this!

(back story: I consume links clicked in twitter / reeder in Safari)

Opening up the site, I clicked through and noticed this one doesn't want to work. I opened the CodePen fully - http://codepen.io/una/full/pEVjwj/ - and tried it in Safari 9.1 (so this might be fixed in Sierra) and FireFox (dev. edition) 51.0a2

I'll try and dig into why, what needs fixing, but can't guarantee when :(

Lovely project :)

More flexible tabs

Hi, love the site—great work!

I noticed that the tab containers are absolutely positioned, with min-height hardcoded.

Unfortunately, this leads to many issues, not the least of which is that longer content will overflow the container!

I've demonstrated an alternative here: http://codepen.io/anon/pen/ZpmKdA?editors=1100

I haven't heavily tested it in all browsers, but it solves most of the problems I ran into with the version on the site.

It was modified from the technique described here

I leave it to you to decide whether or not it's an improvement!

Caniuse to show browser support

Would resolve #24 and #25

Form styling + select

You can take a look at this guide. It has really nice ideas.
https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
I'm sorry that I don't have time to make a PR.

Add pure-CSS Float Label demo

A good addition to the YouMightNotNeedJS will be a pure-CSS Float Labels:
https://github.com/tonystar/float-label-css

Fix Github Share Link

To resemble youmightnotneedjquery.com
(Currently its commented out)

CodePen requires JavaScript

When I click on examples (such as "See the Pen CSS Only Accordion: youmightnotneedjs.com " I get a big red bordered error message "CodePen requires JavaScript to render the code and preview areas in this view."

This seems rather contrary to the purpose of the demonstration :-(

Of course I totally agree with the purpose of the site, since of course I use NoScript to avoid running random untrusted code from random untrusted sources.

Mobile Scrolling

https://twitter.com/Xavier_Ho/status/785962409353543681

http://youmightnotneedjs.com/#form_validation not working in Safari 10.0

Autofocusing a form field on page load

Use jQuery for this for years - just need to add autofocus to the field.

(I'll happily do a PR for this, just a bit busy today. Will try to get to it tomorrow.)

For modal use :target instead of :focus

Hi Una,

Love this effort. Thanks for putting some work into this.
My suggestion for the modal is to use :target instead of :focus as it also moves the focus to the open modal (important for a11y) and is arguably more stable.
A trick here is to use the close button to target the original open button as well so focus is also returned to the original element.
Happy to do a PR if you're interested.

Cheers

For image slider, use transform instead of left

On desktop I can see the image slider is a little janky as it slides across.
If it animated the transform instead of the left property, it'd be smooth as butter. (Might want to put will-change: transform on it too)

Add Picnic CSS

I created Picnic CSS with many similar, pure css components. For instance, there are Modals, animated responsive Navs, Tabs and Tooltips

Similar project

Might be worth sharing some ideas with these people

https://github.com/you-dont-need/You-Dont-Need-Javascript

Accordion Code Doesn't Match CodePen

Not sure if this repo is still being maintained, but just stumbled across this today. Love it.

Link to issue

In the embedded CodePen, all <input type="radio">s are replaced with <input type="checkbox">s. Inline code is correct, embedded sample is not.

SCSS Tabs keyboard navigation

As of Chrome 68.0.3440.75 tab navigation with keyboard is working in the codepen example .

Accessiblity support (like caniuse)

1-3 rating scale:

1 = no accessibility support
2 = partial support
3 = full support

for each demo

Code Highlighting Broken

Prism.js just doesn't seem to be working :(

unsplash images are borken

example:

Fix Twitter Link

To resemble youmightnotneedjquery.com
(currently it's commented out)

Typo in HTML for image slider

The HTML for the image slider component is inconsistent w/ that of the codepen.

It is currently:

<div id="slider"></div>
<div id="slide-holder">
  <div class="slide">content1</div>
  <div class="slide">content2</div>
  <div class="slide">content3</div>
</div>

It should become:

<div id="slider">
  <div id="slide-holder">
    <div class="slide">content1</div>
    <div class="slide">content2</div>
    <div class="slide">content3</div>
  </div>
</div>

Less thin fonts

When f.lux on my computer is enabled I have a hard time reading the <h1>s and <h2>s, because they have a font weight of respectively 200 and 100. I would prefer it personally if the font would be a bit wider so it's more legible.

If you like this suggestion I can make a PR for it

Enhance the a11y note

When I first read the description, I skipped quickly to the demos and didn't notice the a11y note until I checked it again :D

I fiddled with this in the browser:

Thoughts please? Will be happy to do a PR if all is good.

Warning: missing space before text for line 95 of jade file

Toggle Boxes Example?

Thoughtbot has a post with some examples and one of them is Toggle Boxes.
You Don't Need JavaScript for That! https://robots.thoughtbot.com/you-don-t-need-javascript-for-that

I've forked their Codepen and updated it to use <details>

Codepen

http://codepen.io/jpdevries/pen/kkjpBJ?editors=1100

I'm not sure if it is ok for <dd> and <dt> to not be in the same immediate parent but the example is also marked up FAQ style.