Twitter Bootstrap vs Uikit

Давно работаю с CSS фреймворком Uikit и мне он кажется намного интересней и более продвинутым в сравнении с привычным Twitter Bootstrap. Единственный минус, это замена цветовой схемы, её приходится править в каждом компоненте.
Хотелось бы от вас услышать доводы в пользу одного или друго CSS-фреймворка.
Есть ряд вопросов к TB, которые надо пилить и которые есть уже в Uikit. Задумался над выбором, пилить TB т.к. популярный или продолжать работать на Uikit.
Alexander V
14 января 2015, 08:05
modx.pro
13 793
+2

Комментарии: 70

Wassi Wassinen
14 января 2015, 11:18
+1
Почему не Foundation 5?
    Alexander V
    14 января 2015, 11:26
    0
    Как-то не прижился в своё время (F4). TB использовал в основном.
      Wassi Wassinen
      14 января 2015, 11:52
      0
      На самом деле — довольно интересный продукт. Четвертая ветка — не знаю, а вот пятая — понравилась. Но использую ТВ. :) Привычнее.
        Alexander V
        14 января 2015, 12:20
        0
        Есть у Foundation5 и Uikit компоненты, которых нет в FB навскидку:
        1. Off-canvas
        2. Equalizer (F5)
        3. Dropdown нормальный, который настраивается на клик и наведение.
    Abu
    Abu
    14 января 2015, 14:56
    +1
    Как аргумент в пользу TB большое разнообразие тем и компонентов. Например поиск на themeforest

    Uikit
    24
    Templates & Themes

    twitter bootstrap
    1,137
    Templates & Themes

    +foundation
    295
    Templates & Themes
      Alexander V
      14 января 2015, 23:00
      0
      Популярен, не спорю. Только шаблон вряд ли имеет отношение к фреймворку. Всё же инструмент обсуждаем.
      TITAN-UZ
      14 января 2015, 18:37
      0
      Semantic UI
        Alexander V
        14 января 2015, 23:01
        1
        0
        Смотрел, красивый. Синтаксис немного непривычный и Grid какой-то странный.
        Іван Клімчук
        15 января 2015, 20:49
        0
        Меня вот этот увлек — getskeleton.com/, очень нравится после TB. В TB проблема была — прибить стандартные стили у компонента, которые мешают, в скелетоне только сетка и пару совсем базовых вещей, недостающее пишешь как нужно тебе. Умеет less и sass, что для меня тоже важно.
          Василий Наумкин
          15 января 2015, 20:55
          0
          А есть какие-то проблемы с прибиванием? Вот же конструктор — включай только то, что нужно.

          Лично я не дизайнер и не верстальщик, поэтому без Bootstrap мне никак.
            Іван Клімчук
            15 января 2015, 20:58
            0
            Это решает проблему, но не всегда. Отключаешь компонент — и его нет совсем, когда он тебе нужен в самом минимальном исполнении.
              Василий Наумкин
              15 января 2015, 21:07
              +1
              Отключаешь компонент — и его нет совсем
              Ну вот по твоей ссылке большинства компонентов Bootstrap и нет совсем — в чем тогда разница?

              Или разница в гридах, таблицах и формах, типа в Bootstrap они сильно избыточные? А вот в скелетоне я сходу не вижу аналога offset-col в гриде — всё сплошняком.

              В общем, на вкус и цвет.
                Іван Клімчук
                15 января 2015, 21:18
                0
                Я же не агитирую всех на него переходить :) Это лишь мое мнение. Мне он понравился в работе. И да, именно тем, что ничего лишнего. Оффсеты есть.
                  Alexander V
                  15 января 2015, 21:26
                  0
                  Ох уж эти именования в grid… Не могли цифрами что ли сделать? Периодически встречаются такие упоротые идеи.
                    Іван Клімчук
                    15 января 2015, 21:30
                    0
                    ну это для нас непривычно, так как язык не родной, а для создателей-носителей вполне ок, как и для англоговорящих пользователей
                      Alexander V
                      16 января 2015, 02:02
                      +1
                      Да по мне, хоть на русском. Цифры лучше воспринимаются. На подсознательном уровне вы считаете, когда смотрите сетку.
                        Іван Клімчук
                        16 января 2015, 08:38
                        0
                        форк и заменить все на цифры, да и просто для себя можно взять и заменить все заменой по файлу )) Там не такие объемы кода, как в бутстрапе
                        Александр Котлов
                        16 января 2015, 14:58
                        0
                        Для любых пользователь это дополнительный когнитивный парсинг, и потому — зло. Пользовался Gridism, с таким же принципом — очень похоже на историю про мышей и кактус)
                Владимир Дремучий
                15 января 2015, 22:17
                +1
                Я заметил, что в TB раньше была проблема с кастомизацией элементов (версия 2<), нужно было всегда употреблять !important в своих файлах стилей. Сейчас нет такой надобности.
                Ну и я как дизайнер + фронтенд разработчик, поддерживаю Bootstrap. А так общем, на вкус и цвет, действительно.
              Александр Котлов
              16 января 2015, 14:58
              1
              0
                Alexander V
                16 января 2015, 19:33
                0
                Упустил один интересный момент. Uikit во всех классах имеет префикс uk-, что позоляет избежать конфликтов и может использоваться наряду с другими фреймворками.
                  Владимир Шевченко
                  01 января 2016, 13:04
                  0
                  Очень даже отличный инструмент для вэб разработки. К тому же есть продвинуты кастомизатор, что облегчает работу. Главное к нему привыкнуть постепенно)) Использую как uikit так и бустрап, в зависимости от потребности. В плане сетки у uikita она имеете свои интересные моменты)) не сразу вникнешь, что да как.
                    oleg
                    31 января 2016, 22:56
                    +1
                    Более года перешел на использование Uikit
                    недавно пришлось сделать проект на Bootstrape — плевался долго;
                    — нету вертикального выравнивания элементов,
                    — очень маленький набор иконок да и прикручивать их не совсем удобно,
                    — большой вес фреймворка,
                    — нету дополнительных плюшечек,
                    — флексбокс,
                    — анимация,
                    — Off-холст,
                    — плавная прокрутка и много-много чего
                    Приходиться все искать со стороны, когда в uikit это доступно из коробки
                      Alexander V
                      31 января 2016, 23:04
                      +1
                      Я сам плАчу кровавыми слезами, когда делаю на Bootstrap. Кучи хелперов не хватает.
                      Сейчас занимаюсь тиражном решением, приходится делать на Bootstrap, ничего не поделаешь.
                        oleg
                        01 февраля 2016, 01:34
                        0
                        В большинстве случаев удается убедить клиента в пользу Uikit, но есть не пробивные которые гнут палку в сторону ТВ(встречаются крайне редко)
                          Владимир
                          09 июня 2016, 10:40
                          0
                          Читаю ветку, и единственное что приходит в голову — это то как я не могу воспринимать сетку 960 grid, т.е. вот совсем, не могу и все. Наверно все же нет такого как явные преимущества одного решения над другим, есть то с чем удобно работать конкретному разработчику, а вот заказчики становятся в любом случае заложниками выбранного решения.
                          Так что, пусть будет все)) А то может стоит смотреть в сторону philipwalton.github.io/solved-by-flexbox/
                        Илья
                        12 февраля 2016, 15:45
                        1
                        0
                        Подскажите! Начал изучать UiKit, до этого Bootstrap пользовался, и первое что бросилось в глаза — это дублирование меню для мобильной и десктопной версии.
                        Я правильно понял, это так?

                        Как в этом случае ПС к этому относятся, проблем нет?
                          Alexander V
                          12 февраля 2016, 15:57
                          0
                          Да, это так. Off-canvas используется. По-моему нормальное решение. Или вас смущает лишний вызов pdoMenu?
                            Илья
                            12 февраля 2016, 16:39
                            0
                            Нет, pdoMenu не смущает, волнует именно дублирование меню в коде, особенно если оно большое.
                            1-е в десктопном, 2-е в мобильном.
                              Alexander V
                              12 февраля 2016, 17:41
                              0
                              Их же одновременно не видно. В чем проблема?
                                Виталий Греков
                                12 февраля 2016, 19:59
                                0
                                можно попробовать решить с помощью AjaxSnippet
                                  Alexander V
                                  12 февраля 2016, 20:35
                                  0
                                  Можно и так. Не берусь утверждать за HTML (скорее всего загрузит полностью), а картинки при условии медизапроса браузеры не загружают.
                            Сергей Лим
                            25 февраля 2016, 07:00
                            0
                            Подскажите по вертикальному выравниванию
                            <div class="uk-grid uk-vertical-align">
                                 <div class="uk-width-3-10 uk-vertical-align-middle">
                                        <i class="uk-icon-dollar"></i> [[!++USD]]
                                        <i class="uk-icon-eur"></i> [[!++EUR]]
                                        <i class="uk-icon-cny"></i> [[!++CNY]]                     
                                 </div> 
                            </div>
                            Не хочет выравнивать
                              Jenya Filimonov
                              25 февраля 2016, 09:40
                              0
                              Мне почему то кажется что проблема в том, что они болтаются внутри дива. Я бы их в форме списка внутри оформил…
                                Сергей Лим
                                25 февраля 2016, 09:43
                                0
                                Не помогло
                                  Alexander V
                                  25 февраля 2016, 13:54
                                  0
                                  Высота должна быть фиксированная.
                                    Сергей Лим
                                    17 мая 2016, 09:16
                                    0
                                    <div class="uk-grid uk-vertical-align">
                                        <div class="uk-width-medium-1-1 uk-row-first">
                                            <div class="uk-vertical-align-middle uk-width-1-4">
                                                 ...
                                            </div>
                                            <div class="uk-vertical-align-middle uk-width-1-4">
                                                 ...
                                            </div>
                                        </div>
                                    </div>
                                    Вот такая структура помогла
                              Сергей Лим
                              10 мая 2016, 07:46
                              0
                              Подскажите пожалуйста ресурсы по uikit на русском языке, getuikit.ru не считается
                                Alexander V
                                10 мая 2016, 08:41
                                +1
                                Вроде и так всё понятно. Смотрите примеры.
                                  Сергей Лим
                                  10 мая 2016, 08:45
                                  0
                                  Ну вот я буквально несколько минут назад только догнал, что к каждому компоненту надо отдельно подключать свой js, я целый день голову ломал, почему не пашет, думал надо только uikit.js подключить, а он уже подтягивает нужные скрипты.
                                    Alexander V
                                    10 мая 2016, 08:56
                                    1
                                    0
                                      Сергей Лим
                                      10 мая 2016, 08:59
                                      0
                                      С этим я разобрался, сейчас я например не могу понять, почему у меня slidenav не работает, навожу на картинки, а стрелки не появляются.
                                      <div id="msGallery">
                                      	<a href="[[+url:default=`/assets/components/minishop2/img/web/ms2_big.png`]]"  title="title">
                                      		<img src="[[+360x270:default=`/assets/components/minishop2/img/web/ms2_medium.png`]]"  width="360" height="270" alt="" title="" id="mainImage" />
                                      	</a>
                                      	<div class="uk-margin" data-uk-slideset="{default: 3}">
                                      	    <div class="uk-slidenav-position uk-margin">
                                          <ul class="uk-slideset uk-grid uk-flex-center uk-grid-width-1-4">
                                              [[+rows]]
                                          </ul>
                                              <a href="#" class="uk-slidenav uk-slidenav-previous" data-uk-slideset-item="previous"></a>
                                              <a href="#" class="uk-slidenav uk-slidenav-next" data-uk-slideset-item="next"></a>
                                      </div>
                                      </div>
                                        Alexander V
                                        10 мая 2016, 09:08
                                        +1
                                        Кроме скриптов надо подключить файл стилей от компонента.
                              oleg
                              09 июня 2016, 10:13
                              0
                              Привет.
                              Кстати доработал grid Uikit 1-7, 1-8, 1-9
                              Кому интересно забирайте тут: github.com/uikit/uikit/issues/1900
                              И подключать скрипты и стили можно из внешнего ресурса так удобней
                              cdnjs.com/libraries/uikit
                                Владимир
                                09 июня 2016, 11:13
                                0
                                А вот интересно, кто бы мне убогому показал конечный результат на TB и чем то вашем любимом с изначально одинаковым ТЗ (прототип, дизайн — сложность только что бы была не детская ) и разными результатами в конечном продукте, с разбором кода верстки, со сравнением реализации адаптивности и т.п. и т.д.
                                Ибо заявленная тема «Bootstrap vs Uikit» так и осталась вся на уровне личных предпочтений.
                                  Alexander V
                                  09 июня 2016, 13:05
                                  0
                                  Посмотри хотя бы какие есть хелперы в Uikit. В TB трясти уже начинает без такой элементарщины.
                                  Таких примеров могу привести очень много.
                                  <div class="uk-margin-large-top"></div>
                                  <div class="uk-margin-bottom"></div>
                                  <div class="uk-margin-bottom-remove"></div>
                                  <div class="uk-margin-small-right"></div>
                                  <div class="uk-text-center-small"></div>
                                  <div class="uk-text-left-medium"></div>
                                    Владимир
                                    09 июня 2016, 13:21
                                    0
                                    Я о том, что ты тему «Twitter Bootstrap vs Uikit» поднял, а нормально структурировать что есть, чего нет, как положено в таких случаях, в таблице, со ссылками…
                                    Оно понятно, что можно найти время и самому все опробовать, времени как раз и нет))
                                    Взял бы и расписал, раз пробовал и то и то.
                                    Я вёрстку на Uikit только где то редактировал по мере надобности. TB мне привычнее, хотя да, его в чем то избыточность, а в чем то ущербность ощущается, но не верю в панацеи, жду 4ю версию, полагаю что где то так upgrade проще станет. Много чего есть вообще уходящего от гридов, и сами гриды все развиваются.
                                    Короче, раз, пишешь «1 vs 2» — дай расклад в таблице со столбцами с нормальным сравнением и будет тебе респект и уважение))
                                    Удачи в любом случае.
                                      Alexander V
                                      09 июня 2016, 13:26
                                      +1
                                      Есть, Сэр!
                                      Василий Наумкин
                                      10 июня 2016, 13:39
                                      +1
                                      TB мне привычнее, хотя да, его в чем то избыточность, а в чем то ущербность ощущается
                                      Как я делаю с последнее время:
                                      1. Качаю scss исходники, выбирая только нужное
                                      2. Подключаю их в MinifyX на сервере
                                      3. Добавляю свой кастомный scss туда же
                                      4. И делаю всё, что мне нужно

                                      Таким образом, можно избавиться от всей избыточности и не нужно заморачиваться с инструментами. Именно так, например, был свёрстан vrmedia.tv, хотя я совсем не верстальщик.
                                        Сергей Росоловский
                                        11 июня 2016, 19:52
                                        0
                                        Интересно, а как на vrmedia.tv сделано просмотр большой версии фото? Вижу при клике на фото идет ajax-запрос в компоненте Office к action.php. Как это организовано?
                                          Василий Наумкин
                                          12 июня 2016, 07:05
                                          +2
                                          Интересно, а как на vrmedia.tv сделано просмотр большой версии фото?
                                          Обычный Fancybox

                                          Вижу при клике на фото идет ajax-запрос в компоненте Office к action.php.
                                          Это подсчёт просмотров.
                                  oleg
                                  10 июня 2016, 12:22
                                  +1
                                  а чего то сравнивать, пользуйтесь uikit не пожалеете.
                                    Дмитрий Иванов
                                    12 июня 2016, 00:59
                                    0
                                    Если надо совсем навороченный фреймворк, то семантик рулит)
                                      Alexander V
                                      12 июня 2016, 01:23
                                      0
                                      Semantic это прежде всего UI
                                        Дмитрий Иванов
                                        13 июня 2016, 11:52
                                        0
                                        и в чем принципиальная разница?
                                        «Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.»
                                          Stan Ezersky
                                          13 июня 2016, 13:22
                                          0
                                          Все мощные CSS+JS фреймворки— это UI
                                        Сергей Лим
                                        27 июня 2016, 03:34
                                        0
                                        Подскажите, почему не работает
                                        <div class="uk-grid uk-vertical-align uk-margin">
                                            <div class="uk-width-small-2-10 uk-hidden-large">
                                                <a href="#offcanvas" class="uk-navbar-toggle " data-uk-offcanvas></a>
                                            </div>    
                                            <div class="uk-width-small-7-10 uk-width-medium-1-4">
                                                <a href="/"><img src="assets/style/img/logo.png" alt="ТюнингДВ"></a>
                                            </div>
                                        </div>
                                        uk-width-small тупо растягивается на 100%
                                          Alexander V
                                          27 июня 2016, 03:38
                                          0
                                          <div class="uk-grid">
                                          	<div class="uk-width-small-2-10 uk-hidden-large">
                                                  <a href="#offcanvas" class="uk-navbar-toggle " data-uk-offcanvas></a>
                                              </div>    
                                              <div class="uk-width-small-7-10 uk-width-medium-1-4">
                                                  <a href="/"><img src="assets/style/img/logo.png" alt="ТюнингДВ"></a>
                                              </div>
                                          </div>
                                            Сергей Лим
                                            27 июня 2016, 03:41
                                            0
                                            неа
                                              Alexander V
                                              27 июня 2016, 03:51
                                              0
                                              Значит показывай онлайн.
                                                Сергей Лим
                                                27 июня 2016, 03:53
                                                0
                                                tuningdv.ru
                                                  Alexander V
                                                  27 июня 2016, 04:05
                                                  0
                                                  Что там не так? Я так понимаю, что с мобильной версией проблема?
                                                    Сергей Лим
                                                    27 июня 2016, 04:06
                                                    0
                                                    да, например бургер и логотип должны быть на одной строке, а получается, что бургер занимает 100% ширины и логотип занимает 100% ширины
                                                      Alexander V
                                                      27 июня 2016, 04:15
                                                      0
                                                      uk-width-small-7-10
                                                      Такого класса в Uikit нет. Если пользуетесь SublimeText, то для него есть плагин автокомплита от Uikit.
                                                        Сергей Лим
                                                        27 июня 2016, 04:17
                                                        0
                                                        @media (min-width: 480px) {
                                                          /* Whole */
                                                          .uk-width-small-1-1 {
                                                            width: 100%;
                                                          }
                                                          /* Halves */
                                                          .uk-width-small-1-2,
                                                          .uk-width-small-2-4,
                                                          .uk-width-small-3-6,
                                                          .uk-width-small-5-10 {
                                                            width: 50%;
                                                          }
                                                          /* Thirds */
                                                          .uk-width-small-1-3,
                                                          .uk-width-small-2-6 {
                                                            width: 33.333%;
                                                          }
                                                          .uk-width-small-2-3,
                                                          .uk-width-small-4-6 {
                                                            width: 66.666%;
                                                          }
                                                          /* Quarters */
                                                          .uk-width-small-1-4 {
                                                            width: 25%;
                                                          }
                                                          .uk-width-small-3-4 {
                                                            width: 75%;
                                                          }
                                                          /* Fifths */
                                                          .uk-width-small-1-5,
                                                          .uk-width-small-2-10 {
                                                            width: 20%;
                                                          }
                                                          .uk-width-small-2-5,
                                                          .uk-width-small-4-10 {
                                                            width: 40%;
                                                          }
                                                          .uk-width-small-3-5,
                                                          .uk-width-small-6-10 {
                                                            width: 60%;
                                                          }
                                                          .uk-width-small-4-5,
                                                          .uk-width-small-8-10 {
                                                            width: 80%;
                                                          }
                                                          /* Sixths */
                                                          .uk-width-small-1-6 {
                                                            width: 16.666%;
                                                          }
                                                          .uk-width-small-5-6 {
                                                            width: 83.333%;
                                                          }
                                                          /* Tenths */
                                                          .uk-width-small-1-10 {
                                                            width: 10%;
                                                          }
                                                          .uk-width-small-3-10 {
                                                            width: 30%;
                                                          }
                                                          .uk-width-small-7-10 {
                                                            width: 70%;
                                                          }
                                                          .uk-width-small-9-10 {
                                                            width: 90%;
                                                          }
                                                        }
                                                    Alexander V
                                                    27 июня 2016, 04:10
                                                    0
                                                    Попробуйте для начала, привести код в порядок. Навскидку
                                                    <li class=first level1 uk-parent data-uk-dropdown="{mode:'click'}">
                                                    -----------
                                                    </br>
                                                    ----------
                                                    <p><small></small></p>
                                                    Не похоже, что вы текстовом редакторе это делали.
                                            Дмитрий Вершинин
                                            07 августа 2016, 21:22
                                            0
                                            Симпатичный этот UI kit конечно. Насколько я понимаю, grid у него не кастомизуется по количеству столбцов, только 10? Кто активно работал с этим фреймворком, расскажите, на практике это не мешало? Не было потребности изменять количество столбцов, как можно сделать это в TB?
                                              Alexander V
                                              07 августа 2016, 21:28
                                              +1
                                              Если сильно припечет, то можно сделать вложенность или добавить свои стили в конце-концов. Хватает того, что есть.
                                              Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                                              70