Skip to content

Динамический адаптив. JS функция для комфортной адаптивной верстки

Notifications You must be signed in to change notification settings

vevgeniy85/dynamic_adapt

This branch is 30 commits behind FreelancerLifeStyle/dynamic_adapt:master.

Folders and files

NameName
Last commit message
Last commit date
Oct 14, 2020
Oct 15, 2020
Oct 14, 2020
Oct 15, 2020
May 13, 2020

Repository files navigation

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

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

Применение.

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

Параметры

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

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

Примеры

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

Подробнее

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

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

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

About

Динамический адаптив. JS функция для комфортной адаптивной верстки

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 74.9%
  • HTML 13.2%
  • CSS 11.9%