Компоненты UIkit 3

Красивый адаптивный аккордеон для сайта с анимацией при развертывании. Каждый элемент, при нажатии/клике на заголовок элемента, может быть «развёрнут» или «раскрыт».

Компонент «Алерт» - взаимодействие с пользователем. Уведомления на странице. Отображение успешного или положительного сообщения. Как установить уведомление в состояние предупреждения и как отобразить сообщение об ошибке. Как сделать кнопку закрытия...

Компонент «Выравнивание» позволит управлять выравниванием встроенных элементов в зависимости от размера области просмотра. Адаптивность при выравнивании элементов.

Создание анимации для сайта. Коллекция потрясающих плавных анимаций для использования на вашей веб-странице.

Создавайте интересные и невероятные статьи на страницах сайта. Компонент статьи состоит из самой статьи, заголовка и метаданных.

Удивительная коллекция дополнительных классов для добавления различных фонов к элементам. Возможность применить различные режимы наложения к фоновому изображению, установить фиксированное состояние, изменить позицию...

Создавайте красивые уведомительные значки и выводите информацию в навигации или вкладках/табах с количеством доступных единиц. «Значок» можно использовать в качестве счётчика.

Компонент «База» предоставляет стили по умолчанию для всех элементов HTML.

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

Создавайте красивые кнопки, которые могут быть разных стилей и размеров. Компонент «Кнопка» позволяет создать из кнопки выпадающий список, добавить в проект кнопки различной ширины.

С компонентом «Карточка» возможно создавать потрясающие макеты разных стилей. Создание карточки. Модификаторы. Разметка. Примеры.

Добавляем кнопку закрытия, которую можно комбинировать с различными компонентами UIkit 3.

Универсальный вариант для отображения вашего контента в нескольких текстовых колонках, не разбивая его на несколько контейнеров. Текст в несколько колонок / Многоколоночный текст. Адаптивное поведение.

Создавайте и стилизуйте блоки с комментариями на сайте. Компонент включает в себя стили для комментариев, например, для раздела блога на вашем сайте.

Компонент «Контейнер» позволяет выровнять и центрировать содержимое страницы. Обычно в контейнер обернут основной контент сайта. Модификаторы «Размер».

Как создать таймер с UIkit 3. Создание таймера обратного отсчета Countdown.

Компонент «Cover» / «Обложка». Охватив весь контейнер, разверните изображения, видео или фреймы, и разместите сверху свой собственный контент. Как растянуть блок на всю высоту экрана.

Создавайте списки определений (описаний). Список определений состоит из термина и его описания.

Создавайте разделители для разделения контента, горизонтальный или вертикальный. Компонент «Разделитель» позволяет добавлять различные стили.

Создание точечной навигации (навигация точками) для работы со слайд-шоу или для прокрутки к различным разделам страницы.

Расположите любой элемент в связке с другим, изначально невидимым; отображение в виде выпадения можно настроить как при наведении на вызываемый элемент, так и при клике на него. Как создать «Выпадение».

Создание выпадающего списка меню навигации. Размещение сетки Grid и любого контента в выпадающем списке. Различные позиции; использование анимации при раскрытии Dropdown.

Компонент Фильтр. Фильтруйте или сортируйте элементы используя метаданные. Любой элемент может быть отфильтрован или отсортирован. Применение. Разметка. Примеры

Используйте огромные возможности flexbox при создании потрясающих адаптивных макетов. Как создать разметку и использовать компонент Flex.

Создание формы. Модификаторы. Создание сложенной (вертикальной) формы или стильной горизонтальной. Использование кнопки, текста или ссылки в качестве формы выбора. Как вставить иконку в input и сделать её кликабельной.

Создайте полностью отзывчивый, плавающий, резиновый макет модульной сетки. Модификаторы. Grid Masonry. Параллакс. Примеры. Использование.

Устанавливайте различные стили для заголовков. Модификаторы. Заголовок с разделителем. Вертикально центрированная линия в текстовом заголовке.

Компонент «Высота» предлагает три варианта установки высоты: использование вспомогательных классов с фиксированной высотой, в зависимости от области просмотра, путем соответствия высоты различных элементов.

Векторные иконки в любом месте вашего контента. Масштабирование какого-либо изображения до размера иконки.

Создание навигации, состоящей из иконок. Вертикальная иконочная навигация.

Компонент «Изображение» и Lazy loading. Ускоряем время загрузки страницы загружая изображения только когда они входят в область просмотра. Использование атрибута srcset для свойства CSS background-image.

Инвертируйте стиль любого компонента, чтобы улучшить видимость объектов на светлом или темном фоне.

Добавьте в контент привлекающую подсказку. Метки. Используйте ярлыки для отображения примечаний.

