Twitter Bootstrap vs Uikit
Давно работаю с CSS фреймворком Uikit и мне он кажется намного интересней и более продвинутым в сравнении с привычным Twitter Bootstrap. Единственный минус, это замена цветовой схемы, её приходится править в каждом компоненте.
Хотелось бы от вас услышать доводы в пользу одного или друго CSS-фреймворка.
Есть ряд вопросов к TB, которые надо пилить и которые есть уже в Uikit. Задумался над выбором, пилить TB т.к. популярный или продолжать работать на Uikit.
Хотелось бы от вас услышать доводы в пользу одного или друго CSS-фреймворка.
Есть ряд вопросов к TB, которые надо пилить и которые есть уже в Uikit. Задумался над выбором, пилить TB т.к. популярный или продолжать работать на Uikit.
14 января 2015, 08:05
Комментарии: 70
Меня вот этот увлек — getskeleton.com/, очень нравится после TB. В TB проблема была — прибить стандартные стили у компонента, которые мешают, в скелетоне только сетка и пару совсем базовых вещей, недостающее пишешь как нужно тебе. Умеет less и sass, что для меня тоже важно.
А есть какие-то проблемы с прибиванием? Вот же конструктор — включай только то, что нужно.
Лично я не дизайнер и не верстальщик, поэтому без Bootstrap мне никак.
Лично я не дизайнер и не верстальщик, поэтому без Bootstrap мне никак.
Отключаешь компонент — и его нет совсемНу вот по твоей ссылке большинства компонентов Bootstrap и нет совсем — в чем тогда разница?
Или разница в гридах, таблицах и формах, типа в Bootstrap они сильно избыточные? А вот в скелетоне я сходу не вижу аналога offset-col в гриде — всё сплошняком.
В общем, на вкус и цвет.
Я же не агитирую всех на него переходить :) Это лишь мое мнение. Мне он понравился в работе. И да, именно тем, что ничего лишнего. Оффсеты есть.
Я заметил, что в TB раньше была проблема с кастомизацией элементов (версия 2<), нужно было всегда употреблять !important в своих файлах стилей. Сейчас нет такой надобности.
Ну и я как дизайнер + фронтенд разработчик, поддерживаю Bootstrap. А так общем, на вкус и цвет, действительно.
Ну и я как дизайнер + фронтенд разработчик, поддерживаю Bootstrap. А так общем, на вкус и цвет, действительно.
Очень даже отличный инструмент для вэб разработки. К тому же есть продвинуты кастомизатор, что облегчает работу. Главное к нему привыкнуть постепенно)) Использую как uikit так и бустрап, в зависимости от потребности. В плане сетки у uikita она имеете свои интересные моменты)) не сразу вникнешь, что да как.
Более года перешел на использование Uikit
недавно пришлось сделать проект на Bootstrape — плевался долго;
— нету вертикального выравнивания элементов,
— очень маленький набор иконок да и прикручивать их не совсем удобно,
— большой вес фреймворка,
— нету дополнительных плюшечек,
— флексбокс,
— анимация,
— Off-холст,
— плавная прокрутка и много-много чего
Приходиться все искать со стороны, когда в uikit это доступно из коробки
недавно пришлось сделать проект на Bootstrape — плевался долго;
— нету вертикального выравнивания элементов,
— очень маленький набор иконок да и прикручивать их не совсем удобно,
— большой вес фреймворка,
— нету дополнительных плюшечек,
— флексбокс,
— анимация,
— Off-холст,
— плавная прокрутка и много-много чего
Приходиться все искать со стороны, когда в uikit это доступно из коробки
Читаю ветку, и единственное что приходит в голову — это то как я не могу воспринимать сетку 960 grid, т.е. вот совсем, не могу и все. Наверно все же нет такого как явные преимущества одного решения над другим, есть то с чем удобно работать конкретному разработчику, а вот заказчики становятся в любом случае заложниками выбранного решения.
Так что, пусть будет все)) А то может стоит смотреть в сторону philipwalton.github.io/solved-by-flexbox/
Так что, пусть будет все)) А то может стоит смотреть в сторону philipwalton.github.io/solved-by-flexbox/
Подскажите по вертикальному выравниванию
<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>
С этим я разобрался, сейчас я например не могу понять, почему у меня 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>
Привет.
Кстати доработал grid Uikit 1-7, 1-8, 1-9
Кому интересно забирайте тут: github.com/uikit/uikit/issues/1900
И подключать скрипты и стили можно из внешнего ресурса так удобней
cdnjs.com/libraries/uikit
Кстати доработал grid Uikit 1-7, 1-8, 1-9
Кому интересно забирайте тут: github.com/uikit/uikit/issues/1900
И подключать скрипты и стили можно из внешнего ресурса так удобней
cdnjs.com/libraries/uikit
А вот интересно, кто бы мне убогому показал конечный результат на TB и чем то вашем любимом с изначально одинаковым ТЗ (прототип, дизайн — сложность только что бы была не детская ) и разными результатами в конечном продукте, с разбором кода верстки, со сравнением реализации адаптивности и т.п. и т.д.
Ибо заявленная тема «Bootstrap vs Uikit» так и осталась вся на уровне личных предпочтений.
Ибо заявленная тема «Bootstrap vs Uikit» так и осталась вся на уровне личных предпочтений.
Посмотри хотя бы какие есть хелперы в 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>
Я о том, что ты тему «Twitter Bootstrap vs Uikit» поднял, а нормально структурировать что есть, чего нет, как положено в таких случаях, в таблице, со ссылками…
Оно понятно, что можно найти время и самому все опробовать, времени как раз и нет))
Взял бы и расписал, раз пробовал и то и то.
Я вёрстку на Uikit только где то редактировал по мере надобности. TB мне привычнее, хотя да, его в чем то избыточность, а в чем то ущербность ощущается, но не верю в панацеи, жду 4ю версию, полагаю что где то так upgrade проще станет. Много чего есть вообще уходящего от гридов, и сами гриды все развиваются.
Короче, раз, пишешь «1 vs 2» — дай расклад в таблице со столбцами с нормальным сравнением и будет тебе респект и уважение))
Удачи в любом случае.
Оно понятно, что можно найти время и самому все опробовать, времени как раз и нет))
Взял бы и расписал, раз пробовал и то и то.
Я вёрстку на Uikit только где то редактировал по мере надобности. TB мне привычнее, хотя да, его в чем то избыточность, а в чем то ущербность ощущается, но не верю в панацеи, жду 4ю версию, полагаю что где то так upgrade проще станет. Много чего есть вообще уходящего от гридов, и сами гриды все развиваются.
Короче, раз, пишешь «1 vs 2» — дай расклад в таблице со столбцами с нормальным сравнением и будет тебе респект и уважение))
Удачи в любом случае.
TB мне привычнее, хотя да, его в чем то избыточность, а в чем то ущербность ощущаетсяКак я делаю с последнее время:
1. Качаю scss исходники, выбирая только нужное
2. Подключаю их в MinifyX на сервере
3. Добавляю свой кастомный scss туда же
4. И делаю всё, что мне нужно
Таким образом, можно избавиться от всей избыточности и не нужно заморачиваться с инструментами. Именно так, например, был свёрстан vrmedia.tv, хотя я совсем не верстальщик.
Подскажите, почему не работает
<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><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>@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%;
}
}
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Здесь упомянуты:
| Компонент | Текущая версия | Закачки |
| pdoTools | 2.13.2-pl от 02.09.2021 | 53 714 |
| AjaxSnippet | 1.1.1-pl от 13.10.2014 | 2 972 |
| miniShop2 | 4.3.0-pl от 02.07.2023 | 25 471 |
| SCSS | 2.0.4-pl от 25.06.2023 | 142 |
| MinifyX | 1.7.1-pl от 25.03.2019 | 14 227 |
| Office | 1.9.5-pl от 01.10.2021 | 6 968 |
11 минут назад
спасибо) не увидел
Вчера в 21:51
Ок, спасибо за совет. Тогда напишу свой коннектор
Вчера в 19:21
На тестовом тарифе памяти не хватает.
Вчера в 18:08
* поправочка:
<base>
Вчера в 11:06
Понимаю, поэтому буду подпиливать потихоньку хотелки.
Пишу, чтобы если кто столкнется, знал как решить.
14 апреля 2024, 15:35
modstore.pro/packages/ecommerce/seotabs