Пользователь
0,0
рейтинг
4 апреля 2014 в 11:30

Разработка → UIKit обзор css/js фреймворка из песочницы



Доброго времени суток, дорогие жители Хабра!

В своей первой статье я бы хотел рассказать о UIKit — очень полезном и интересном css- и js- фреймворке, который, как мне кажется, незаслуженно обходят на хабре стороной.

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

Изначально фреймворк задумывался (да таким и получился) как современный, быстрый и модульный, что с одной стороны накладывает некоторые ограничения на использование поддержка ie9+ (ниже мягкая деградация), но позволяет отбросить большой пласт «хаков и хуков», который приходится поддерживать в проектах «конкурентов».

Скачать/ознакомиться с фреймворком можно тут — getuikit.com

Фрейморк сделан с использованием less и примесей. В случае UIKit ядро полностью отделено от стилей «шаблона». Удобные переменные позволят начинающим быстро сориентироваться и подогнать внешний вид под себя. Кто плохо ориентируется в less или не ориентируется вообще — есть удобный базовый визуальный редактор стилей, позволяющий получить вполне приемлемый результат — getuikit.com/docs/customizer.html

Модульность и размер.

Начальные размеры стартуют с 55Kb (js – 33Kb / css – 22Kb / без минификации и гзипа).

Фреймворк идет с очень богатым и интересным набором компонентов, но такое богатство подразумевает под собой и значительный размер (100Кб полная сборка js ) – модульная же структура позволяет насладиться всем необходимым при серьезном сокращении размеров.

В сравнении с другими фреймворками:
Хотя тут конечно разработчики чуть-чуть лукавят, немного подгоняя данные, под себя да и версия сравнения 1.0, но фреймворк на самом деле легок.

CSS
Без иконок.


С иконками


JS


И все вместе


На самих компонентах мы остановимся чуть позже.

Шрифты

У бутстрапа есть возможность использования глифов – уикит пошел дальше не отстал и очень качественно внедрил полную поддержу шрифта Awesome — fortawesome.github.io/Font-Awesome

«Глифов» больше — кастомизируемость шире.

Заложена поддержка гугл шрифтов из коробки.

Адаптивность

Так как фреймворк создавался с оглядкой на современные тренды, а адаптивность и гибкая грид структура – сейчас чуть ли не основной тренд – уикит изначально «заточен» под них. Этим, конечно, никого сейчас не удивишь, но поддержка этих возможностей тут сделана действительно на высоком уровне.

Нейминг

Любой новый фреймворк выступает де-факто в роли догоняющего (того же бутстрапа) и нормальной практикой является использование неконфликтующих неймингов – с чем разработчики из yootheme прекрасно справились. Нейминги просты, уникальны и ничего не «ломают».

Компоненты/Addons

Одной из приятных особенностей фреймворка является Очень гибкая возможность комбинирования компонентов без создания «велосипеда».
Как пример можно рассмотреть создание выпадающих списков. Во фреймворке есть два независимых компонента Button и Dropdown – чтобы получить группу кнопок с персональными выпадающими списками можно просто соединить эти компоненты. И так везде: буттонс + табс / инпут + иконс или даже 3-4 компонента вместе буттон + дропдаун + субнав + грид + поиск – легко и без конфликтов.

Компоненты в сравнении с бутстрапом:
Bootstrap
UIKit
Glyphicons
Font Awesome
Dropdowns Dropdown
Button groups Button
Button dropdowns Button + Dropdown
Input groups Form (частично)
Navs Nav
Navbar Navbar
Breadcrumbs Breadcrumb
Pagination Pagination
Labels
Badges Badge
Jumbotron
Page header
Thumbnails Thumbnail
Alerts Alert
Progress bars Progress
Media object Comment
List group ELEMENTS (но скуднее намного)
Panels Panel
Wells LAYOUT
JS
Transitions Animation
Modal Modal
Dropdown Dropdown
Scrollspy Scrollspy
Tab Tab
Tooltip Tooltip
Popover Tooltip
Alert Alert / Notify
Button Button
Collapse Toggle
Carousel
Affix Sticky


Уникальные/интересные компоненты UIKit

  • Off-canvas — очень приятен и удобен для мобильных устройств
  • Switcher — вариация буттонс с вшитым «тригером» активного состояния
  • Navigations — тут серия компонентов для удобства навигации
  • Form file / Form password/Upload — расширения возможностей форм
  • Placeholder
  • Search — поисковое поле с готовой возможностью показа аякс результатов
  • Sortable — базовый ui управления порядком элементов (удобен в админке) — не нужен JQueryUI
  • Timepicker/ Datepicker — базовый ui выбора дат и времени — не нужен JQueryUI
  • Autocomplete — тут все ясно
  • Markdown area — превью для работы с CodeMirror


В сухом итоге:

Есть все необходимое, а то, что отсутствует — легко реализуется стандартными средствами CSS (ну за исключением «карусели»).



