Основные компоненты
UIkit 2 предлагает более 30 модульных и расширяемых компонентов, которые можно комбинировать друг с другом. Компоненты разделены в соответствии с их назначением и функциональностью.
Точки останова : Breakpoints
Фреймворк UIkit 2 включает в себя ряд адаптивных классов для разных размеров области просмотра. В этой таблице представлен обзор доступных точек останова и связанных с ними устройств.
| Size |
Breakpoints |
Device |
| Mini |
up to 479px |
Phones portrait |
| Small |
480px to 767px |
Phones landscape |
| Medium |
768px to 959px |
Tablets portrait |
| Large |
960px to 1219px |
Desktops & tablets landscape |
| Xlarge |
1220px and larger |
Large Desktops |
Архитектура CSS
Чтобы избежать конфликтов с другими CSS-фреймворками, все классы UIkit 2 имеют пространство имен с префиксом uk-. Компоненты делятся на сам компонент, sub-объект и модификаторы, чьи имена классов всегда выбирают имя своего компонента.
Объяснение
| Объект |
Описание |
| Компонент |
Компоненты абстрагируют повторяющиеся части веб-сайта в модули на основе классов, например, кнопки. Их можно комбинировать и использовать повторно. |
| Sub-объект |
Подобъекты помещаются в компонент для повышения и улучшения его функциональности. Например, кнопка закрытия в окне предупреждения. |
| Модификатор |
Классы модификаторов изменяют стиль компонентов и их подобъектов, таких как цвета и размеры кнопок. |
- Стили по умолчанию для элементов HTML. Базовые элементы c UIkit 2.
- Utility - коллекция дополнительных и полезных классов.
- Grid - Система сетки на базе UIKit 2.
- Оформленные блок-панели для выделения определенных разделов контента.
- Блок-контейнер, к которому можно применить фон и необходимые отступы. Разделы с контентом в стилизованных блоках
- Статьи на страницах с заголовками и метаданными.
- Создавайте комментарии к различным материалам.
- Используйте возможности Flexbox для решения специфических задач.
- Полноэкранные тизеры с использованием изображений, объектов, фреймов. Растяните изображение или видео, чтобы оно было под размер контейнера.
- Панель навигации Navbar
- Навигация списком Nav устанавливает различные стили для навигации списком.
- Суб-навигация : Subnav
- Навигационная цепочка. Хлебные крошки
- Нумерация страниц. Пагинация для навигации по страницам с указанием номеров текущей и соседней.
- Smooth scroll - Плавная прокрутка для любого элемента на странице сайта.
- Переключатель Toggle позволит скрыть, переключить или изменить внешний вид различного содержимого.
- Переключатель контента. Динамический переход по различным областям содержимого.
- Off-canvas - сайдбар вне холста, вертикальная отзывчивая навигационная панель, сдвигаемая, правосторонняя и левостороняя, анимированная и адаптивная.
- Диалоговое модальное окно с разными стилями и переходами.
- Выпадающий список Dropdown при наведении курсора, либо при нажатии на сам переключатель.
- Коллекция эффективных анимаций для использования на веб-странице с дополнительными модификаторами.
- Оверлей - создавайте эффект наложения изображения, используйте разные стили, позиции.
- При создании диалогового окна, информационных сообщений пользователю используйте компонент Alert.
- Масштабируемые векторные иконки UIkit 2 с использованием иконочного шрифта Font Awesome.
- Красивые кнопки с модификаторами цвета и размера.
- Создавайте красивые формы с различными стилями и макетами. Стилизованные элементы управления формы.
- Создание адаптивных таблиц, которые могут быть разных стилей.