Те кто так или иначе связан с веб разработкой скорее всего знает что такое Bootstrap.
Лично я познакомился с фреймворком Bootstrap версии 2.x и он на меня произвел неизгладимое впечатление. Можно было без участия дизайнера получить вполне сносный интерфейс. Встроенный перфекционист ликовал. Можно ругаться, что интернет стал очень уж бутстраповым, но нужно отдать должное, парни, работающие над ним в целом молодцы и делают нужное, а то, что народ ленивый – проблема другая.
Сегодня день рождения этого замечательного фреймворка. В свой день рождения был объявлен Bootstrap 4.
Woohoo! Twitter Bootstrap, an open-sourced CSS/HTML framework from myself and @fat, just went live: http://t.co/3OOsQ5T #kaboom
— Mark Otto (@mdo) 19 августа 2011Bootstrap 4 – что нового?
Как пишут сами разработчики нового много и сложно описать все изменения в не большом обзоре. И я не буду. Основные моменты:
Переезд с Less на Sass
Bootstrap теперь компилируется быстрее обычного за счет использования Libsass.
Улучшения системы сеточной верстки
Больший упор на мобильных пользователей. Были полностью переработаны миксины.
Теперь, судя по документации, можно из коробки получить нужные примеси в любом месте. Например вы хотите, чтоб в вашем проекте был класс .line вместо прежного .row:
.line {
@include make-row();
}
Поддержка Flexbox
Как пишут сами разработчики: «Будущее наступило...». Легким движением переменной и перекомпилированием можно получить Bootstrap основанный на Flexbox
Карточки (Cards)
На смену некоторым компонентам (well, thumbnail, panel) пришли карточки. Они делают тоже самое только еще лучше.
Reboot
Все, что в Bootstrap 3 выполняло роль сброса HTML для кросс-браузерной верстки получилось в виде модуля Reboot. С настройками в одном sass файле.
Новые опции настройки
В новой версии проект получил множество настроек через переменные Sass. Подробности в исходниках, без ковыряния в них сложно сказать чем именно это отличается от того, что было раньше в Less или Sass версиях фреймворка.
IE8 не поддерживается. Перешли на rem и em вместо px
Если нужна поддержка IE8 оставайтесь на Bootstrap 3. Обновились для того, чтобы поддерживать всё лучшее из CSS без необходимости использовать костыли. Отказ от пикселей обусловлен необходимостью лучшей поддержки отзывчивой типографики и более простого изменения размеров компонентов.
Переписаны все JavaScript плагины
Все плагины были переписаны в ES6 чтобы воспользоваться всем преимуществами новейшего JavaScript.
Улучшена работа подсказок и popover элементов
Спасибо, как я понимаю, нужно говорить проекту Tether. Поправьте если ошибаюсь.
Улучшена документация
Переписано на Markdown и добавлено пара удобных плагинов для более удобной работы с документацией. Скоро появится улучшенный поиск.
Много нового
Удобный контроль над формами, классы для отступов, новые классы-утилиты и много чего еще.
Версия 4 содержит около 1100 коммитов и 120000 строк изменений, а работа всё еще не завершена.
План разработки следущий:
— Выпустить пару alpha релизов;
— 2 beta релиза после того как определятся с возможностями и функционалом и хорошего тестирования;
— Парочка RC, чтоб вообще всё оттестировать;
— Релиз.
Bootstrap 3
Разработчики жалеют, что после релиза Bootstrap 3 они свернули поддержку второй версии. Ошибку эту они повторять не хотят, поэтому в обозримом будущем поддержка Bootstrap 3 продолжится. Будут критические баг фиксы и улучшения документации. Документация по тройке также будет доступна после финального релиза Bootstrap 4.
Но и это еще не всё! Сегодня был запущен еще один проект – Official Bootstrap Themes.
Пока там 3 внушительные темы по $99 (dashboard, application, marketing). В каждой можно найти всё из Bootstrap + примеры из реального мира, компоненты, плагины, документация и удобные утилиты. Все темы можно использовать сколько угодно раз, для любых проектов, но не продавать саму тему или производные от нее.
Скорее смотреть чего они там напридумывали!
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Комментарии (43)
Razunter
19.08.2015 22:28+1Жаль, что SASS, а не Stylus… Надеюсь, форк обновят под альфу.
iboozy
19.08.2015 23:12+1И у меня часто был такой вопрос. 3-4 года со Stylus, но большинство крупных open-source проектов на SASS. В чем прикол, то?
VitaLik_is_goodman
19.08.2015 23:57У вас много опыта, не подскажите пару моментов насчет stylusa
1) Использование прозрачных миксинов неочевидно из кода, то есть если кто-то куда-то допишет такой миксин, то узнаешь об этом по факту из chrome developer tools.
2) Так как нет фигурных скобочек, то редактор не понимает где нужны отступы, и приходится добивать их, чтобы свойства были внутри селектора, а потом обратно удалять пробелы, чтобы вернуться на уровень селектора, чтобы написать следующий селектор, что я делаю не так? ( в scss все просто, открыл скобки, значит пишешь свойства, после закрытой скобки идет селектор)
3) zen coding от phpstorm не понимает этот stylus и уверенно расcтавляет двоеточие между свойство и значением, победить не смог, пример display: none
4) в styluse для БЭМ нотации есть клевая фишка с &__name, но после таких объявлений фиг чего по проекту по селектору найдешь.
и еще много таких неприятных мелочей, но подскажите, пожалуйста, хотя бы по этим, что не так делаю.
ymatuhin
20.08.2015 09:021) То что неочевидно, очень даже плюс. Особенно когда не было автопрефиксера, я просто писал border-radius, а он раскрывал мне все как надо. Из акутальных text-overflow требует трех строчек, вместо одной. К тому-же можно писать непрозрачные — stripe()
2) Это проблема редактора и/или плагинов. Subime Text и Atom отлично работают со Stylus. Нужно поставить плагин.
3) Это тоже проблема редактора, я решал такую проблему с Sublime и с Atom, если пользуетесь чем-то из этого, напишите мне, я помогу.
4) Я разбиваю на множество маленьких модулей, и ищу по первой БЭМ класса по всем файлам .styl, пока что проблем не возникает. К тому-же можно настроить поддержку SourceMap, и прямо из дебагера посмотреть что и где поправить. Хотя такая проблема присуща и LESS/SASS.
Razunter
20.08.2015 16:17Насчёт 2 и 3 — фигурные скобки и двоеточия спокойно распознаются Stylus'ом, я фигурные скобки вообще всегда использую для удобства.
Timmmm
19.08.2015 23:33А чем Stylus хорош?
Razunter
19.08.2015 23:35Он умеет всё то, что умеет и SASS, но к тому же позволяет различный синтаксис и Globbing. Ну и гемора с установкой под Виндой меньше, что тоже приятная фича.
SerafimArts
19.08.2015 23:50+4Стилус безусловно имеет свои очень крутые плюшки (вроде переопределения свойств), но зависимость от переносов строк и пробелов — перечёркивает вообще все его плюсы, имхо.
Пользуясь случаем, как на стилусе написать код с таким форматированием?
box-shadow: 0 3px 2px rgba(#000, .2), 0 0 0 1px rgba(#000, .3), 0 -1px 0 1px rgba(#fff, .9);Razunter
19.08.2015 23:56+3зависимость от переносов строк и пробелов
Но ведь можно использовать скобки, с ними и код понятнее, и с форматированием проблем нет.
Пользуясь случаем, как на стилусе написать код с таким форматированием?
Так и написать, оно компилируется без проблем.SerafimArts
20.08.2015 00:05Хмхм, это в последних версиях? Пробовал год назад — не работало. Пробовал и так, и с экранированием слешами, и гуглил, в итоге плюнул и забил.
VEG
19.08.2015 23:50Ну и гемора с установкой под Виндой меньше, что тоже приятная фича.
Сейчас пилят официальный libsass на C++. Когда закончат — Ruby будет не нужен для его работы.Razunter
19.08.2015 23:57Я про него и говорил, у меня он не хочет компилиться. Разобраться можно, но проще SASS-код в Stylus преобразовать для старых проектов…
VasilioRuzanni
20.08.2015 00:32Ну, вряд ли его вот прям «закончат» — он уже давно в ходу и прекрасно работает.
VEG
20.08.2015 00:46Я имел в виду, когда он станет 100% совместимым с оригинальным Sass. Сейчас пишут, что последняя версия libsass совместима с версией на Ruby на 98.53%. Полагаю, что когда доберутся до 100%, на sass-lang.com появятся официальные билды sassc для Windows.
VasilioRuzanni
20.08.2015 12:02Ну она, скажем так, совместима настолько, что это не доставляет проблем. Все базовые (и не только) фичи там есть.
dom1n1k
20.08.2015 00:58Это компилятор, который работает в виндовой комстроке?
Я тоже мучался с sass под виндой, заработал только Prepros — но он дико неудобный, да ещё к тому же и платный.VasilioRuzanni
20.08.2015 12:04Про Win ничего сказать не могу, к сожалению, давно ничего на нем не настраивал :) Но судя по докам libsass — Windows там тоже поддерживается, как для самого libsass, так и для программы sassc для запуска из командной строки.
itcrab
20.08.2015 21:17Попробуйте node-sass — работает хорошо. Там выше писали про не 100% совместимость с оригинальной реализацией, но я пока не сталкивался с этой проблемой (возможно она действительно есть).
vshemarov
20.08.2015 02:55+11Переезд с Less на Sass
Пичалька. Мне лично Less как-то больше нравится
affka
20.08.2015 03:46+1Да, меня тоже немного это опечалило. Переход скорее всего связан с большими возможностями sass + скорость компиляции выше.
Значит нужно просто менять свои принципы и переходить на sass :)
jmaks13
26.08.2015 15:57Переходите, не пожалеете. Сам раньше пользовался только Less, знаю о чем пишу)
kuber
20.08.2015 05:55+6>> Пока там 3 внушительные темы по $99 (dashboard, application, marketing).
С ценой они, конечно, переборщили. Шаблоны простенькие и намного менее функциональные, чем представленные в сети.
komandakycto
20.08.2015 08:47Сегодня был запущен еще один проект – Official Bootstrap Themes
Есть такой небезызвестный сайт wrapbootstrap, я так понимаю Official Bootstrap Themes тоже самое, только пока на низком старте
Greatschemer
20.08.2015 09:42+1Трижды ура!
Только из-за того, что включили поддержку flexbox, я безумно благодарен разработчикам.
Benjaminabel
20.08.2015 13:20+1Немного странным показалось решение использовать Grunt в качестве билд-системы. Есть, конечно, стабильность и прочее, но всё же, многие давно пересели на Gulp. А так, новость очень даже хорошая.
SadhooKlay
25.08.2015 10:56Меня жаба задушит, купить тему за 99$ которую ещё 100500 человек точно так же купили или купят и используют. Таким макаром можно шаблонную, бесплатную поискать. Точно так же будет, «как у всех» :)
А новость конечно классная.
Invision70
25.08.2015 13:56Привык народ к халяве, поддержки разработчиков! (:
SadhooKlay
25.08.2015 16:13:) Тут вопрос не в халяве, а в том, что идеологически это не совсем правильно платить 100 баксов за набор html/css/js файлов, не владея ими эксклюзивно. Я понимаю, что качественный, штучный дизайн + вёрстка этого дела будут стоить дороже. Но всё же, чувствуются, что что-то тут не так — вроде заплатил, и на 5$ как на wrapbootstrap, но всё равно ничем не отличился от других, таких же покупателей :) Былоб их там не 3 а 3 000, кол-во желающих купить просто размазалось бы по этому кол-ву.
js605451
А не известно ли вдруг, есть у них в планах добавление вертикальных лэйаутов в каком-то виде, типа как в Foundation for Apps?
MistaTwista
Я так понимаю проект пока не окончательно оформлен в плане функциональности, кто знает :)