Полоса прокрутки jquery – Как я создавал плагин постраничной прокрутки One Page Scroll с открытым исходным кодом

В разных операционных системах по умолчанию разные полосы прокрутки для браузеров. Но к счастью можно задавать свои собственные цвета для данного элемента, чтобы выделить свой сайт среди остальных. Как-то раз я был на одном английском сайте, и мне очень понравилось как гармонируют цвета сайта с цветом полосы прокрутки. Поэтому если вы решили сделать цвет прокрутки нестандартный, то убедитесь что он подходит по цветовой гамме вашему сайту.

Интересный эффект о котором я писал раньше: Перетаскивание блоков используя jQuery.

В данной статье мы рассмотрим jQuery плагины, позволяющие сделать нестандартную полосу прокрутки в браузере, так как CSS свойства поддерживаются не всеми браузерами.

Приступим к рассмотрению данных плагинов, которые изменяют вид полосы прокрутки в браузере.

1. NiceScroll.js

NiceScroll является jQuery плагином, который позволяет создать полосу прокрутки похожую на iOS.

2. NanoScroll

Данный плагин позволяет создать полосу прокрутки на вашем сайте как в Mac OS X.

3. jQuery custom content scroller

Плагин jQuery для стилизации полосы прокрутки в браузере с помощью CSS.

4. Tiny Scrollbar

Легкий jQuery плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.

5. Scrollbar Visibility

Легкий плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.

6. jScrollPane

С помощью данного плагина также можно делать пользовательские полосы прокрутки, которые работают во всех современных браузерах. Стили можно менять с помощью CSS файла.

7. Scrollbar Paper

С помощью данного плагина нельзя придать стиль полосе прокрутки которая у браузера, но можно задать для содержимого фреймов внутри страницы.

8. jQuery Scrollbars v2

Полностью настраиваемые полосы прокрутки, а также показывает стандартные если Javascript отключен в браузере.

9. Vertical scrollbar

Для данного плагина необходимо фиксированная высота контейнера, потому что полоса прокрутки расположена справа с помощью позиционирования.

Вывод

Конечно при использовании плагинов будет нагрузка на сайт, но и смотреться будет полоса прокрутки одинаково во всех браузерах.

Успехов!

JavaScript обёртка скроллбара в виде jQuery плагина / Habr

Существует два основных подхода для стилизации скроллбара средствами HTML/CSS, каждый из которых имеет свои плюсы и минусы:

• Эмуляция скролла средствами JavaScript
• JavaScript обёртка над родным скроллом

Эмуляция скролла средствами JavaScript

• Сложность или невозможность эмулировать/перехватить все события
• JavaScript эмуляция работает медленнее родного скролла

JavaScript обёртка над родным скроллом

Изобретение трёхколёсного велосипеда

Было решено сделать собственную реализацию, отвечающую следующим требованиям:

• Поведение скролла должно быть максимально приближённым к родному
• Вертикальный и горизонтальный скроллбар
• Минимальная нагрузка на процессор
• Полная стилизация внешнего вида средствами HTML/CSS
• Возможность применить свою HTML структуру для скроллбара, либо указать плагину использовать уже существующий элемент в качестве скроллбара
• Автоматическое изменение скролла при изменении содержимого или изменении размеров самого контейнера без необходимости переинициализации скрипта
• Ширина и высота контейнера может быть установлена как в пикселях, так и в процентах, либо ограничена средствами CSS max-height/max-width
• Скролл может находиться как в любом месте внутри контейнера, так и за его пределами
• Автоматическое вычисление размеров скроллбара, либо значение, устанавливаемое через CSS стили
• Поддержка IE7+, Firefox, Chrome, Opera, Safari
• Возможность «из коробки» отключения скролла для мобильных браузеров

В качестве подхода было выбрано решение сделать плагин в виде JavaScript обёртки над родным скроллом — т.е. оставить функциональность родного скролла, скрыть родной скролл средствами CSS и показать стилизованный скролл. Это даёт преимущество в том, что не нужно эмулировать поведение стандартного скролла, а лишь отлавливать изменения в позиционировании с помощью JavaScript.

