Фреймворк UIkit 3

Представляем вашему вниманию UIkit 3 — новую версию легкого модульного front-end фреймворка для разработки быстрых и мощных web-интерфейсов. В версии 3 были улучшены и расширены многие компоненты и функции, которых не было и нет в других фреймворках. Любите Bootstrap? Ознакомьтесь со списком ниже и сравните.

Что нового в UIkit 3? В чем отличия от UIkit 2?

Прощай, JQuery!

Жизнь без JQuery возможна! UIkit 3 избавился от нее. Совсем. К примеру, на этом сайте ее нет. Естественно, все будет работать быстрее, так как размер jQuery огромен, при этом используется малая часть кода.

Новый UIkit позволяет избавиться не только от JQuery, но и связанных сторонних библиотек, например, Fancybox, Owl Carousel, Masonry, WOW, ScrollSpy, Skrollr, параллаксы и так далее. Вот такое масштабное изменение JavaScript. Просто подключите UIkit на вашу страницу и убедитесь сами. Для полного счастья свяжите с Vue.js или React ;)

SVG, анимация, параллакс

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

Сетка

Новая сетка, как и ранее, использует flexbox для создания динамических и гибких макетов. Она работает в связке с новым компонентом ширины, включающим дополнительные параметры. Можно равномерно распределять столбцы, автоматически применять размеры содержимого или увеличить ширину столбца, чтобы заполнить оставшееся пространство. Режимы, разумеется, комбинируются. Здесь не нужно вечно вставлять "row" и пустые блоки. При использовании атрибута uk-grid необходимый класс проставляется автоматически, а система сетки заботится о полях, переносах и отступах с помощью JavaScript.

Текст
Очень очень очень много разного текста
1
2
3
4
5
6
7
8
9
10
11
12
14
15
Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

Masonry

Сетка Masonry в UIkit 3 стала частью компонента Grid. Элементы сетки можно упорядочивать в многостолбцовой схеме без пропусков, независимо от того, имеют ли ячейки сетки другую высоту. У него одна главная задача — он устраняет пробелы. Никакой магии, никакого абсолютного позициионирования! Просто добавьте uk-grid = "masonry: true" в любую сетку, чтобы включить эффект Masonry.

С помощью встроенного Lazy Load из компонента Изображения можно сделать динамическую фотогалерею.

Компонент Иконки

Компонент Иконки поставляется с собственной системой значков SVG, теперь это не Font Awesome. Он динамически внедряет иконки SVG, которые можно легко стилизовать с помощью CSS. Все иконки были созданы по индивидуальному заказу и содержат много красивых элементов практически для каждого варианта использования. Есть возможность добавления собственных иконок.

  • home
  • sign-in
  • sign-out
  • user
  • users
  • lock
  • unlock
  • comments
  • hashtag
  • tag
  • cart
  • credit-card
  • mail
  • receiver
  • print
  • search
  • location
  • bookmark
  • settings
  • cog
  • nut

Компонент Инверсия

Важный элемент обновленного дизайна UIkit. Инвертирует большинство других компонентов UIkit 3 для любого фона — темного или светлого. Больше не нужно писать собственные стили при отображении элементов на разных фонах. Просто добавьте класс .uk-light для темного фона в светлом стиле или .uk-dark для светлого фона в темном стиле.

Light

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

Dark

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

Drag and Drop

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

  • Элемент 1
  • Элемент 2
  • Элемент 3
  • Элемент 4
  • Элемент 5
  • Элемент 6
  • Элемент 7
  • Элемент 8

Компонент Навигационная панель

Был расширен новый режим переключения (клик и наведение), добавлен прозрачный вариант, который также можно использовать с компонентом Инверсия. Этот стиль выглядит великолепно на любом фоне. Новый режим dropbar отображает выпадающие списки внутри полноэкранного фонового контейнера.

Фильтр + Masonry

Фильтруйте и сортируйте элементы в многостолбцовых макетах по категории, дате или другим метаданным. В UIkit 3 компонент Фильтр работает отдельно и больше не привязан к сетке. Любой макет может быть отфильтрован или отсортирован независимо от того, как элементы расположены. Он работает с эффектами Masonry и параллакса, примененными к сетке. Элементы исчезают и перемещаются с плавными переходами между различными состояниями фильтрации и сортировки.

Компонент Карточки

Это новый централизованный способ представления различных видов контента. Он заменяет старый компонент Панели.

Default

Системы неслыханно быстрые ошибаются неслыханно быстро.

Primary

Системы неслыханно быстрые ошибаются неслыханно быстро.

Secondary

Системы неслыханно быстрые ошибаются неслыханно быстро.

Компоненты Drop и Dropdown

Компоненты Drop & Dropdown с их повышенной гибкостью позволяют отображать что угодно. Для определения поведения доступны дополнительные параметры, например выравнивание границ для выравнивания выпадающего списка относительно любого выбранного элемента на странице.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Новый слайдер

Новый компонент Слайдер позволяет отображать несколько элементов контента одновременно. Вы можете переключаться по ряду объектов, плавно раскрывая новые. Слайдер был написан с нуля, разделяя его кодовую базу с компонентом Слайд-шоу. Благодаря этой модульности UIkit JavaScript увеличил размер файла всего на 2 КБ (gzip), включая компонент Слайдер и все другие улучшения. И помните, все это работает без зависимости от jQuery! :-) Прокручивается стрелками, точечной навигацией, пальцами или мышкой.

  • Фреймворк UIkit 3

    Заголовок

    Когда я вижу, как ты верстаешь, малыш, ты меня пугаешь.

  • Фреймворк UIkit 3

    Заголовок

    Когда я вижу, как ты верстаешь, малыш, ты меня пугаешь.

  • Фреймворк UIkit 3

    Заголовок

    Когда я вижу, как ты верстаешь, малыш, ты меня пугаешь.

  • Фреймворк UIkit 3

    Заголовок

    Когда я вижу, как ты верстаешь, малыш, ты меня пугаешь.

  • Фреймворк UIkit 3

    Заголовок

    Когда я вижу, как ты верстаешь, малыш, ты меня пугаешь.

Компонент Offcanvas

Компонент Offcanvas был полностью переработан, добавлены новые режимы анимации с возможностью реверса.

Заголовок

Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

Заголовок

Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

Заголовок

Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

Заголовок

Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

Компонент Формы

В UIkit 3 все ранее использующиеся компоненты форм объединили в один. Рассмотрите простой пример создания формы входа UIkit, включающий сразу несколько новых модульных компонентов: форма, наложение, модальные окна, высота, кнопки, инверсия, отступы, позиционирование.

Наложение, Позиции и Переходы

Были разделены, чтобы их можно было использовать вместе с другими компонентами.

Фреймворк UIkit 3
Top
Bottom
Left
Right

Margin & Padding

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

Блочный элемент
Flex элемент

Toggle

Компонент Toggle получил большую функциональность, например, переключение классов в зависимости от размера области просмотра, даже на самого себя.

Первая анимация

Компонент Фон

Включает в себя красивые параметры фона и поставляется с несколькими режимами отображения и смешивания.

Умножение

Экран

Перекрытие

Изображения

Компонент Изображения ускоряет время загрузки страницы и уменьшает трафик, загружая картинки лишь тогда, когда они входят в область просмотра. Это просто находка для желающих приблизить Page Speed к заветной сотне. Вот как это работает:

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

Эта страница лопнет, если мы перечислим все новинки. Поэтому здесь лишь некоторые из новых дополнений UIkit 3.

UIkit на русском языке. Документация, примеры, уроки.