Массив элементов

Содержимое каждой панели - элементы, которые содержатся в ячейчках и имеют определенные модификаторами и классами свойства.

{$cells = [ 
'logo', 
'search' => 'uk-flex-center uk-width-expand', 
'phone1, divider_small, phone2' 
]}

Переменная $cells является массивом, в котором содержатся:

Ячейка панели

Ячейка является контейнером для содержащихся в ней элементов.
Свойства ячейки определяются классами ячейки и свойствами контейнера панели.
По умолчанию, ширина ячейки равна содержимому (ширине элементов).

Каждая панель может иметь от одной до нескольких ячеек.

Каждая ячейка - это flex-элемент .

{$cells = [ 
'logo',
'search' => 'uk-flex-center uk-width-expand',
'phone1, divider_small, phone2'
]}

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

Содержимое ячейки

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

'logo'

А может наоборот: несколько элементов и несколько классов.

'viewed_toggle + favorite_toggle + compare_toggle + account_toggle + cart_toggle, divider_small, search' => 'uk-flex-right uk-width-expand'

Элементы, как и классы, заключены в одинаные кавычки, между ними оператор "=>"

Элементы

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

  • Контакты
    contacts_toggle Иконка "контакты"
    Отображение иконка - кнопка
    Функционал Является svg иконкой, клик по которой открывает выезжающую панель в которой размещаются указаннные в настройках данные (разделе "контакты").
    Настройки -
    address Адрес
    Отображение Строка текста - ссылка
    Содержимое строки не переносится на другую строку
    * Для перехода текста на новую строку, в тексте адреса используйте элемент html - <br />
    Функционал В случае, если в настройках темы (разделе "контакты") в поле "ссылка на карту", указанна ссылка на карту, то клик по элементу открывает карту во всплывающем окне.
    Настройки Содержимое строки меняется в настройках темы, разделе "контакты".
    email Email
    Отображение Строка текста
    Может содержать "подсказку", если в поле "подсказка" (настройки темы в разделе "контакты") есть текст
    Функционал При включенном параметре "Автоматически создавать ссылки для телефонов или электронной почты", email заключается в ссылку, клик открывает установленную почтовую программу.
    Настройки Содержимое строки меняется в настройках темы, разделе "контакты".
    phone1 Телефон 1
    Отображение Строка текста
    Может содержать "подсказку", если в поле "подсказка" (настройки темы в разделе "контакты") есть текст
    Функционал При включенном параметре "Автоматически создавать ссылки для телефонов или электронной почты", телефон заключается в ссылку, клик открывает программу звонка (на мобильных - набор номера).
    В случае если не указан номер, но есть "подсказка", элемент будет отображен, в нем будет одна подсказка без иконки и номера.
    Настройки Содержимое строки меняется в настройках темы, разделе "контакты".
    phone2 Телефон 2
    Отображение Имеет те же свойства отображения, что и элемент phone1.
    Два номера созданы, как отдельные элементы для большей гибкости при формировании шаблона. Например, так они могут размещаться вместе (в зависимости от модификаторов: друг под другом или в одну строку).
    Функционал Имеет тот же функционал, что и элемент phone1.
    Настройки Содержимое строки меняется в настройках темы, разделе "контакты".
  • Личный кабинет
    account_toggle Вход в личный кабинет
    Отображение иконка - кнопка
    в случае если посетитель авторизирован, иконка закрашивается основным цветом,
    если нет - цветом текста.
    Функционал В случае если клиент авторизировался на сайте, клик по иконке вызывает выезжающую панель с сылками личного кабинета
    В обратном случае, клик по иконке вызывает всплывающий блок с формой авторизации / регистрации (при регистрации посетитель остается на той же странице).
    Настройки "Сайт" - "личный кабинет"
  • Форма поиска
    search Форма поиска
    Отображение Форма поиска содержит поле для ввода текста и кнопку отправки формы.
    Поле поиска займет 100% ширины ячейки, вне зависимости от окружающих элементов, т.е. будет размещаться всегда на новой строке.
    Если в ячейке не указанна ширина и ячейка ничем не ограничена, поле поиска примет ширину в 198px.
    Функционал При включенной настройке (настройка темы, раздел "форма поиска") "результаты поиска в выпадающем меню", при вводе первых 3 символов выпадает список первых найденых товаров.
    * только для приложения магазин.
    Настройки Настройка темы в приложении магазин - раздел "форма поиска".
    search_toggle Иконка поиска
    Отображение Иконка - кнопка , клик по которой открывает выезжающую панель, в которой размещаются форма поиска.
    Функционал Автопоиск в выезжающей панели недоступен.
    Клик по кнопке лупа (найти) перенаправляет на страницу поиска.
    Настройки Настройка темы в приложении магазин - раздел "форма поиска".
  • Логотип
    logo Логотип для десктопов
    Отображение Выводит блок, содержащий в себе 3 элемента: изображение для больших экранов, заголовок, слоган. Блок принимает размеры дочерних элементов.
    Функционал На всех страницах, кроме главной, является ссылкой на главную.
    Настройки Настройка темы - раздел "Логотип".
    logo_short Логотип для мобильных
    Отображение Выводит блок, содержащий в себе 1 элемента: изображение для телефонов. Блок принимает размеры загруженного изображения.
    Функционал На всех страницах, кроме главной, является ссылкой на главную.
    Настройки Настройка темы - раздел "Логотип".
  • Пользовательские списки товаров
    viewed_toggle Список "просмотренные товары"
    Отображение Иконка "кнопка", в правом верхнем углу которой отображается кол-во товаров в списке. Икона закрашиватеся основным цветом, если в ней есть товары, в обратном случае ее цвет - цвет текста.
    Функционал Клик по кнопке открывает страницу просмотренных товаров.
    Товары в список добавляются автоматически при посещении посетителем страницы товара.
    Настройки Отключить можно в настройках темы, в разделе "общие настройки"
    compare_toggle Список "товары в сравнении"
    Отображение Иконка кнопка, в правом верхнем углу которой отображается кол-во товаров в списке. Икона закрашиватеся основным цветом если в ней больше двух товаров, в обратном случае ее цвет - цвет текста.
    Функционал Клик по кнопке открывает страницу сравнения товаров.
    Товары в список добавляются при клике по иконке в блоке товара на странице товара и в списке товаров.
    Настройки Отключить можно в настройках темы в разделе "общие настройки"
    favorite_toggle Список "избранные товары"
    Отображение Иконка кнопка, в правом верхнем углу которой отображается кол-во товаров в списке. Икона закрашиватеся основным цветом если в ней есть товары, в обратном случае ее цвет - цвет текста.
    Функционал Клик по кнопке открывает страницу со списком избранных товаров.
    Товары в список добавляются при клике по иконке в блоке товара на странице товара и в списке товаров.
    Настройки Отключить можно в настройках темы в разделе "общие настройки"
  • Корзина
    cart Полная корзина
    Отображение Блок с информацией о товаров в корзине содержит название, кол-во товаров, иконку, стоимость товаров в корзине
    Функционал В зависимости от настроек, расширенная корзина может появляться либо
    по клику на элементе - выезжающая панель,
    либо при наведении - всплывающий блок.
    Настройки В настройках темы в разделе "корзина".
    cart_toggle Краткая корзина
    Отображение Иконка кнопка, в правом верхнем углу которой отображается кол-во товаров в корзине.
    Функционал В зависимости от настроек, расширенная корзина может появляться либо
    по клику на элементе - выезжающая панель,
    либо при наведении - всплывающий блок.
    Настройки В настройках темы в разделе "корзина".
  • Блок навигации
    menu_toggle Блок навигации
    Отображение Иконка кнопка
    Функционал Клик по иконке открывает выезжающую панель с сылками заданными в настройках
    Настройки В настройках темы в разделе "блок меню".
  • Элементы приложения магазин
    currency_toggle Выбор валюты
    Отображение Выпадающий список валют
    Функционал При наведении на название выбранной валюты, выпадает список доступных валют.
    * доступно только в приложении магазин.
    Настройки В настройках магазина, разделе "валюты".
    locale_toggle Выбор локализации
    Отображение Выпадающий список локализации
    Функционал При наведении на название выбранной локализации, выпадает список доступных вариантов локализации.
    * доступно только в приложении магазин и меняет локализацию витрины.
    Настройки -
  • Разделители
    divider Разделитель
    Отображение Не отображается.
    Функционал Предназначен для увеличения отступов между элементами ячейки, как по горизонтали, так и по вертикали (в зависимости от модификаторов).
    Настройки -
    divider_small Малый разделитель
    Отображение Не отображается.
    Функционал Предназначен для увеличения отступов между элементами ячейки, как по горизонтали, так и по вертикали (в зависимости от модификаторов).
    Настройки -
  • Ссылки категорий магазина
    categories Список ссылок категории
    Отображение Каждый пункт является текстовой ссылкой.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут перенесены на другую строку
    Занимает 100% ширины ячейки (не может находится на одной строке с другими элементами ячейки).
    Выводятся категории первого уровня (не имеют вложенных категорий).
    Функционал Клик по ссылке открывает страницу категории.
    Настройки В настройках темы, раздел "шапка сайта"
    Запретить вывод какой-либо категории в шапке сайта, можно прописав в настройках категории в доп. параметрах not_in_header=1
    categories_nav Меню навигации категорий
    Отображение Каждый пункт кнопка.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут выходить за край родительской ячейки.
    Занимает 100% ширины ячейки (не может находится на одной строке с другими элементами ячейки).
    Могут содержать дочернее меню навигации.
    Функционал Клик на кнопку открывает страницу категории. При наведение появляется блок дочерних элементов.
    Настройки В настройках темы, раздел "шапка сайта"
    Запретить вывод какой либо категории в шапке сайта, можно прописав в настройках категории в доп. параметрах not_in_header=1
    categories_nav_more Меню навигации категорий с кнопкой "троеточие"
    Отображение Каждый пункт кнопка.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут заключены в кнопку "троеточие".
    Занимает минимальную ширину - ширину кнопки "троеточие", по этой причине необходимо указывать ячейке ширину с помощью классов.
    Могут содержать дочернее меню навигации.
    Функционал Клик на кнопку "троеточие" не вызывает никаких действий, при наведении на "троеточие" выпадает "последовательно выпадающий список дочерних ссылок".
    Настройки В настройках темы, раздел "шапка сайта"
    Запретить вывод какой-либо категории шапке сайта можно прописав в настройках категории в доп. параметрах not_in_header=1
    categories_nav_short Выпадающий блок навигации категорий
    Отображение Предсталяет собой кнопку, текст которой берется из настроек темы.
    Занимает ширину текстового блока (заголовка), может размещаться на одной строке с другими элементами.
    Функционал Клик на кнопку с заголовком не производит никаких действий, при наведении на кнопку появляется блок дочерних элементов.
    Настройки В настройках темы, раздел "шапка сайта"
    Запретить вывод какой-либо категории шапке сайта можно прописав в настройках категории в доп. параметрах not_in_header=1
  • Ссылки на страницы
    pages Список ссылок на страницы
    Отображение Каждый пункт является текстовой ссылкой.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут перенесены на другую строку
    Занимает 100% ширины ячейки (не может находится на одной строке с другими элементами ячейки).
    Выводятся ссылки первого уровня (не имеют вложенных).
    Функционал Клик по ссылке открывает страницу.
    Настройки -
    pages_nav Меню навигации страниц
    Отображение Каждый пункт кнопка.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут выходить за край родительской ячейки.
    Занимает 100% ширины ячейки (не может находится на одной строке с другими элементами ячейки).
    Могут содержать дочернее меню навигации.
    Функционал Клик на кнопку открывает страницу. При наведение появляется блок дочерних элементов.
    Настройки В настройках темы, раздел "шапка сайта"
    pages_nav_more Меню навигации страниц с кнопкой "троеточие"
    Отображение Каждый пункт кнопка.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут заключены в кнопку "троеточие".
    Занимает минимальную ширину - ширину кнопки "троеточие", по этой причине необходимо указывать ячейке ширину с помощью классов.
    Могут содержать дочернее меню навигации.
    Функционал Клик на кнопку "троеточие" не вызывает никаких действий, при наведении на "троеточие" выпадает "последовательно выпадающий список дочерних ссылок".
    Настройки В настройках темы, раздел "шапка сайта"
    pages_nav_short Выпадающий блок навигации страниц
    Отображение Предсталяет собой кнопку, текст которой берется из настроек темы.
    Занимает ширину текстового блока (заголовка), может размещаться на одной строке с другими элементами.
    Функционал При клике на кнопку с заголовком не происходит никаких действий. При наведении выпадает "последовательно выпадающий список дочерних ссылок".
    Настройки В настройках темы, раздел "шапка сайта"
  • Ссылки на приложения
    apps Список ссылок на приложения
    Отображение Каждый пункт является текстовой ссылкой.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут перенесены на другую строку
    Занимает 100% ширины ячейки (не может находится на одной строке с другими элементами ячейки).
    Выводятся ссылки первого уровня (не имеют вложенных).
    Функционал Клик по ссылке открывает главную страницу приложения.
    Настройки Изменить порядок, текст и адрес URL ссылок можно в настройках сайта в пункте "{$wa->apps()} меню"
    apps_nav Меню навигации приложений
    Отображение Каждый пункт кнопка.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут выходить за край родительской ячейки.
    Занимает 100% ширины ячейки (не может находится на одной строке с другими элементами ячейки).
    Функционал Клик на кнопку открывает главную страницу приложения.
    Настройки Изменить порядок, текст и адрес URL ссылок можно в настройках сайта в пункте "{$wa->apps()} меню"
    apps_nav_more Меню навигации приложение с кнопкой "троеточие"
    Отображение Каждый пункт кнопка.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут заключены в кнопку "троеточие".
    Занимает минимальную ширину - ширину кнопки "троеточие", по этой причине необходимо указывать ячейке ширину с помощью классов.
    Функционал Клик на кнопку "троеточие" не вызывает никаких действий, прии наведении на "троеточие" выпадает "последовательно выпадающий список дочерних ссылок".
    Настройки Изменить порядок, текст и адрес URL ссылок можно в настройках сайта в пункте "{$wa->apps()} меню"
    apps_nav_short Выпадающий блок навигации страниц
    Отображение Предсталяет собой кнопку, текст которой берется из настроек темы.
    Занимает ширину текстового блока (заголовка), может размещаться на одной строке с другими элементами.
    Функционал Клик на кнопку с заголовком не производит никаких действий, при наведении на кнопку появляется блок дочерних элементов.
    Настройки В настройках темы, раздел "шапка сайта"