Стили и темы

Уже говорилось – тут все прекрасно.

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

Прекрасно сделанная и поданная документация позволит новичкам быстро вникнуть в принципы работы. Серьезные вещи – через гитхаб или суппорт.

Зачем Yootheme сделали новый «движок» — кому это все надо?

Yootheme уже много лет работают над созданием шаблонов и компонентов для Joomla.
Но не просто делают, а пытаются улучшить этого «корявого монстра»

Первым шагом было создание надстройки в виде фреймворка (сейчас все модно называть фреймворком) Warp — который переопределял многие ключевые функции работы джумллы и позволял очень сильно ее оптимизировать (в плане удобства работы с шаблонами и скорости загрузки).

Далее было Zoo — именно полноценного / современного / удобного CCK джумле очень не хватало (k2 хорош — но тоже монстроватый).
Zoo позволяет практически полностью отказаться как от базовых компонентов, так и от сторонних расширений и модулей.

Теперь yootheme замахнулись на создание своей собственной CMS — PageKit (symfony).
Отчетливо видно, что команда, нацеленная на создание и долгосрочную поддержу полноценного CMS, хочет иметь под рукой свой собственный гибкий инструментарий для реализации задумок.

Приятно знать, что все свои проекты, начиная от Warp/Zoo и кончая UIKit/PageKit Yootheme реализуют в качестве опенсорс проектов.

Кстати, сам PageKit на данный момент проходит закрытое предальфа тестирование, и в течение недели разработчики обещают открыть первую волну открытого альфа (после препарирования обзор появится тут).

Ссылки:

