Вышла альфа версия Bootstrap 4

Я уже давно ожидал этого события, и вот вчера, 19.08.2015, вышла первая альфа версия CSS фреймворка Bootstrap 4, о чем пишут в официальном блоге. ссылка

Новинки это всегда хорошо, а ожидаемые так и вообще прекрасно!
В данный момент при работе над своими проектами мы повсеместно используем Bootstrap 3, по началу все были в восторге, но чем дальше в лес, тем больше багов и ограничений.

Сейчас нас уже не устраивает стоковая сетка третьей версии фреймворка, она не достаточно гибкая и сделать адекватно адаптирующийся интерфейс на ней сложно.
Также при разработке шаблонов, да и при повседневной работе нужны сервисные классы, например отступы. Сейчас эта "дырка" закрывается при помощи студийного решения klondike.tools в которое встроена функция подключающая .css файл с соответствующими правилами. Были мысли о добавлении в k.css и дополнительной адаптивной сетки, но дальше мыслей пока не ушло.
В общем мы ждали нового Bootstrap, а тем временем латали дырки как моги.

Что обновили и добавили?

  1. Изменилась сетка
  2. Полностью переписаны JS компоненты
  3. Сменился прекомпилятор, LESS->SASS
  4. Переписаны и доработаны классы видимости
  5. Добавлены сервисные классы
  6. Полностью переписан normalize и вынесен в отдельный компонент
  7. Полностью прекращена поддержка IE8
  8. Добавились новые компоненты, к примеру Cards
  9. И многое другое с чем можно ознакомиться тут

Сравним с тем что используем сейчас

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

Сетка

Сетка Bootstrap 3 не отвечает запросам текущей реальности, к примеру класс .col-xs-* предназначен для мобильных устройств и одинаково себя ведет в вертикальном и горизонтальном положении устройства. Это крайне неудобно потому что высота дисплея современных мобильных устройств в два с лишним раза больше его ширины, а если повернуть аппарат в горизонтальное положение, они меняются. но при этом .col-xs-* ведет себя одинаково и там и там, что ведет к отвратительному отображению страницы.

Сетка Bootstrap 4 основана на относительных единицах em и ведет себя несколько иначе. Во первых в новой сетке не четыре контрольных точки: lg, md, sm, xs; как ранее, а пять - xl, lg, md, sm, xs!
Далее еще интереснее, добавление еще одной контрольной точки было бы бесполезно, если бы не устранилась проблема с сеткой на мобильных устройствах. В Bootstrap 4 сетка ведет себя следующим образом - мобильный телефон, к примеру iPhone 5/6/6 plus в вертикальном положении будут соответствовать классу .col-xs-*, а в горизонтальном .col-sm-*! И это огромная разница, это как раз то что не давало сделать адекватно адаптивные страницы на Bootstrap 3.

Классы видимости

Bootstrap 3 имел 8 основных и 2 дополнительных классов видимости - .hidden-*, .visible-*.

В Bootstrap 4 поменялась логика работы классов видимости, их количество и синтаксис написания.
Во первых теперь нет .visible-*, в строю остался только .hidden-*.
Во вторых изменился .hidden-*, теперь помимо приставки обозначающей контрольную точку .hidden-(xl,lg,md,sm,xs), добавилась еще одна -up/-down - .hidden-xl-up/.hidden-xl-down. Грубо говоря при указании .hidden-md-up мы говорим что элемент необходимо скрыть на пространстве md и выше, а до md элемент будет виден. Наглядно можно посмотреть тут .

Сервисные классы

В Bootstrap 3 были сервисные классы, можно было управлять текстом, его стилем и направлением, но не было очень важной вещи - нельзя было управлять отступами, именно поэтому в нашем решении появилась опция k.css

В Bootstrap 4 ситуация поменялась, примерно 90% k.css в нем есть, синтаксис не такой удобный, но это будет стандартное решение наших проблем. Подробнее о сервисных классах тут .

Поддержка IE8

Грубо говоря поддержка IE8 и более старших версий закончилась еще при выходе Bootstrap 3, потому что IE8 не поддерживает работу с @media query. Но в релизе альфа версии Bootstrap 4 было прямо заявлено что поддержки IE8 не будет ни в каком виде, потому что помимо @media query он не поддерживает работу с относительными единицами измерения em.
В общем если нужна поддержка IE8, апгрейд противопоказан =(.

Комментарий Игошева Дмитрия

В первую очередь я ждал обновления сетки и решения проблем адаптива на мобильных устройствах. А как только узнал о выходе альфы, сразу бросился тестировать. Результаты меня обрадовали, сетка стала лучше, конечно мы полностью потеряли поддержку IE8 и нужно будет придумывать костыли, но лучше крутить костыли для мамонтов, чем для современных устройств и браузеров.
Новые сервисные классы позволяют не использовать k.css, но на мой взгляд они не так удобны, у моего решения синтаксис покороче =).
Отличное и долгожданное обновление фреймворка, будем ждать стабильную версию!

Игошев Дмитрий Дмитрий Игошев Руководитель отдела разработки

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

  1. Виктор 07.12.2015 Ответить
    1. не смог оставить комент на телефоне, прсото не дал залогиниться гуглом.
    2. ОСтавил комент гуглом но не нашел его на сайте.
    3. Статейка хорошая.
  2. Дмитрий
    Дмитрий 09.12.2015 Ответить
    1) с логином через chrome у bitrix наблюдаются проблемы, я сафари юзаю для этого.
    2) все комменты проходят постмодерацию.
    3) статейка-статейкой, а я жду стабильного релиза =).

Оставить комментарий