Избежать полной эмуляции скролла всё же не получилось — необходимо эмулировать поведение скролла, когда мышь находится над стилизуемым скроллом: отлавливать скролл мыши, drag&drop, клики по самому скроллу и стрелочкам. Идеального решения «Подключил и забыл», конечно же, не получилось. Но практически всех поставленных целей удалось добиться в полной мере.

Демонстрация

Исходные файлы

Сравнение функциональности популярных скроллбаров

На заметку

1. Исходный контейнер не должен содержать инлайновые стили
2. Следует избегать использования padding/margin для контейнера. Если нужен отступ, лучше добавить внутрь ещё один контейнер с необходимым отступом
3. При изменении содержимого контейнера не стоит обращаться к контейнеру по классу, т.к. эти классы будут использоваться и контейнером-обёрткой

К небольшим недочётам можно отнести разность высоты/ширины прокрутки колёсиком мыши в случаях, когда мышь находится над содержимым контейнера (родное поведение) и когда мышь находится над скроллбаром (эмулируемый скролл). Есть несколько идей, которые довольно сложны в реализации, поэтому оставляю их «на потом».

Также пока не удаётся избавиться от неприятного эффекта прокрутки контейнера при выделении текста в WebKit браузерах Chrome и Safari. Частично удалось это сделать при использовании outer-скролла (есть в демонстрации).

Примечания

• В ИЕ8 — баги с использованием max-height: в некоторых случаях рендерер 8-й версии ИЕ крашится, либо пытается сделать высоту контейнера равной max-height (официальный баг релиз версии)
• WebKit-браузеры (Chrome, Safari) при выделении текста делают прокрутку внутреннего контейнера, «обнажая» скрытый скроллбар
• Если содержимое превышает размеры контейнера, то отображение правого и нижнего паддинга остаётся на усмотрение самого браузера
• При поиске плагинов, чтобы быстро узнать используется ли стандартный механизм скроллинга, достаточно нажать на скролл мыши, находясь над прокручиваемым контентом

Обновление до версии 0.1.3 (20130425):

• улучшена эмуляция скролла: теперь скролл колёсиком мыши над эмулируемым скроллом работает почти идентично натуральному скроллу; также изменено поведение при нажатии и удержании мыши на подложке скроллбара
• исправлено CSS позиционирование, при котором происходил «лишний» сдвиг контейнера при выделении текста в WebKit браузерах Google Chrome / Safari

Обновление до версии 0.1.4 (20130430):

• отслеживание горизонтального скролла мышью над горизонтальным скроллбаром
• добавлена опция disableBodyScroll для отключения скролла страницы, когда прокручивается контейнер. В данной опции пришлось отключить родное поведение браузера и эмулировать скролл через JavaScript

Обновление до версии 0.1.6 (20131018):

• добавлена опция игнорирования инициализации скролла на мобильных устройствах
• добавлена поддержка drag для скролла на тач-устройствах

Обновление до версии 0.1.7 (20140307):

• добавлен хак для исправления появления скроллбара при 1-пиксельном зазоре в ИЕ

Обновление до версии 0.1.8 (20140308):

• исправлен баг с отображением горизонтального скроллбара если высота содержимого меньше высоты контейнера (случаи с height:100%)

Обновление до версии 0.1.9 (20140310):

• исправлен баг с отображением вертикального скроллбара если контент содержит div с height:100%; overflow: hidden;, внутри которого div с высотой, превышающей высоту внешнего контейнера (спасибо за отзывы и замечания Evangeline Rei)
• добавлена опция autoUpdate отвечающая за автоматическую реинициализацию скроллбара при изменении размеров контента/контейнера

Обновление до версии 0.2.0 (20140312):

• добавлена опция onUpdate для возможности пересчёта размеров скроллбара вручную. благодаря данной опции был добавлен скроллбар в виде карты страницы
• добавлена опция stepScrolling отвечающая за пошаговую прокрутку к месту, где удерживается нажатой кнопка мыши на скроллбаре. если опция отключена, то содержимое будет прокручено сразу до местоположения мыши, в противном случае будет происходить пошаговая прокрутка с ускорением до места удерживания мыши (эмуляция поведения скролла)
• скрытие/отображение скроллбаров полностью перенесено в CSS
• изменено поведение onInit — теперь запуск функции происходит только один раз при инициализации

