Skip to content

Latest commit

 

History

History
32 lines (24 loc) · 2.2 KB

README.md

File metadata and controls

32 lines (24 loc) · 2.2 KB

Динамический адаптив (Dynamic Adapt)

JS функция для комфортной адаптивной верстки. Позволяет "перебрасывать" объекты DOM в зависимости от потребностей.

Применение.

Для перещаемого объекта пишем HTML атрибут - data-da и указываем параметры

Параметры

data-da="куда,какой,когда,тип"

Название Значение по-умолчанию Описание
куда (имя класса) [обязательный] Класс блока, в который нужно будет "перебросить" текущий объект. Если класс не уникален, объек перебросится в первый элемент с этим классом.
какой last Позиция на которую нужно переместить объект внутри родителя куда. Кроме цифр можно указать слова first (в начало блока) или last (в конец блока)
когда 767 Брейкпоинт при котором перемещать объект.
тип* max Тип срабатывания брейкпоинта. max - Desktop First, min - Mobile First. *При использовании min в некоторых (редких) ситуациях может возникнуть неточность порядка вывода элементов.

Примеры

<div data-da="content__column_garden" class="content__block">Я Коля</div>
<div data-da="content__column_garden,2" class="content__block">Я Коля</div>
<div data-da="content__column_garden,2,992" class="content__block">Я Коля</div>
<div data-da="content__column_garden,2,992,min" class="content__block">Я Коля</div>

Подробнее

https://www.youtube.com/watch?v=QKuMr575vlQ

Спасибо за идеи и предложения

last и first - идея Mark. Параметры по умолчанию - идея mubat (https://github.com/mubat)