Модификаторы

'viewed_toggle + favorite_toggle + compare_toggle, account_toggle + cart_toggle, search' => 'uk-width-expand'

Элементы в группе следуют друг за другом и разделены модификаторами.

Модификатора всего два: символ + (плюс) и , (символ запятой).

+ (плюс) - обозначает что последующий элемент должен быть размещен на той же строке.
* только если позволяет ширина ячейки (контейнера).

, (символ запятой) - все, что следует после запятой переносится на новую строку.

Пример приведенного кода:

Классы

Классы - прописываются для ячейки, определяют свойства самой ячейки и размещения находящихся в ней элементов.

'logo_short' => 'uk-flex-center uk-width-expand'

В коде размещаются после списка элементов, через опереатор => и разделенны между собой пробелом.

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

  • Ширина ячейки

    uk-width-auto
    * значение по умолчанию
    ячейка ведет себя как inline-block элемент, имеет ширину равную ширине содержащихся в ней элементов.

    Относительная ширина

    uk-width-expand
    Ячейка будет пытаться занять все допустимое свободное место до достижения ширины родительского блока контейнера.
    * обычно прописывают одной из ячеек панели для того, чтобы ячейки занимали 100% ширины панели.

    Ширина в %

    * % рассчитываются от ширины панели

    uk-width-1-1
    Ширина 100%.
    * прописывают если в панели размещается одна ячейка.

    uk-width-1-2
    Ширина 50%.

    uk-width-1-3
    Ширина 33.32%

    uk-width-2-3
    Ширина 66.64%

    uk-width-1-4
    Ширина 25%

    uk-width-3-4
    Ширина 75%

    uk-width-1-5
    Ширина 20%

    uk-width-2-5
    Ширина 40%

    uk-width-3-5
    Ширина 60%

    uk-width-4-5
    Ширина 80%

    uk-width-1-6
    Ширина 16.66%

    uk-width-5-6
    Ширина 83.31%

    Фиксированная ширина

    uk-width-small
    Фиксированный размер равный 150px.

    uk-width-medium
    Фиксированный размер равный 300px.

    uk-width-large
    Фиксированный размер равный 450px.

    uk-width-xlarge
    Фиксированный размер равный 600px.

    uk-width-xxlarge
    Фиксированный размер равный 750px.

  • Выравнивание содержимого по горизонтали

    uk-flex-left
    * значение по умолчанию
    Выравнивание по левому краю ячейки.

    uk-flex-center
    Выравнивание по центру ячейки.

    uk-flex-right
    Выравнивание по правому краю ячейки.

    uk-flex-between
    Элементы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера.

    uk-flex-around
    Элементы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.

  • Выравнивание содержимого по вертикали

    uk-flex-middle
    * значение по умолчанию
    Элементы выравниваются таким образом, что центр элементов группы совпадает с центром родительского блока.

    uk-flex-stretch
    элементы растягиваются таким образом, чтобы занять всё доступное пространство ячейки по вертикали.

    uk-flex-top
    элементы размещаются у верхней границы родительского блока.

    uk-flex-bottom
    Выравнивание по правому краю ячейки.

  • Переход элементов на новую строку

    * Элементы в ячейке находящиеся на одной строке. В случае, недостаточной для ширины, неуместившиеся элементы переходят на новую строку

    uk-flex-nowrap
    Запрещает переход элементов на новую строку, элементы выстраиваются в одну линию вне зависимости от ширины блока контейнера и в случае недостаточной ширины выйдут за край (в зависимости от выравнивания за правый или левый) ячейки.

  • Сокрытие и видимость элементов от контрольных точек

    * При формировании панелей для экранов различной ширины требуется отобразить/скрыть те или иные ячейки. Для этих целей, к классам добавляются "модификаторы ширины экрана" (контрольные точки).

    uk-hidden@s
    Скрывает ячейку при ширине экрана более 640px.
    640 - ∞

    uk-visible@s
    Скрывает ячейку при ширине экрана менее 639px.
    0 - 639

    uk-hidden@m
    Скрывает ячейку при ширине экрана более 960px.
    960 - ∞

    uk-visible@m
    Скрывает ячейку при ширине экрана менее 959px.
    0 - 959

    uk-hidden@l
    Скрывает ячейку при ширине экрана более 1200px.
    1200 - ∞

    uk-visible@l
    Скрывает ячейку при ширине экрана менее 1199px.
    0 - 1199

    uk-hidden@xl
    Скрывает ячейку при ширине экрана более 1600px.
    1600 - ∞

    uk-visible@xl
    Скрывает ячейку при ширине экрана менее 1599px.
    0 - 1599

  • Ширина элементов от контрольных точек

    * При формировании панелей для экранов различной ширины требуется ширину тех или иных ячеек. Для этих целей, к классам добавляются "модификаторы ширины экрана" (контрольные точки).

    Ширина более 640px

    uk-width-1-1@s
    Занимает 100% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-1-2@s
    Занимает 50% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-1-3@s
    Занимает 33.32% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-2-3@s
    Занимает 66.64% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-1-4@s
    Занимает 25% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-3-4@s
    Занимает 75% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-1-5@s
    Занимает 20% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-2-5@s
    Занимает 40% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-3-5@s
    Занимает 60% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-4-5@s
    Занимает 80% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-1-6@s
    Занимает 16.66% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-5-6@s
    Занимает 83.31% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-small@s
    Занимает 150px ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-medium@s
    Занимает 300px ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-large@s
    Занимает 450px ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-xlarge@s
    Занимает 600px ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-xxlarge@s
    Занимает 750px ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-auto@s
    Занимает ширину равную ширине содержащихся в ней элементов при разрешении экрана более 640px
    640 - ∞

    uk-width-expand@s
    Занимает всю доступную ширину при разрешении экрана более 640px
    640 - ∞


    Ширина более 960px

    uk-width-1-1@m
    Занимает 100% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-1-2@m
    Занимает 50% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-1-3@m
    Занимает 33.32% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-2-3@m
    Занимает 66.64% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-1-4@m
    Занимает 25% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-3-4@m
    Занимает 75% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-1-5@m
    Занимает 20% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-2-5@m
    Занимает 40% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-3-5@m
    Занимает 60% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-4-5@m
    Занимает 80% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-1-6@m
    Занимает 16.66% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-5-6@m
    Занимает 83.31% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-small@m
    Занимает 150px ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-medium@m
    Занимает 300px ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-large@m
    Занимает 450px ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-xlarge@m
    Занимает 600px ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-xxlarge@m
    Занимает 750px ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-auto@m
    Занимает ширину равную ширине содержащихся в ней элементов при разрешении экрана более 960px
    960 - ∞

    uk-width-expand@m
    Занимает всю доступную ширину при разрешении экрана более 960px
    960 - ∞


    Ширина более 1200px

    uk-width-1-1@l
    Занимает 100% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-1-2@l
    Занимает 50% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-1-3@l
    Занимает 33.32% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-2-3@l
    Занимает 66.64% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-1-4@l
    Занимает 25% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-3-4@l
    Занимает 75% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-1-5@l
    Занимает 20% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-2-5@l
    Занимает 40% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-3-5@l
    Занимает 60% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-4-5@l
    Занимает 80% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-1-6@l
    Занимает 16.66% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-5-6@l
    Занимает 83.31% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-small@l
    Занимает 150px ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-medium@l
    Занимает 300px ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-large@l
    Занимает 450px ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-xlarge@l
    Занимает 600px ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-xxlarge@l
    Занимает 750px ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-auto@l
    Занимает ширину равную ширине содержащихся в ней элементов при разрешении экрана более 1200px
    1200 - ∞

    uk-width-expand@l
    Занимает всю доступную ширину при разрешении экрана более 1200px
    1200 - ∞


    Ширина более 1600px

    uk-width-1-1@xl
    Занимает 100% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-1-2@xl
    Занимает 50% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-1-3@xl
    Занимает 33.32% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-2-3@xl
    Занимает 66.64% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-1-4@xl
    Занимает 25% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-3-4@xl
    Занимает 75% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-1-5@xl
    Занимает 20% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-2-5@xl
    Занимает 40% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-3-5@xl
    Занимает 60% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-4-5@xl
    Занимает 80% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-1-6@xl
    Занимает 16.66% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-5-6@xl
    Занимает 83.31% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-small@xl
    Занимает 150px ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-medium@xl
    Занимает 300px ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-large@xl
    Занимает 450px ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-xlarge@xl
    Занимает 600px ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-xxlarge@xl
    Занимает 750px ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-auto@xl
    Занимает ширину равную ширине содержащихся в ней элементов при разрешении экрана более 1600px
    1600 - ∞

    uk-width-expand@xl
    Занимает всю доступную ширину при разрешении экрана более 1600px
    1600 - ∞

  • Выравнивание содержимого по горизонтали от контрольных точек

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

    Ширина более 640px

    uk-flex-left@s
    Выравнивание элементов по левому краю ячейки. При разрешении экрана более 640px
    640 - ∞

    uk-flex-center@s
    Выравнивание элементов по центру ячейки. При разрешении экрана более 640px
    640 - ∞

    uk-flex-right@s
    Выравнивание элементов по правому краю ячейки. При разрешении экрана более 640px
    640 - ∞

    uk-flex-between@s
    Элементы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. При разрешении экрана более 640px
    640 - ∞

    uk-flex-around@s
    Элементы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. При разрешении экрана более 640px
    640 - ∞


    Ширина более 960px

    uk-flex-left@m
    Выравнивание элементов по левому краю ячейки. При разрешении экрана более 960px
    960 - ∞

    uk-flex-center@m
    Выравнивание элементов по центру ячейки. При разрешении экрана более 960px
    960 - ∞

    uk-flex-right@m
    Выравнивание элементов по правому краю ячейки. При разрешении экрана более 960px
    960 - ∞

    uk-flex-between@m
    Элементы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. При разрешении экрана более 960px
    960 - ∞

    uk-flex-around@m
    Элементы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. При разрешении экрана более 960px
    960 - ∞


    Ширина более 1200px

    uk-flex-left@l
    Выравнивание элементов по левому краю ячейки. При разрешении экрана более 1200px
    1200 - ∞

    uk-flex-center@l
    Выравнивание элементов по центру ячейки. При разрешении экрана более 1200px
    1200 - ∞

    uk-flex-right@l
    Выравнивание элементов по правому краю ячейки. При разрешении экрана более 1200px
    1200 - ∞

    uk-flex-between@l
    Элементы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. При разрешении экрана более 1200px
    1200 - ∞

    uk-flex-around@l
    Элементы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. При разрешении экрана более 1200px
    1200 - ∞


    Ширина более 1600px

    uk-flex-left@xl
    Выравнивание элементов по левому краю ячейки. При разрешении экрана более 1600px
    1600 - ∞

    uk-flex-center@xl
    Выравнивание элементов по центру ячейки. При разрешении экрана более 1600px
    1600 - ∞

    uk-flex-right@xl
    Выравнивание элементов по правому краю ячейки. При разрешении экрана более 1600px
    1600 - ∞

    uk-flex-between@xl
    Элементы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. При разрешении экрана более 1600px
    1600 - ∞

    uk-flex-around@xl
    Элементы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. При разрешении экрана более 1600px
    1600 - ∞