Обновление до версии 0.2.1 (20140323):

• исправлена ошибка с прокруткой к #anchor-элементу, когда становится видимым горизонтальный скролл

Обновление до версии 0.2.2 (20140411):

• исправлена ошибка с инициализацией нескольких скроллбаров с настройками по умолчанию
• добавлен элемент scroll-element_corner для удобной CSS настройки уголка если видны оба скроллбара

Обновление до версии 0.2.3 (20140703):

• исправлена ошибка с видимым скроллбаром при изменении zoom-а в браузере
• исправлена ошибка с неверной инициализацией размеров скроллбара для ИЕ при использовании CSS * { box-sizing: border-box; }
• добавлена callback функция onScroll, которая позволяет легче определять степень прокручивания контейнера
• скроллбар может быть использован как директива для отличного фреймворка Angular.JS
• добавлена возможность переопределять значения по-умолчанию через глобальную переменную jQueryScrollbarOptions до загрузки плагина
• оптимизирована проверка изменения размеров контейнера

Обновление до версии 0.2.4 (20140715):

• добавлена возможность стилизации скроллбара для TEXTAREA наконец-то

JQuery. Полноэкранная прокрутка (скроллинг)

Сегодня снова затронем тему одностраничных сайтов, которые отлично подходят для демонстрации продукта или продажи единичных товаров. Много направлено именно для таких ресурсов. И в нашем случае мы рассмотрим одну интересную и полезную вещь, а именно – полноэкранную прокрутку. Это еще можно назвать скроллингом или частично, так как этот эффект имеет что-то общее.

Фишка в полноэкранной прокрутке заключается в том, что при прокрутке страницы область сайта прокручивается не постепенно, а поэкранно, все то, что попадает в область просмотра браузера. Для полного понимания можете посмотреть пример эффекта ниже. А мы начнем знакомство с JQuery-плагинами для Page Scroll.

Jquery-fsscroll

Демо Скачать

Плагин представляет из себя простой и «легкий» эффект полноэкранной прокрутки на основе jQuery. В нем есть несколько полезных параметров, с помощью которых можно управлять скоростью анимации, направлением прокрутки (горизонтально, вертикально) и т.д.

Подключение

<link rel="stylesheet" href="../src/jquery.fsscroll.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="../src/jquery.fsscroll.js"></script>
<!-- инициализировать и пример применения параметров-->
<script>
    $('.container').fsScroll({
    direction: 'vertical',
        duration: 350,
        keyboard: true,
        })
</script>

Разметка

<div data-fs-scroll>
    <div>
      <div>
        <h2>Секция 1</h2>
      </div>
      <div>
        <h2>Секция 2</h2>
      </div>
      <div>
        <h2>Секция 3</h2>
      </div>
      <div>
        <h2>Секция 4</h2>
      </div>
    </div>
</div>

Параметры

selectors — селектор
index — какой номер экрана показывать первым. По умолчанию 0.
timing — кривая анимация. По умолчанию ease.
duration — скорость анимации. По умолчанию 500.
loop — цикл. По умолчанию false.
pagination — показывать пагинацию. По умолчанию true.
keyboard — поддержка клавиатуры. По умолчанию false.
direction — направление прокрутке. По умолчанию vertical.
beforeScroll — событие до…
afterScroll — событие после…

fullPage

ДемоСкачать

Это более сложный плагин в плане параметров, эффектов и функций. Он полностью кроссбраузерный и даже на старых браузерах, таких как Internet Explorer 9, Opera 12, работает корректно. Поддерживает сенсор на мобильных устройствах. Вся документация по настройкам есть на оф. странице, к тому же все на русском. А в архиве, который вы скачаете, есть все примеры по каждой возможности плагина.

SONP-master

Демо Скачать

Третий плагин полноэкранной прокрутки из списка почти такой же, как и первый, в плане простоты и небольшого количества параметров. Плюс у него есть встроенный параллакс эффект, который добавляется с помощью специального класса.

