Twitter Bootstrap vs Uikit

Давно работаю с CSS фреймворком Uikit и мне он кажется намного интересней и более продвинутым в сравнении с привычным Twitter Bootstrap. Единственный минус, это замена цветовой схемы, её приходится править в каждом компоненте.
Хотелось бы от вас услышать доводы в пользу одного или друго CSS-фреймворка.
Есть ряд вопросов к TB, которые надо пилить и которые есть уже в Uikit. Задумался над выбором, пилить TB т.к. популярный или продолжать работать на Uikit.

Alexander V

14 января 2015, 08:05

14 578

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

Wassi Wassinen

14 января 2015, 11:18

Почему не Foundation 5?

Alexander V

14 января 2015, 11:26

Как-то не прижился в своё время (F4). TB использовал в основном.

Wassi Wassinen

14 января 2015, 11:52

На самом деле — довольно интересный продукт. Четвертая ветка — не знаю, а вот пятая — понравилась. Но использую ТВ. :) Привычнее.

Alexander V

14 января 2015, 12:20

Есть у Foundation5 и Uikit компоненты, которых нет в FB навскидку:
1. Off-canvas
2. Equalizer (F5)
3. Dropdown нормальный, который настраивается на клик и наведение.

Abu

14 января 2015, 14:56

Как аргумент в пользу TB большое разнообразие тем и компонентов. Например поиск на themeforest

Uikit
24
Templates & Themes

twitter bootstrap
1,137
Templates & Themes

+foundation
295
Templates & Themes

Alexander V

14 января 2015, 23:00

Популярен, не спорю. Только шаблон вряд ли имеет отношение к фреймворку. Всё же инструмент обсуждаем.

TITAN-UZ

14 января 2015, 18:37

Semantic UI

Alexander V

14 января 2015, 23:01

Смотрел, красивый. Синтаксис немного непривычный и Grid какой-то странный.

Іван Клімчук

15 января 2015, 20:49

Меня вот этот увлек — getskeleton.com/, очень нравится после TB. В TB проблема была — прибить стандартные стили у компонента, которые мешают, в скелетоне только сетка и пару совсем базовых вещей, недостающее пишешь как нужно тебе. Умеет less и sass, что для меня тоже важно.

Василий Наумкин

15 января 2015, 20:55

А есть какие-то проблемы с прибиванием? Вот же конструктор — включай только то, что нужно.

Лично я не дизайнер и не верстальщик, поэтому без Bootstrap мне никак.

Іван Клімчук

15 января 2015, 20:58

Это решает проблему, но не всегда. Отключаешь компонент — и его нет совсем, когда он тебе нужен в самом минимальном исполнении.

Василий Наумкин

15 января 2015, 21:07

Отключаешь компонент — и его нет совсем

Ну вот по твоей ссылке большинства компонентов Bootstrap и нет совсем — в чем тогда разница?

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

В общем, на вкус и цвет.

Іван Клімчук

15 января 2015, 21:18

Я же не агитирую всех на него переходить :) Это лишь мое мнение. Мне он понравился в работе. И да, именно тем, что ничего лишнего. Оффсеты есть.

Alexander V

15 января 2015, 21:26

Ох уж эти именования в grid… Не могли цифрами что ли сделать? Периодически встречаются такие упоротые идеи.

Іван Клімчук

15 января 2015, 21:30

ну это для нас непривычно, так как язык не родной, а для создателей-носителей вполне ок, как и для англоговорящих пользователей

Alexander V

16 января 2015, 02:02

Да по мне, хоть на русском. Цифры лучше воспринимаются. На подсознательном уровне вы считаете, когда смотрите сетку.

Іван Клімчук

16 января 2015, 08:38

форк и заменить все на цифры, да и просто для себя можно взять и заменить все заменой по файлу )) Там не такие объемы кода, как в бутстрапе

Aliaksandr Katlou

16 января 2015, 14:58

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

Владимир Дремучий

15 января 2015, 22:17

Я заметил, что в TB раньше была проблема с кастомизацией элементов (версия 2<), нужно было всегда употреблять !important в своих файлах стилей. Сейчас нет такой надобности.
Ну и я как дизайнер + фронтенд разработчик, поддерживаю Bootstrap. А так общем, на вкус и цвет, действительно.

Aliaksandr Katlou

16 января 2015, 14:58

purecss.io

Alexander V

16 января 2015, 19:33

Упустил один интересный момент. Uikit во всех классах имеет префикс uk-, что позоляет избежать конфликтов и может использоваться наряду с другими фреймворками.

Владимир Шевченко

