От автора: 19 августа на свет божий вышла альфа версия Bootstrap 4, ровно спустя четыре года после первого официального релиза Bootstrap v1 (Совпадение, не правда ли?). Вечно популярный front-end фреймворк обрел законченные черты, и я, как большой поклонник Bootstrap, очень взволнован и жду не дождусь приложить руки к новым возможностям!
Спустя целый год разработки, 1100 коммитов и 12000 строк-правок кода; появилось так много функций, с которыми не терпится поработать. Дабы сэкономить ваше время от прочтения лога изменений, я составил список новых возможностей, которые показались мне интересными.
Новый модуль сброса «Reboot»
Начнем оттуда, откуда начинают все фреймворки, с модуля сброса. Новый модуль reboot построен на традиционном normalize.css, но все общие селекторы и стили сброса переехали в отдельный scss файл. Также вы можете заметить новую фишку, установив стандартный box-sizing: border-box для тега html – это позволит наследовать данное свойство всем дочерним элементам.
|
1 2 3 4 5 6 |
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } |
Такой подход позволяет лучше переопределять параметры, если это потребуется, а не использовать !important.
За трюк спасибо сказать можно Jon Neal, а за подробный разбор данного метода сайту CSS-Tricks.
Rem и Em рулят!
В угоду оптимизации Bootstrap v4 лишился поддержки IE8 и массы CSS3 полифиллов. Начиная с IE9+, теперь он поддерживает другие, более любимые всеми CSS модули. Одним из них стали rem единицы (root em), они вычисляют размер шрифта относительно корневого элемента (html).
Rem единицы помогут нам по-настоящему вникнуть в адаптивную типографику. Так как все размеры шрифта напрямую зависят от нашего корневого элемента, мы можем создавать медиа запросы для изменения размера шрифта под разные размеры экрана. Скомбинируем это с новым миксином сетки для разных размеров экрана и вуаля! Ниже пример изменения размера шрифта на нашем сайте при просмотре на очень маленьких экранах:
|
1 2 3 4 5 6 7 8 9 10 |
html{ font-size:16px; } // создаем медиа запрос для крайне малых размеров экрана (0 - 34em) @include media-breakpoint-up(xs) { html{ font-size:18px; } } |
Подробнее можете прочитать в статье Kezz Bracey Подробное руководство: Когда использовать Em, а когда Rem.
Я выбираю Flexbox
Прямо из коробки Bootstrap v4 не поддерживает Flexbox, вместо него использует стандартные обтекания или табличный метод отображения. Это сделано для поддержки IE9+, но если вы можете отказаться и поддерживать только IE10+, то можно подключить Flexbox к вашему проекту. Сделать это можно, изменив булево значение переменной в файле _variables.scss; после чего ваш скомпилированный css будет содержать Flexbox стили. Flexbox применяется не только из-за сетки, а также из-за других элементов, в том числе нового компонента карточек, групп ввода и медиа компонентов.
Пример
Перейдем к примеру, где нам может пригодиться Flexbox. Крайне часто у меня имеется набор линейных колонок (как на картинке), где контент одной колонки увеличивает высоту и остальных колонок тоже. Классическая CSS дилемма. Одно из преимуществ Flexbox в том, что мы можем заставить все колонки иметь одинаковую высоту. Не нужно писать дополнительный CSS код!
Без Flexbox
С Flexbox
SCSS «узурпировал» LESS, так же, как и препроцессор CSS был выбран в Bootstrap v4. Весь код CSS был переработан в SCSS, причем без официального LESS порта на момент написания статьи. Некоторые причины этого Марк объясняет в твиттере.
Если вы большой поклонник оригинального LESS, то Марк просил о некоторой помощи в создании и обслуживании LESS порта.
Карточки, унифицированный элемент интерфейса
Из Bootstrap v4 были удалены классические компоненты well, panel и thumbnail. На их место пришел новый компонент: карточки!
Новый элемент карточка имеет схожие части от панелей, такие как заголовки, хедеры и футеры, и все это обернуто в гибкий контейнер.
И еще больше:
Наложения поверх изображений и фон
Можно установить в качестве фона картинку и наложить ее поверх текста или другого контента. Все это делается без единой лишней строки CSS, нужно только добавить в карточку:
|
1 |
<img class="card-img" data-src="image.jpg" alt="Card image"> |
Класс card-inverse делает текст белым, позволяя задать более темный фон, если это требуется. Насчет фонов, также можно использовать и стандартные фоновые цвета. К примеру, card-primary установит первичный цвет для карточки и т.д. и т.п.
Группированные карточки
Также помимо стандартной сетки с отступами, вы найдете опцию группирования карточек без внутренних отступов между ними и как установить блокам одну высоту. По умолчанию это можно сделать с помощью display: table и table-layout: fixed, но если у вас есть Flexbox, то можно и с помощью display: flex.
Сетка – кирпичная кладка
Карточки идут в виде колонок кирпичиков, что позволяет пододвинуть блоки ближе друг к другу. Эта опция не поддерживается в IE9 – необходим IE10 и выше!
Еще больше служебных классов?!
В предыдущих версиях Bootstrap было много классов с названием «служебный класс», они использовались для быстрого и легкого изменения контента, не трогая его специфические стили. Изменения, как правило, ограничивались обтеканиями (pull-left, pull-right), цветом (text-primary и т.д.), клиарфиксами (.clearfix) и другими.
В альфе Bootstrap v4 мы получили доступ к целой массе новых служебных классов, связанных с паддингами и маргинами. Возможно, это и спорный шаг, он позволит пользователям Bootstrap v4 быстро нажать на одну кнопку и выровнять контент внутри с одинаковым шагом. Некоторые подумают, что это отход от встроенных стилей, но эти классы позволяют быстро и равномерно стилизовать компоненты, не создавая для этого отдельного селектора.
Служебные классы padding и margin задаются с множественным значением переменной spacer. Например:
|
1 2 3 4 5 6 |
// $spacer - sass переменная, равная 1rem или 16px .m-a-0 { margin: 0 !important; } .m-a { margin: $spacer !important; } .m-a-md { margin: ($spacer * 1.5) !important; } .m-a-lg { margin: ($spacer * 3) !important; } |
В коде .m-a значит внешний отступ по всем сторонам. Для внутренних отступов также существуют классы для отдельных сторон, осей, размеров (с помощью -0, -md и -lg). Ниже пример парочки других классов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// стандартный паддинг на все стороны .p-a { padding: $spacer !important; } // стандартный паддинг сверху .p-t { padding-top: $spacer-y !important; } // стандартный паддинг справа .p-r { padding-right: $spacer-x !important; } // стандартный паддинг снизу .p-b { padding-bottom: $spacer-y !important; } // стандартный паддинг слева .p-l { padding-left: $spacer-x !important; } // стандартный паддинг для оси Х (лево и право) .p-x { padding-right: $spacer-x !important; padding-left: $spacer-x !important; } // стандартный паддинг для оси У (верх и низ) .p-y { padding-top: $spacer-y !important; padding-bottom: $spacer-y !important; } |
Основная идея заключается в снижении количества узкоспециализированных пользовательских классов, которые создаются для того, чтобы подвинуть контент, а не добавлять их в качестве методов по выравниванию содержимого.
Я перекинулся парой слов с Марком Отто по поводу использования этих классов (@mdo сооснователь Bootstrap) на их сайте public Slack channel, и вот что он сказал:
«Мы поняли, что нам без них не обойтись, слишком часто переопределяются значения по умолчанию для многих компонентов. Margin и padding кажется наиболее часто меняют свое значение (вместе с цветом и шрифтов)»
Также достойно упоминания
Существуют буквально еще сотни новых возможностей и обновлений существующего кода, слишком много для одного поста. Расскажу про еще парочку, которые не вошли в основной список, но о них стоит упомянуть.
Новая документация
Документация Bootstrap v4 обновилась. Немного изменилась структура, по которой функции разбивались на макеты, контент и компоненты. Что действительно круто в новой документации, так это то, что каждый компонент теперь на отдельной странице. Это облегчает их поиск, а также можно сразу проверить адаптивность, поигравшись с размером окна браузера.
Новый уровень сетки
В Bootstrap 4 добавлен новый уровень сетки для маленьких экранов (480px в ширину), этот размер экрана получил имя класса предыдущего самого маленького экрана (.col-xs-XX). При этом все уровни сетки сдвинулись на один вверх, тем самым создавая новый самый большой уровень .col-xl-XX.
Как обсуждалось выше в статье про rem и em, команда Bootstrap добавила новые миксины для быстрого создания новых размеров экрана среди существующих. Для создания используется следующий синтаксис:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Creates a media query: @media (min-width) @include media-breakpoint-up(xs) { ... } @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } // Creates a media query: @media (max-width) @include media-breakpoint-down(xs) { ... } @include media-breakpoint-down(sm) { ... } @include media-breakpoint-down(md) { ... } @include media-breakpoint-down(lg) { ... } @include media-breakpoint-down(xl) { ... } |
Больше никаких иконок
Иконки были удалены из билда; в документацию Bootstrap добавили инструкции, как подключить сторонние пакеты иконок, как Font Awesome и Octicons.
JavaScript переписан
Все плагины JavaScript были переписаны в ES6 под последнюю спецификацию. Вы могли заметить, что некоторые плагины удалены (как affix плагин), они все еще переписываются, к ним добавляются новые библиотеки.
И что дальше?
Вот такой у меня получился список новых крутых функций в Bootstrap альфе. Если захотите полностью изучить лог изменений, взгляните на ГитХаб @mdo pull request.
Уверен, еще будет куча изменений, они до сих пор делаются, команда работает на износ. Планы развития включают следующие этапы:
Еще парочка альфа релизов для решения вопросов, поднятых сообществом
Два бета релиза по завершении всех функций
Два релиз-кандидата, чтобы убедиться, что все отточено.
Не сказано, когда все это будет выпущено. Так же как и с предыдущими билдами, все выйдет, когда будет готова библиотека. А сейчас можете поизучать Bootstrap и помочь отследить проблемы, о багах можно писать на bug tracker!
Автор: Aaron Vanston
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (7)