Подключение

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="../sonpScroll.js"></script>

Разметка

<!doctype html>
<html>
    <head>
        <script src="jquery..."></script>
        <script src="sonpScroll.js"></script>
    </head>

    <body>
        <div>
            <p>Section middle size (50%)</p>
        </div>

        <div>
            <p>Section full size (100%) with parallax effect</p>
        </div>
        <div>
            <p>Section small size (200px)</p>
        </div>
    </body>
</html>

jQuery-плагины бесконечной прокрутки: топ 10

При написании этой статьи я понял, что существует два типа людей, между которыми всегда ведется спор: те, кто предпочитает разбиение на страницы и те, кто поддерживает использование бесконечной прокрутки — оба этих «клана» приводят убедительные доказательства в пользу своей точки зрения.

На мой взгляд, и разбиение на страницы, и бесконечная прокрутка имеют свои преимущества. Какой из этих методов выбрать, зависит от критериев каждого конкретного разработчика.

Например, Google использует разбиение на страницы вместо бесконечной прокрутки, и это очень удобно. А социальные сети, такие как Twitter и Facebook всегда будут предпочитать использование бесконечной прокрутки, так как никто не любит каждый раз кликать, чтобы просто прокрутить свою ленту новостей.

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

Лучшее использование этой техники можно найти в Twitter, Facebook и многих других ресурсах.

Ниже приводится список, состоящий из 10 лучших jQuery-плагинов бесконечной прокрутки (скролла).

10 лучших jQuery-плагинов бесконечной прокрутки:

Если вы решили использовать jQuery-плагин бесконечной прокрутки, мы упростим вам задачу. Рассмотренные ниже 10 jQuery-плагинов бесконечной прокрутки поддерживают все функции, которые могут вам понадобиться – просто выберите наиболее подходящий именно для вашего сайта, чтобы сделать пользовательский интерфейс более эффективным и удобным.

Masonry размещает элементы в доступном вертикальном пространстве. Очень популярный плагин с почти 13 000 звезд на github.

Демо-версия Скачать

Хотите создать плавную бесконечную прокрутку? iScroll определенно поможет вам создать плавный jquery- скролл. Благодаря интеллектуальной системе кеширования вы сможете создавать бесконечную прокрутку для реализации надежного пользовательского интерфейса. Кроме jQuery, он поддерживает и javascript.

Демо-версия Скачать

WayPoints упрощают реализацию функций прокрутки страницы. С помощью этого простого плагина можно преобразовать навигацию типа «Предыдущая / Следующая» в бесконечно прокручиваемый AJAX -интерфейс. Для WayPoints доступна подробная документация, поэтому его практическое применение не будет сложной задачей.

Демо-версия Скачать

Очень компактный jQuery-плагин бесконечный прокрутки. Infinite Scroll автоматически добавляет следующую страницу, позволяя не загружать все страницы сразу.

Демо-версия Скачать

jScroll — простой в использовании jQuery-плагин для бесконечной прокрутки, дающий возможность осуществлять гибкую настройку.

Демо-версия Скачать

Этот плагин никогда не позволит вашим пользователям затормозить, находясь в ожидании загрузки новой страницы. jQuery-Endless-Scroll очень гибкий, он включает в себя действительно уникальные функции, такие как добавление дружественных URL-адресов, усечение данных, возможность прокрутки и добавления контента в начало страницы.

Демо-версия Скачать

Infinite AJAX Scroll — это интеллектуальный jQuery-плагин бесконечной прокрутки. Он может преобразовать существующую систему разбиения на страницы в систему бесконечной прокрутки. Данный плагин считывает на сервере ссылки «следующая / предыдущая» существующей страницы и, когда пользователь достигает ее окончания, загружает эти страницы с помощью AJAX.

Этот подход также оптимизирован с точки зрения SEO и очень прост в реализации.

Демо-версия Скачать

Широко используемый jQuery-плагин бесконечной прокрутки, который вы можете легко использовать. Он автоматически добавляет содержимое страницы, используя AJAX, когда пользователь просматривает страницу из встроенного кеша браузера. Плагин прост в освоении и практическом использовании.