01 января 2016, 13:04

Очень даже отличный инструмент для вэб разработки. К тому же есть продвинуты кастомизатор, что облегчает работу. Главное к нему привыкнуть постепенно)) Использую как uikit так и бустрап, в зависимости от потребности. В плане сетки у uikita она имеете свои интересные моменты)) не сразу вникнешь, что да как.

oleg

31 января 2016, 22:56

Более года перешел на использование Uikit
недавно пришлось сделать проект на Bootstrape — плевался долго;
— нету вертикального выравнивания элементов,
— очень маленький набор иконок да и прикручивать их не совсем удобно,
— большой вес фреймворка,
— нету дополнительных плюшечек,
— флексбокс,
— анимация,
— Off-холст,
— плавная прокрутка и много-много чего
Приходиться все искать со стороны, когда в uikit это доступно из коробки

Alexander V

31 января 2016, 23:04

Я сам плАчу кровавыми слезами, когда делаю на Bootstrap. Кучи хелперов не хватает.
Сейчас занимаюсь тиражном решением, приходится делать на Bootstrap, ничего не поделаешь.

oleg

01 февраля 2016, 01:34

В большинстве случаев удается убедить клиента в пользу Uikit, но есть не пробивные которые гнут палку в сторону ТВ(встречаются крайне редко)

Владимир

09 июня 2016, 10:40

Читаю ветку, и единственное что приходит в голову — это то как я не могу воспринимать сетку 960 grid, т.е. вот совсем, не могу и все. Наверно все же нет такого как явные преимущества одного решения над другим, есть то с чем удобно работать конкретному разработчику, а вот заказчики становятся в любом случае заложниками выбранного решения.
Так что, пусть будет все)) А то может стоит смотреть в сторону philipwalton.github.io/solved-by-flexbox/

Илья

12 февраля 2016, 15:45

Подскажите! Начал изучать UiKit, до этого Bootstrap пользовался, и первое что бросилось в глаза — это дублирование меню для мобильной и десктопной версии.
Я правильно понял, это так?

Как в этом случае ПС к этому относятся, проблем нет?

Alexander V

12 февраля 2016, 15:57

Да, это так. Off-canvas используется. По-моему нормальное решение. Или вас смущает лишний вызов pdoMenu?

Илья

12 февраля 2016, 16:39

Нет, pdoMenu не смущает, волнует именно дублирование меню в коде, особенно если оно большое.
1-е в десктопном, 2-е в мобильном.

Alexander V

12 февраля 2016, 17:41

Их же одновременно не видно. В чем проблема?

Виталий Греков

12 февраля 2016, 19:59

можно попробовать решить с помощью AjaxSnippet

Alexander V

12 февраля 2016, 20:35

Можно и так. Не берусь утверждать за HTML (скорее всего загрузит полностью), а картинки при условии медизапроса браузеры не загружают.

Сергей Лим

25 февраля 2016, 07:00

Подскажите по вертикальному выравниванию

<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

Мне почему то кажется что проблема в том, что они болтаются внутри дива. Я бы их в форме списка внутри оформил…

Сергей Лим

25 февраля 2016, 09:43

Не помогло

Alexander V

25 февраля 2016, 13:54

Высота должна быть фиксированная.

Сергей Лим

17 мая 2016, 09:16

<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

Подскажите пожалуйста ресурсы по uikit на русском языке, getuikit.ru не считается

Alexander V

10 мая 2016, 08:41

Вроде и так всё понятно. Смотрите примеры.

Сергей Лим

10 мая 2016, 08:45

Ну вот я буквально несколько минут назад только догнал, что к каждому компоненту надо отдельно подключать свой js, я целый день голову ломал, почему не пашет, думал надо только uikit.js подключить, а он уже подтягивает нужные скрипты.

Alexander V

10 мая 2016, 08:56

Примерно так.

Сергей Лим

10 мая 2016, 08:59

С этим я разобрался, сейчас я например не могу понять, почему у меня 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

Кроме скриптов надо подключить файл стилей от компонента.

Сергей Лим

10 мая 2016, 09:10

Заработало) Спасибо тебе)

oleg

09 июня 2016, 10:13

Привет.
Кстати доработал grid Uikit 1-7, 1-8, 1-9
Кому интересно забирайте тут: github.com/uikit/uikit/issues/1900
И подключать скрипты и стили можно из внешнего ресурса так удобней
cdnjs.com/libraries/uikit

Владимир

09 июня 2016, 11:13

