Когда не нужно использовать JavaScript

  1. 1. Компонеты
    1. 1.1. Слайдер картинок
    2. 1.2. Модальные окна
    3. 1.3. “Переключители”
  2. 2. Формы
    1. 2.1. Выбор цвета
    2. 2.2. Фильтр на загрузку
    3. 2.3. Валидации формы
  3. 3. Интерактив
    1. 3.1. Скроллинг с индикации
  4. 4. Навигация
    1. 4.1. Аккардион
    2. 4.2. Lightbox
    3. 4.3. Вкладки

JavaScript - это прекрасен и его все методы великолпны. Но время бежит вперед, и ты можешь построить свои UI компонеты без ипользования JS.

Возможно ты захочешь использовать несколько строчек кода, которые мы покажем, правда тебе придеться отказаться от поддержки старых браузеров, так как это работаеть только в новых браузерах.

Сайт youmightnotneedjquery.com являеться великолпеным ресурсом где использоваться ванильный JS вместо JQuery, авторами
данного сайта стали: @adamfschwartz и @zackbloom. Но сейчас мы покажем мощь HTML и CSS с ситаксическим сахаром SASS. Потому-что, ты можешь не использовать javascript в этих задачах.

Компонеты

Слайдер картинок

HTML

1
2
3
4
5
6
7
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#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); }
}

Модальные окна

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a class="modalTrigger" id="modalTrigger"
href="#modalDialog1">
Open dialog
</a>
<dialog class="modal" id="modalDialog1"
tabindex="-1" role="dialog">
<div>
<a href="#modalTrigger" aria-label="Close">
&times;
</a>
<p>Hello Beautiful!</p>
</div>
</dialog>

SCSS

1
2
3
4
5
6
7
8
9
10
.modal {
opacity: 0;
visibility: hidden;
}
#modalDialog:target {
opacity: 1;
visibility: hidden;
}

“Переключители”

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#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;
}
}
}

Формы

Выбор цвета

HTML

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

Фильтр на загрузку

HTML

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

Валидации формы

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

Интерактив

Скроллинг с индикации

HTML

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

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;
}

Навигация

Аккардион

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="togglebox">
<input id="toggle1" type="radio" name="toggle" />
<label for="toggle1">Label 1</label>
<section id="content1">
<p>Content for the first accordion</p>
</section>
<input id="toggle2" type="radio" name="toggle" />
<label for="toggle2">Label 2</label>
<section id="content2">
<p>Content for the second accordion</p>
</section>
<input id="toggle3" type="radio" name="toggle" />
<label for="toggle3">Label 3</label>
<section id="content3">
<p>Content for the third accordion</p>
</section>
</div>

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// Visually hide radio buttons
input[type="radio"] {
position: absolute;
opacity: 0;
&:focus + label {
color: black;
background-color: wheat;
}
}
// Style label/entry for accordion
label {
position: relative;
display: block;
cursor: pointer;
}
// Style accordion content
section {
height: 0;
transition: .3s all;
overflow: hidden;
}
// Open content when clicking label
#toggle1:checked ~ #content1,
#toggle2:checked ~ #content2,
#toggle3:checked ~ #content3,
#toggle4:checked ~ #content4 {
// set height for transition duration to work
// (also can set to auto without transition)
height: 200px;
}

HTML

1
2
3
4
5
6
7
8
9
<!-- thumbnail image wrapped in a link -->
<a href="#img1">
<img src="img.jpg" class="thumbnail">
</a>
<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1">
<img src="img.jpg">
</a>

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$thumbnail-size: 40px;
$background-color: black;
.thumbnail {
max-width: $thumbnail-size;
}
.lightbox {
// Hide lightbox image
display: none;
// Position/style of lightbox
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: $background-color;
}
.lightbox img {
/// Pad the lightbox image
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
// Remove default outline and unhide lightbox
outline: none;
display: block;
}

Вкладки

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="tabs">
<div class="tab">
<input type="radio" name="tabgroup" id="tab-1" checked>
<label for="tab-1">Label One</label>
<div class="content">
<p>Tab One Content</p>
</div>
</div>
<div class="tab">
<input type="radio" name="tabgroup" id="tab-2">
<label for="tab-2">Label Two</label>
<div class="content">
<p>Tab Two Content</p>
</div>
</div>
<div class="tab">
<input type="radio" name="tabgroup" id="tab-3">
<label for="tab-3">Label Three</label>
<div class="content">
<p>Tab Three Content</p>
</div>
</div>
</div>

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.tabs {
position: relative;
// set height to be even for all tab groups
min-height: 200px;
}
.tab {
float: left;
}
.tab label {
// set label height
top: 1em;
}
// Visually hide radio buttons
.tab [type=radio] {
position: absolute;
height: 0;
width: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
&:focus + label {
outline: 2px dotted black;
}
}
.content {
position: absolute;
top: 1em; left: 0; right: 0; bottom: 0;
opacity: 0;
}
[type=radio]:checked ~ label {
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
opacity: 1;
}