Демо-версия Скачать

Еще один простой jQuery-плагин бесконечной прокрутки, позволяющий прокручивать тексты или изображения.

Демо-версия Скачать

Endless.js — это jQuery-плагин, который помогает создавать бесконечные прокрутки (скроллы) для HTML-элементов. Он соединяет нижнюю часть с верхней или левую секцию с правой, создавая тем самым иллюзию бесконечной прокрутки.

Демо-версия Скачать

Я уверен, что эта статья будет полезна для вас, поскольку все перечисленные выше jQuery-плагины бесконечной прокрутки полностью актуальны и активно поддерживаются. Если у вас есть какие-либо вопросы, задайте их в комментариях.

Данная публикация представляет собой перевод статьи «Top 10 jQuery Infinite Scrolling Plugin With Demo» , подготовленной дружной командой проекта Интернет-технологии.ру

20 jQuery плагинов для создания анимации при скроллинге

В этой статье мы рассмотрим 20 лучших jQuery плагинов для создания анимации элементов сайта при прокрутке страницы. Подобные решения используются в веб-разработке довольно давно и уже успели укорениться среди разработчиков.
Итак. С помощью плагинов, которые представлены в этой подборке, вы сможете создать современный сайт с отличной динамикой. Я думаю, каждый человек, который интересуется разработкой сайтов, видел эти плагины в действии. При прокрутке страницы, блоки, различные элементы или текст плавно появляются, выезжают, крутятся и пр. Как показывает практика, клиентам очень нравятся такие фентифлюшки.
Внедрить эффекты при скроллинге в страницу не так сложно, как может показаться на первый взгляд. Все что нужно — это качественный плагин и прямые руки. Конечно, начинающий верстальщик может испытывать трудности, но стоит немного посидеть, разобраться в принципах работы и задача покажется очень простой.
Несмотря на то, что анимация на сайте многим по душе, не стоит переусердствовать, иначе у вас получится перегруженная, визуально плохо воспринимаемая страница, в которой все внимание будет приковано ко всем этим «свистелкам», а не к информации, которую требуется донести до посетителя. К тому же, чем больше подключено скриптов, тем медленнее работает страница. В старых браузерах все это дело может вовсе не работать. Подключайте эффекты с умом. Зачастую, простого плавного, ненавязчивого появления блоков хватает. Такой эффект придает странице плавности и динамики, делает сайт живым. На своей практике мне пришлось много повидать сайтов с эффектами без чувства меры. От такого просто тошнит — единственное чувство, которое возникает. Но, наверное, разработчики надеялись на «Вау эффект». Итак. Используйте все с умом и в меру!
Все плагины абсолютно бесплатны, но я бы рекомендовал ознакомиться с лицензий, так как в некоторых случаях для использования в коммерческих целях нужно выполнить ряд условий.

Смотрите также:
14 JavaScript библиотек для создания анимации
Инструменты для создания HTML5 анимации
10 JavaScript библиотек для SVG анимации

WOW.js

ScrollMagic

Scrollme

Superscrollorama

onScreen

OnePage

FSVS

jInvertScroll

Waypoints

Scrollocue

Horwheel

Scrolling Progress Bar

multiScroll.js

browserSwipe.js

jQuery.panelSnap

Responsive 3D Fold Scroll

HorizonScroll.js

jQuery.scrollSpeed — Плавная прокрутка страницы

ScrollFlow

jQuery Air Sticky Block — липкий блок в сайдбаре

Плавный скролл к элементу — jQuery | Кабинет Веб-мастера

В последнее время бешеной популярностью пользуются типы сайтов под названием Landing Page — или «лендинги». Они удобны тем, что пользователь получает всю необходимую информацию на одной странице. Чаще всего это информация о товаре, которая описывает его со всех сторон, дает понять сильные стороны и преимущества и конечно же оформить заказ.

Такие сайты получаются довольно длинными, поэтому для удобства перемещения по ним часто делают навигационное меню со ссылками на конкретные разделы. Давайте научимся делать так, чтобы при клике на ссылку, сайт плавно прокручивался до нужного места.