А вот интересно, кто бы мне убогому показал конечный результат на TB и чем то вашем любимом с изначально одинаковым ТЗ (прототип, дизайн — сложность только что бы была не детская ) и разными результатами в конечном продукте, с разбором кода верстки, со сравнением реализации адаптивности и т.п. и т.д.
Ибо заявленная тема «Bootstrap vs Uikit» так и осталась вся на уровне личных предпочтений.

Alexander V

09 июня 2016, 13:05

Посмотри хотя бы какие есть хелперы в 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

Я о том, что ты тему «Twitter Bootstrap vs Uikit» поднял, а нормально структурировать что есть, чего нет, как положено в таких случаях, в таблице, со ссылками…
Оно понятно, что можно найти время и самому все опробовать, времени как раз и нет))
Взял бы и расписал, раз пробовал и то и то.
Я вёрстку на Uikit только где то редактировал по мере надобности. TB мне привычнее, хотя да, его в чем то избыточность, а в чем то ущербность ощущается, но не верю в панацеи, жду 4ю версию, полагаю что где то так upgrade проще станет. Много чего есть вообще уходящего от гридов, и сами гриды все развиваются.
Короче, раз, пишешь «1 vs 2» — дай расклад в таблице со столбцами с нормальным сравнением и будет тебе респект и уважение))
Удачи в любом случае.

Alexander V

09 июня 2016, 13:26

Есть, Сэр!

Владимир

09 июня 2016, 13:31

Василий Наумкин

10 июня 2016, 13:39

TB мне привычнее, хотя да, его в чем то избыточность, а в чем то ущербность ощущается

Как я делаю с последнее время:
1. Качаю scss исходники, выбирая только нужное
2. Подключаю их в MinifyX на сервере
3. Добавляю свой кастомный scss туда же
4. И делаю всё, что мне нужно

Таким образом, можно избавиться от всей избыточности и не нужно заморачиваться с инструментами. Именно так, например, был свёрстан vrmedia.tv, хотя я совсем не верстальщик.

Сергей Росоловский

11 июня 2016, 19:52

Интересно, а как на vrmedia.tv сделано просмотр большой версии фото? Вижу при клике на фото идет ajax-запрос в компоненте Office к action.php. Как это организовано?

Василий Наумкин

12 июня 2016, 07:05

Интересно, а как на vrmedia.tv сделано просмотр большой версии фото?

Обычный Fancybox

Вижу при клике на фото идет ajax-запрос в компоненте Office к action.php.

Это подсчёт просмотров.

oleg

10 июня 2016, 12:22

а чего то сравнивать, пользуйтесь uikit не пожалеете.

Дмитрий Иванов

12 июня 2016, 00:59

Если надо совсем навороченный фреймворк, то семантик рулит)

Alexander V

12 июня 2016, 01:23

Semantic это прежде всего UI

Дмитрий Иванов

13 июня 2016, 11:52

и в чем принципиальная разница?
«Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.»

Stan Ezersky

13 июня 2016, 13:22

Все мощные CSS+JS фреймворки— это UI

Сергей Лим

27 июня 2016, 03:34

Подскажите, почему не работает

<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

<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

неа

Alexander V

27 июня 2016, 03:51

Значит показывай онлайн.

Сергей Лим

27 июня 2016, 03:53

tuningdv.ru

Alexander V

27 июня 2016, 04:05

Что там не так? Я так понимаю, что с мобильной версией проблема?

Сергей Лим

27 июня 2016, 04:06

да, например бургер и логотип должны быть на одной строке, а получается, что бургер занимает 100% ширины и логотип занимает 100% ширины

Alexander V

27 июня 2016, 04:15

uk-width-small-7-10

Такого класса в Uikit нет. Если пользуетесь SublimeText, то для него есть плагин автокомплита от Uikit.

Сергей Лим

27 июня 2016, 04:17

@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

Попробуйте для начала, привести код в порядок. Навскидку

<li class=first level1 uk-parent data-uk-dropdown="{mode:'click'}">
-----------
</br>
----------
<p><small></small></p>

Не похоже, что вы текстовом редакторе это делали.

Дмитрий Вершинин

07 августа 2016, 21:22

Симпатичный этот UI kit конечно. Насколько я понимаю, grid у него не кастомизуется по количеству столбцов, только 10? Кто активно работал с этим фреймворком, расскажите, на практике это не мешало? Не было потребности изменять количество столбцов, как можно сделать это в TB?

Alexander V

07 августа 2016, 21:28

Если сильно припечет, то можно сделать вложенность или добавить свои стили в конце-концов. Хватает того, что есть.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Twitter Bootstrap vs Uikit

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

Здесь упомянуты