Пример использования классов ячеек от контрольных точек.

{$cells = [
'logo' => 'uk-width-1-4  uk-visible@l',
'logo_short' => 'uk-width-1-2  uk-hidden@l',
'currency_toggle + locale_toggle + viewed_toggle + favorite_toggle + compare_toggle + account_toggle + cart_toggle' => 'uk-flex-right uk-flex-center@l uk-width-1-2 uk-width-expand@l',
'phone1, divider_small, phone2' => 'uk-width-1-4 uk-flex-right uk-visible@l'
]}

В приведенном примере 4 ячейки:

1-я содержит "Логотип для десктопов" - отображается при ширине > 1200px (скрыта при разрешении < 1200px), имеет ширину 25%, по умолчанию выравнено по левому краю

2-я содержит "Логотип для мобильных" - отображается при ширине < 1200px (скрыта при разрешении > 1200px), имеет ширину 50%, по умолчанию выравнено по левому краю

3-я содержит различные иконки и кнопки - при ширине > 1200px занимает все доступное пространство и содержимое выравнено по центру, при ширине < 1200 имеет ширину в 50% и выравнивает содержимое по правому краю

4-я содержит контактные данные - отображается при ширине > 1200px (скрыта при разрешении < 1200px), имеет ширину 25%, содержимое выравнено по правому краю.

При ширине экрана свыше 1200px

При ширине экрана менее 1200px

Есть вопросы или предложение?

Для того что бы задать вопрос, Вам необходимо авторизоваться или зарегистрироваться