Будем считать, что все ссылки, которые есть на странице, ведут на конкретные блоки. Поэтому пишем следующий скрипт:

$("a").click(function () {
    var elementClick = $(this).attr("href");
    var destination = $(elementClick).offset().top;
    $('html, body').animate({ scrollTop: destination }, 600);
    return false;
});

Важно отметить, что ссылка должна быть вида: href=»#id». А элемент, до которого будем крутить:. Вот и вся хитрость.

Альтернативный взгляд

Раньше делали немного по другому — использовали определение браузера — $.browser.safari || $.browser.webkit и в зависимости от условия делали либо $(‘body’).animate(), либо $(‘html’).animate(). С версии 1.9 jQuery — $.browser была удалена и поэтому не сработает. Но можно модифицировать код и получить такой скрипт:

var matched, browser;
jQuery.uaMatch = function( ua ) {
    ua = ua.toLowerCase();
 
    var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
        /(msie)[\s?]([\w.]+)/.exec( ua ) ||
        /(trident)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
        [];
 
    return {
        browser: match[ 1 ] || "",
        version: match[ 2 ] || "0"
    };
};
matched = jQuery.uaMatch( navigator.userAgent );
//IE 11+ fix (Trident)
matched.browser = matched.browser == 'trident' ? 'msie' : matched.browser;
browser = {};
if ( matched.browser ) {
    browser[ matched.browser ] = true;
    browser.version = matched.version;
}
$("a").click(function () {
	var elementClick = $(this).attr("href");
	var destination = $(elementClick).offset().top;
	if (browser.chrome || browser.webkit ) {
		$('body').animate({ scrollTop: destination }, 600);
	} else {
		$('html').animate({ scrollTop: destination }, 600);
	}
	return false;
});

Вот и все. Всем успехов!

Стилизация полосы прокрутки CSS с помощью JavaScript и не только: примеры решений

От автора: если вам нужна стилизация полосы прокрутки CSS прямо сейчас, одним из вариантов является использование набора свойств с префиксом ::webkit.

К сожалению, это не очень помогает в Firefox или Edge, или родственной экосистеме браузеров.

Но если этого достаточно для того, что вам нужно, вы можете сделать это довольно стильно:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

На CodePen есть множество примеров. Также неплохо абстрагироваться с помощью Sass@mixin.

На этом фронте есть хорошие новости! Основы стандартов, которые должны воплотиться в методы стандартизации для стилей полос прокрутки, уже начали реализоваться с желобов (или ширины). Главное свойство будет scrollbar-gutter, и Джефф описал его здесь. Надеюсь, Autoprefixer поможет нам, когда спецификация будет завершена, и браузеры начнут ее реализовывать, чтобы мы могли писать стандартизированную версию и получать из нее любые префиксные версии.

Но что, если нам понадобится кросс-браузерная поддержка? Если вам нужны стильные полосы прокрутки (и я вас понимаю), то вам, вероятно, придется искать JavaScript решение. Для этого должны быть десятки библиотек. Я наткнулся на simplebar, и она выглядит как довольно современная. Вот ее демонстрация:

Вот еще одна простая полоса прокрутки:

Дас Шурма написал очень интересное руководство, в нем создается собственная полоса прокрутки, которая на самом деле при прокрутке не требует JavaScript (хорошо для перфорирования), но требует установки некоторого кода JavaScript.

Пользовательские полосы прокрутки встречаются крайне редко, и это в основном связано с тем, что полосы прокрутки являются одним из оставшихся участков в Интернете, которые в значительной степени не установлены (я смотрю на вас, элемент выбора даты). Вы можете использовать JavaScript, чтобы создать свою собственную полосу прокрутки, но это может быть достаточно затратно и подвержено ошибкам. В этой статье мы будем использовать некоторые нетрадиционные матрицы CSS для создания пользовательского скроллера, который во время прокрутки не требует JavaScript, только некоторый установленный код.

Я вставлю экземпляр здесь:

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Практика верстки сайта на CSS Grid с нуля