Konstantin Yakovlev @konstantin_fl
карма
1,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (32)

  • +4
    Если не вглядываться, то вылитый Bootstrap второй версии вперемешку с третьей.
    • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    Дочитал до середины, не выдержал. Почему в сравнениях какие-то невнятные версии продуктов? Данные не актуальны. Что означает «полная поддержка Font Awesome»? Чем она не полная у того же бутстрапа?

    В общем, весьма и весьма странная попытка сравнения УИкита с остальными фреймворками.
    • 0
      Почему в сравнениях какие-то невнятные версии продуктов?

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

      Что означает «полная поддержка Font Awesome»

      Я, скорее всего, неправильно сформулировал данный плюс — Есть хорошая поддержка отличного иконочного шрифта с почти 400 глифами и даже символом рубля. Сам «Оссом» отлично развивается в независимости от фреймворка. А его интеграция сделана качественно и мягко. Все это считаю большим плюсом UIKit.
      • 0
        Так в бутстрапе тоже «хорошая поддержка». В 3-й версии специально «родные» иконки сделали с неймспейсом «glyphicon-», чтобы можно было подключать любые другие иконочные шрифты. Ну и сам Font Awesome изначально был сделан для бутстрапа.
        • +1
          Согласен с вашим замечанием. «Пошел дальше» было неуместным использованием оборота — внес правку.

          Теперь это выглядит так — «уикит не отстал и очень качественно внедрил полную поддержу шрифта Awesome»
  • 0
    Раздел Add-ons порадовал. Но сортировка не работает в Firefox (28)
  • 0
    Yootheme собрали свой фреймфорк, чтобы унифицировать разработку шаблонов сразу для Joomla/Wordpress/Pagekit

    UIKit на килобайты легче, только если сравнивать с T3 (http://t3-framework.org) — функционала поменьше и кроме Yootheme никто UIKit особо не поддерживает. Универсальность в ущерб функциональности.

    Must have при использовании Zoo CCK.
    • +1
      А я предпочитаю UIkit, Bootstrap имеет уродливую избыточную верстку (например, сравните код, нужный для модального диалогового окна), не имеет префиксов в классах, что превращает верстку в хаос.
      UIkit же позволяет меньшим количеством кода легко и логично делать больше. Часто для использования компонентов достаточно повесить класс (+ атрибут иногда) и не нужно даже писать своего JS кода.
      К тому же качественный графический конфигуратор, который при обновлении позволяет загрузить полученный в прошлый раз LESS и получить сжатый CSS на выходе, в отличии от Bootrstrap, где куча непонятных параметров без preview.

      Он не легче, он в разы удобнее, при чем почти во всех конкурентных моментах.
      • 0
        Кстати, если объективно оценивать, то в уиките место «избыточной верстки» занимает «избыточное параметрирование», которого тоже достаточно — например все, что касается грида и блоков.
        Понятно, текущая структура позволяет полностью контролировать внешний вид на мобильных устройствах, но то что она минимальна — сказать язык не поворачивается.

        <ul class="uk-grid uk-grid-width-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5"> - и это только начало
        • НЛО прилетело и опубликовало эту надпись здесь
  • –1
    По мне так шаблонизатор Joomla еще ничего. Во всяком случае по сравнению с warp это просто таки простор для фантазии и возможностей. А warp c моей точки зрения это уродливое и местами не поворотливое творение, которое призвано не улучшить чем, то шаблоны для CMS, а создать некий комбайн универсальный, чтоб и там и там работало. В результате получается следующее, шаблоны похожи один на другой, по сути отличаются картинки и цвета, но за то работает и на Joomla и на WP, один у всего этого косяк, получается сам warp по размерам и количеству файлов, как вторая CMS.
    Что касается самого UIKit. По мне так среднячок, и сравнивать фреймворк по объему css и JS это несколько не корректно, это может быть один из параметров сравнения, но ни как не основной параметр, тем более 20кб это как бы не сильно критичная разница.
  • 0
    Красивенький такой фпреймворк, только не без недостатков:

    offcanvas работает препаршиво: на десктопе отскролливает основной контент вверх, a на мобильнике не даёт скролить меню
    ie8 не поддерживает, а значит мимо ынтерпрайза пролетает
  • 0
    Справедливости ради, почти все «Уникальные/интересные компоненты UIKit» есть и в bootstrap3, включая offcanvas (есть в примерах) и автокомплит (вынесен в отдельный проект)
  • 0
    UIKit обзор css/js фреймоврка

    Извините за дерзость, но в заголовке случаем не опечатка?
    • +1
      Спасибо за замечание — конечно же опечатка — хотя это примелькавшееся слово все равно никто не читает полностью))))
    • +1
      В мире ТУМБЛР, ФЛИКР и прочих ХАБРАХАБР все фреймворки должны срочно переименовываться в ФРЕЙМВРК, тем самым подчеркивая, с одной стороны, СКРСТЬ РБТЫ, с другой — трибьют ту Вонни, ктр прнс.
  • 0
    Вас не пугает, что с помощью гугла, имхо, пользователям фреймворка будет очень тяжело искать информацию по нему (все время будут попадать на ios-ный UIKit)?
    • 0
      Разработчики, конечно, немного перегнули с названием — но, чем черт не шутит, может в недалеком будущем «наш» UIKit станет единственным стандартом и иконой фронт-енд фреймворков, а сами иосовцы будут думать о смене названия.

      Искать действительно сложно — но пока все небольшое комьюнити черпает и делится информацией на гитхабе и офсайте. А дальше будет видно.

      Как уже говорили выше в комментариях, и я поддерживаю эту мысль — UIKit — фреймворк для внутренних нужд yootheme, хоть и под свободной лицензией. Основной толчок на встречу обществу может случиться после выхода PageKita — в том случае, если он действительно выстрелит — а по той информации, что есть — он может.
  • 0
    Очень понравился фреймворк, как раз хочется чего-то новенького после приевшегося бутстрапа.
  • 0
    А почему шрифт выглядит так паршиво? Chrome 33
    • 0
      А, это все Helvetica Neue. Уже не на первом компьютере он у меня выглядит совершенно убого. Рискну предположить, что винда с ним как-то не дружит.
      • 0
        Рискну предположить, что у вас есть своя, установленная Helvetica, которая была скачана с неизвестного источника и в вебе выглядит «дико».
        • 0
          В том-то и загвоздка, что я ничего не скачивал. Вот скриншот monosnap.com/image/nwCQwR2rEizhGmPhDU2tZDxkwh97B3
          • 0
            ProximaNovaLight
            Это стандартный вид этого шрифта
  • 0
    Приятно удивило использование теней и градиентов — всё как в старом добром Boostrap 2, но мягче и изящнее.

    image
  • 0
    У меня при выборе CSS библиотек сразу бросается взгляд на селекты в формах. А, тут они сделаны коряво.
    • 0
      Не могли бы вы привести пример фреймворков, где реализовано нестандартное оформление селектов, которое вы считаете правильным? (без «подколок», мне действительно интересно ваше мнение).
      • 0
        Дело не в «стандартных» или «нестандартных». Вместо объяснений приложу скриншоты пожалуй)

        SemanticUI:
        image
        Свое оформление, чисто, гладко и красиво. Гуд

        Fondation:
        image
        Минимум новшеств, но все выглядит опрятно и симпатично. Гуд

        UiKit:
        image
        Справа обрезан бордер у выпадающих элементов, в том же месте нет закруглений (как буд-то борер уходит «под» элемент). Да и шрифт для цифр не подходит совсем. В целом, выглядит очень неопрятно.
  • 0
    konstantin_fl, эррата:

    Раздел «Документация», второе предложение: «гихаб» → «гитхаб»
  • 0
    Мой любимый минималистичный html/css framework — purecss.io
    Всего 4.5кб и ничего лишнего.

    Использую его тогда, когда размер действительно имеет значение.
    • 0
      Где вы раньше были?) А для модальных окон случаем не знаете какую-нибудь хорошую библиотечку, так, чтобы jQuery не требовал?

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