JavaScript is great, and by all means use it, while also being aware that you can build so many functional UI components without the additional dependancy.

Maybe you can include a few lines of utility code, or a mixin, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more than what the browser ships with.

This site is fully copied from youmightnotneedjquery.com, an excellent resource for vanilla JavaScript created by @adamfschwartz and @zackbloom. But this time, we take a look at the power of modern native HTML and CSS as well as some of the syntactic sugar of Sass. Because, you might not need scripts for that task at all!

(Note: Some of these demos may not be accessible and work on all browsers. Please take a moment to review the usage notes and to test them in your project before using in production)

Your search didn't match any comparisons.

Components

Image Slider

CODEPEN

See the Pen CSS-Only Slider: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

Usage: Presentational, Option to read or be skipped by screen reader, no user control over images.

HTML

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

SCSS

#slider {
	width: $slide-width;
	height: $slide-height;
	overflow: hidden;
}

.slide {
	width: $slide-width;
	height: $slide-height;
	float: left;
	position: relative;
}

#slide-holder {
  // wide enough to fit all the slides
	width: 400%;
	position: relative;
	left: 0;
	will-change: transform;
	animation: scroller 10s infinite;
}

// need a step for each slide
@keyframes scroller {
  0% { transform: translateX(0); }
  33% { transform: translateX(-$slide-width); }
  66% { transform: translateX(-$slide-width*2); }
  100% { transform: translateX(0); }
}

View Switcher

CODEPEN

See the Pen CSS-Only Image Switcher: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

Usage: Presentational: keyboard navigable, not screen reader accessible.

HTML

<div id="slider">

  	<!-- Slide Images -->
	<img id="slide-1" src="img1.jpg" alt="img description"/>
  	<img id="slide-2" src="img2.jpg" alt="img description"/>
  	<img id="slide-3" src="img3.jpg" alt="img description"/>
  	<img id="slide-4" src="img4.jpg" alt="img description"/>
	
	<!-- Navigation for the slides -->
	<ul>
		<li><a href="#slide-1" aria-label="Image 1">1</a></li>
		<li><a href="#slide-2" aria-label="Image 2">2</a></li>
		<li><a href="#slide-3" aria-label="Image 3">3</a></li>
		<li><a href="#slide-4" aria-label="Image 4">4</a></li>
	</ul>
</div>

SCSS

#slider {
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
    
    &:target {
      transition: all .5s ease-in-out;
    }
    
    &:not(:target), 
    &:target ~ img#slide-4  {
      position: relative;
      opacity: 0;
    }

    // set initially visible
    &#slide-4 {
      position: absolute;
      opacity: 1;
     }
  }
}

can i use:

Forms

resources:

Color Picker

CODEPEN

See the Pen HTML File Upload: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

Usage: Safe for production.

HTML

<form>
  <input type="color" aria-label="Select a color" />
</form>

can i use:

File Upload

CODEPEN

See the Pen HTML File Upload: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

Usage: Safe for production.

HTML

<form>
  <input type="file" accept="image/*" aria-label="select file to upload">
  <input type="submit">
</form>

Form Validation

CODEPEN

See the Pen HTML Form Validation: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

Usage: Safe for production.

HTML

<!-- A few examples from links above -->

<form>
  <!-- Case insensitive binary choice -->
  <label for="item1">Would you prefer a banana or a cherry?</label>
  <input id="item1" pattern="[Bb]anana|[Cc]herry">

  <!-- Email validation -->
  <label for="item2">What's your e-mail?</label>
  <input id="item2" type="email" name="email">

  <!-- Max length validation -->
  <label for="item3">Leave a short message</label>
  <textarea id="item3" name="msg" maxlength="140" rows="5"></textarea>

  <!-- Numeric + Symbol pattern as required field -->
  <label for="item4">Phone Number (format: xxxx-xxx-xxxx):</label><br/>
  <input id="item4" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required >

  <button>Submit</button>
</form>

can i use:

Interactions

Scroll Indicator

CODEPEN

See the Pen CSS Only Scroll Indicator: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

Usage: Presentational, no screen reader support. Not recommended for production (mobile)

HTML

<header class="scroller"></header>
<main>
	content must be longer than 100vh
</main>

SCSS

body {	
	background: linear-gradient(to right top, 
	$scroller-color 50%, 
	$scroller-background 50%);
	background-size: 100% calc(100% - 100vh + #{$scroller-height}); 
	background-repeat: no-repeat;
}

body:before {
	content:'';
	position: fixed;
	top: $scroller-height;
	bottom: 0;
	width: 100%;
	z-index: -1;
	background: $body-background;
}