Мы считаем, что наилучших результатов можно достичь, если вы занимаетесь любимым делом. Остальное — пустая трата времени. Создание сайтов — наша жизнь, и здесь мы используем самые интересные и перспективные технологии. Одна из них — фреймворк UIKit. Недавно он существенно обновился и получил версию 3.

Если вы искали документацию UIkit на русском, вам сюда:

Документация UIkit

История UIKit

Фреймворк был создан немецкой компанией Yootheme, которая много лет занимается созданием красивых шаблонов и расширений для Wordpress и Joomla. В созданных Yootheme шаблонах в боевых условиях создавались, дорабатывались и тестировались компоненты будущего фреймворка. Это произошло не сразу, но планомерно. Изначально был создан "Warp framework", работающий с Joomla. Он позволял изменять стандарнтые функции CMS в админке. Затем появился компонент ZOO, значительно расширяющий возможности CMS. Но и этого создателям показалось мало, поэтому они решили подарить миру что-то прекрасное ;)
Официально представлен в июле 2013 года.

Сейчас UIKit 3 — современный, быстрый, легкий (~55кб) модульный фреймворк, выполненный в нескольких вариантах стандартного оформления. Как и конкуренты, он поддерживает Less & Sass, при этом имеет крутейшую визитную карточку: навороченный визуальный редактор стилей, доступный на официальном сайте и в готовых темах для CMS. С его помощью можно без особых познаний отредактировать, увидеть и получить свое собственное сайтотворение.

Самым популярным инструментов для front-end разработки давно является Bootstrap, так исторически сложилось. Бутстрап стал пионером направления, собрав воедино лучшие методики верстки сайтов в одном месте. Ранее в GreenLight тоже использовали его, но возможностей катастрофически не хватало. Говорить о преимуществах и недостатках — дело неблагодарное и бесполезное, поэтому пропустим и идем дальше.

Актуальные для нас особенности UIKit

• Работает без JQuery;
• сетка без ограничений по количеству колонок;
• возможность ленивой загрузки изображений и создание плейсхолдеров изображений при загрузке;
• динамическая работа с высотой. Вы можете проставить всем элементам набора одинаковую высоту, просто указав название класса, которое нужно использовать.
• весит меньше;
• Превосходный адаптивный дизайн прямо из коробки.
• Полноценная поддержка Flexbox уже во 2 версии, в сочетании с Grid.js и мягким graceful degradation позволяет верстальщику сайтов по-новому увидеть мир сложной адаптивной верстки.
• Имена классов в UIKit имеют префикс "uk-", а data-атрибуты имеют вид "data-uk-grid" или просто "uk-grid", поэтому вероятность пересечений наименований крайне мала.
• Динамическую сетку с фильтрацией на лету мы больше не встречали нигде.
• Уникальные компоненты, которые очень нам помогают. Например, продвинутый переключатель с автоустановкой классов, бесконечно вкладываемые друг в друга, компоненты навигации. Добавлен компонент обратного отстчета; параллакс, drag and drop, "липкие" элементы с установкой задержек и границ; Scrollspy - позволяет навешивать различные события при прокрутке страницы.
• Любые компоненты фреймворка могут быть использованы совместно или вложены друг в друга. И это работает! Мы проверили на себе.
• Четкое разделение слайдеров и слайдшоу. Эти компоненты могут "крутить" тексты, картинки, небоскребы и даже целые галактики. Незаменимо при создании сайтов.
• Все элементы адаптивны и великолепно отображаются на мобильных устройствах. Сразу. Интуитивно.
• Множество полезных мелочей в типографике и видах меню.
• Краткая разметка.
• Однажды мы с помощью компонента "Accordion" разместили в теле "гармошки" вложенные гармошки, в них -> динамический список товаров -> в нем карточка товара с модальными окнами и кучей элементов. Только в UIKit верстальщик не сошел с ума, а браузер не повис при открытии такой страницы.
• Собственная библиотека "Masonry".
• Библиотека иконок на JS, добавляющая SVG через use.

К сожалению, документация по на русском языке отсутствует, и мы решили это исправить, создав русскоязычную документацию UIkit 3.