Адаптивность на все 100 и отзывчивость на все 200
26 ноября 2015
Автор: Кузьмина Диана
Практически все элементы и компоненты в решении BXReady Интернет-магазин продуманы еще и с точки зрения адаптивности. Теперь вы можете настраивать не только внешний вид элементов, но и как они будут выстраиваться в списках. Это очень удобно для работы с сайтом и является особенной фишкой нашего решения.
Кому-то это может показаться мелочью, но точно не контент-менеджеру (или веб-мастеру), который теперь сможет:
Несколько наглядных примеров.
Вот так сейчас выглядит концентратор на демо-сайте:
В настройках компонента установлена 10-колоночная сетка и вывод 5 элементов при данном разрешении.
Ну, а если вы захотите вывести всего 3 товара при разрешении LG, MD и SM, а при XS - 1 товар (например, создали новую широкую карточку для элементов, либо в разделе всего 3 товара), вы можете поменять эти настройки и сразу же увидите изменения на сайте.
LG, MD, SM
XS
Кстати! с редакции 15.5 практически все компоненты Битрикс работают на базе Bootstrap. Причем сетка используется в 12 колонок.
Это не всегда удобно. К примеру - в одноколоночном дизайне очень классно смотрятся именно пять товаров в ряд, чего в принципе невозможно сделать, используя 12 колоночную сетку. Тем не менее... Мы эту задачку решили.И не просто решили, теперь у каждого из вас есть возможность использовать адаптивность компонент как в 12, так и в 10 колоночном варианте
Возможность применять 12 и 10 колоночные сетки в процессе настройки - это с виду незаметная, но очень мощная фишка, которая может развязать руки веб-мастерам.
Но списки элементов - это еще не все.
Помимо основных компонентов списков, настроить адаптивность можно и у всплывающего меню (при установленном в нем многоколоночном выводе).
LG
MD
Это также особенная фишка нашего проекта. Про меню мы напишем еще специальные статьи, но с точки адаптивности - оно тоже продумано.
Решение BXReady Интернет-магазин не только изначально адаптивно, но и сделано так, чтобы вы еще могли настраивать эту адаптивность под свои потребности.
А теперь важное резюме:
Мы так привыкли к термину адаптивность, что уже забываем про дословный перевод Responsive Design.
Так адаптивность или отзывчивость?
Не будем ломать голову.
С нашим решением вы можете адаптировать свой контент под различные устройства,
а отзывчивость со стороны настроек компонентов мы вам уже обеспечили.
Кому-то это может показаться мелочью, но точно не контент-менеджеру (или веб-мастеру), который теперь сможет:
- спокойно выводить абсолютно разные списки (блоки, плитки, слайдеры) независимо от формата отображения элементов в них,
- легко устанавливать: количество колонок, количество элементов в списках, количество элементов при разных разрешениях.
Несколько наглядных примеров.
Вот так сейчас выглядит концентратор на демо-сайте:
В настройках компонента установлена 10-колоночная сетка и вывод 5 элементов при данном разрешении.
Ну, а если вы захотите вывести всего 3 товара при разрешении LG, MD и SM, а при XS - 1 товар (например, создали новую широкую карточку для элементов, либо в разделе всего 3 товара), вы можете поменять эти настройки и сразу же увидите изменения на сайте.
LG, MD, SM
XS
Кстати! с редакции 15.5 практически все компоненты Битрикс работают на базе Bootstrap. Причем сетка используется в 12 колонок.
Это не всегда удобно. К примеру - в одноколоночном дизайне очень классно смотрятся именно пять товаров в ряд, чего в принципе невозможно сделать, используя 12 колоночную сетку. Тем не менее... Мы эту задачку решили.И не просто решили, теперь у каждого из вас есть возможность использовать адаптивность компонент как в 12, так и в 10 колоночном варианте
Возможность применять 12 и 10 колоночные сетки в процессе настройки - это с виду незаметная, но очень мощная фишка, которая может развязать руки веб-мастерам.
Но списки элементов - это еще не все.
Помимо основных компонентов списков, настроить адаптивность можно и у всплывающего меню (при установленном в нем многоколоночном выводе).
LG
MD
Это также особенная фишка нашего проекта. Про меню мы напишем еще специальные статьи, но с точки адаптивности - оно тоже продумано.
Решение BXReady Интернет-магазин не только изначально адаптивно, но и сделано так, чтобы вы еще могли настраивать эту адаптивность под свои потребности.
А теперь важное резюме:
Мы так привыкли к термину адаптивность, что уже забываем про дословный перевод Responsive Design.
Так адаптивность или отзывчивость?
Не будем ломать голову.
С нашим решением вы можете адаптировать свой контент под различные устройства,
а отзывчивость со стороны настроек компонентов мы вам уже обеспечили.
Предлагаем еще прочесть