Создание оглавления с отточиями. Создавайте оформление, которое выглядит как оглавление в книге. Компонент «Отточие». Точки между словами css; dot leaders css; точки в таблице css; строки с точками до конца строки.

Создайте эффектную галерею с использованием красивой анимации. Компонент Lightbox для изображений и видео с широкими возможностями.

Устанавливайте различные стили для ссылок.

Создавайте красивые списки используя разные стили.

Компонент «Margin» позволит задать величину отступа для всех сторон элемента или определить ее только для указанных сторон. Автоматическое добавление внешних отступов.

Создайте значок «Маркер», который может отображаться поверх изображений. Вы можете совместить иконку - маркер, всплывающую подсказку и добавить к ним модальное окно.

Создавайте модальные диалоговые окна с разными стилями и переходами.

Навигация списком с выпадающими подпунктами, различные стили. Создание навигации в стиле многоуровнего меню «Аккордеон». Разделитель между пунктами меню и выезжающая панель Off-canvas.

Панель навигации, которую можно использовать в качестве основной навигационной панели по всему сайту. Обширные возможности Navbar.

Создавайте переключаемые уведомления; Разметка HTML внутри уведомления / сообщения; Задать уведомлению необходимую позицию и стиль. Автоматически исчезаемые уведомления.

Создайте боковую панель Off-canvas. Off-canvas прекрасно подходит для мобильных навигационных меню.

Эффект наложения. Руководство по использованию. Модификаторы стиля.

Компонент Padding устанавливает внутренние отступы/поля со всех сторон элемента. Добавление и удаление внутренних отступов.

Нумерация страниц. Создание пагинации, постраничной навигации по страницам веб-сайта.

Компонент «Параллакс». Анимируйте свойства CSS в зависимости от положения прокрутки документа.

Создайте область заполнителя, которую можно использовать для загрузки файлов с помощью перетаскивания (drag and drop).

Коллекция вспомогательных классов для позиционирования контента.

Компонент «Печать». Оптимизируйте свои страницы для удобочитаемой и экономичной печати.

Индикатор выполнения, который показывает, как далеко движется процесс.

Режим плавной прокрутки на страницах сайта при переходе к различным разделам.

Отслеживание прокрутки. Scrollspy. Запускайте события и анимацию при прокрутке вашей страницы.

Создание поиска. Кликабельная иконка поиска внутри панели навигации; открытие с использованием наложения или в модальном окне.

Горизонтальные разделы макета с различными фонами и стилями.

Навигация с кнопками "Предыдущий" и "Следующий" для пролистывания слайд-шоу. Компонент Slidenav.

Отзывчивый слайдер, карусель. Компонент Slider является полностью адаптивным и поддерживает сенсорную и swipe-навигацию.

Создайте адаптивное слайд-шоу с изображениями и видео. Добавление параллакс-эффектов в слайд-шоу.

Компонент «Сортируемые элементы». Создавайте сортируемые grid-сетки и списки, с возможностью менять порядок их элементов.

Создайте анимированный загрузчик «Спиннер».

Создавайте прилипающие элементы при прокручивании страницы. Липкое поведение с задержкой и анимацией при появлении. Липкий элемент только при прокрутке вверх.

Компонент «Суб-навигация». Различные стили для суб-навигации.

Масштабируемая векторная графика. Вставляйте встроенные изображения SVG в разметку веб-страницы и стилизуйте их с помощью CSS. SVG-спрайты. Использование «symbol». Анимация линий SVG.

Компонент «Переключатель контента» - динамический переход по различным областям контента.

Создавайте адаптивные вкладки навигации с разными стилями.

Создавайте красивые отзывчивые таблицы с использованием классов-модификаторов.

Оформление текста. Коллекция служебных классов для стилизации вашего контента.

Гибкая навигация миниатюрами; миниатюры в качестве навигации в адаптивном слайд-шоу.

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

Возможности: скрыть, переключить или изменить внешний вид различного содержимого с помощью переключателя Toggle.

Красивые всплывающие подсказки. Различные позиции для Tooltip. Появление с задержкой.

Создайте кнопку «Вверх», нажав на которую пользователь автоматически перенаправляется в верхнюю часть страницы.

Компонент Transition. Создавайте плавные переходы между двумя состояниями при наведении на элемент.

Компонент Upload. Загружайте файлы через элемент формы ввода файла или область заполнителя.

Коллекция полезных вспомогательных классов для стилизации вашего контента.

Воспроизводите видео, когда оно входит в окно просмотра. Компонент «Видео».

Адаптивные классы видимости для отображения или скрытия элементов на разных устройствах.

Определите ширину элементов для разных размеров области просмотра.