Позиции. Настройка

Шаблоны

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

Шаблон - вкладка Positions

  • Добавляете строку, выбираете позицию и заполняете поля.
  • На соответствующей странице Демо-сайта - практически все нарисовано)
  • Настройки на скрине соответствуют оформлению соответствующих позиций на странице.

Код классов. Таблица соответствия

Код Классы Пояснения
2 uk-child-width-1-2 2 дочерних колонки (по 50%)
2s uk-child-width-1-2@s тоже, но до разрешения 640px (ниже 1)
3s uk-child-width-1-3@s тоже, но 3 колонки (по 33%)
3m 2s uk-child-width-1-3@m uk-child-width-1-2@s до 960 - 3 колонки, до 640 -2
4l 3m 2s uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-2@s до 1200 - 4, далее также
4m 3s  aналогично  
5xl 4l 3m 2s  aналогично  
6xl 5l 4m 2s  aналогично  
7s uk-child-width-auto@s количество и ширина колонок определяется автоматически
7m 2s uk-child-width-auto@m uk-child-width-1-2@s тоже до 960, до 640 - 2
8s uk-child-width-expad@s тоже как 7s, но заполняется все свободное пространство
Это далеко не полный список классов. Список генерируется из библиотеки, поставляемой вместе с шаблоном. И его можно тоже настраивать. Когда будет статистика, какие сочетания классов наиболее востребованы, список можно будет оптимизировать.

У кого-то могут вызвать трудности заполнение поля Доп. css-классы

Как справочник по классам рекомендую руководство по компонентам [grid] [width] и  [flex] на сайте Uikit

Дополнительные настройки доступны в самих модулях во вкладке Дополнительные параметры. Например Блок-3 в позиции bottom-b, донастроен индивидуально в модуле. Настройки на скрине

menu cols

Чисто в демонстрационных целях я добавил класс к заголовку и класс к модулю (выравнивание по центру. А еще модуль занимает 2 позиции вместо 1. Здесь используется настройка Размер Bootstrap. Шаблон не использует Bootstrap, просто настройка предназначенная для bootstrap переопределена под UIKIT.

Переопределена в файле отвечающем за стиль модуля, макете Chrome. В шаблоне 2 таких макета:

  • u3html - аналог системного html5
  • positionHtml - специализированный стиль для позиций шаблона. При настройке в шаблоне определенной позиции, например bottom-b, он автоматеически подключается к модулю.

Это тема для отдельного материала. Сейча коротко, как этим можно пользоваться.

Если вы включили стиль u3html, то можно настройкой Размер bootstrap устанавливать ширину модуля.

1 - 100%
2 - 1/2 (50%)
3 - 1/3
...
7 - auto
8 - expand (занимает свободное пространство)
9 - small (300px)
10 - medium (450px)
11 - large (600px)

Возвращаясь к примеру с позицией bottom-b и параметрам модуля Блок3. Позиция настроена в шаблоне как 4-местная, модулей всего 3. Последний модуль настраивается из собственных настроек. ему задается ширина expand - т.е. он занимает все свободное пространстрво для 2 свободных позиций.

продолжение позже...

Simple5u. Настройка