Bootstrap 5.

 

Bootstrap, самая популярная интерфейсная инфраструктура, созданная для разработки современных, адаптивных и динамических интерфейсов для профессиональных веб-страниц, в настоящее время осуществляет серьезное обновление - Bootstrap 5.

Bootstrap - это бесплатная коллекция с открытым исходным кодом кода CSS и JavaScript / jQuery, используемая для создания сайтов с динамическим макетом и веб-приложений. Являясь инструментом для создания внешнего интерфейса, он состоит из серии шаблонов дизайна на основе HTML и CSS для различных компонентов веб-сайта или приложения, таких как формы, кнопки, навигация, модальные элементы, типографика и другие компоненты интерфейса с полезными JavaScript расширениями. Не имеет значения, являетесь ли вы новичком в веб-разработке или опытным разработчиком, Bootstrap является мощным инструментом для любого типа веб-сайта и веб-приложения, которое вы пытаетесь создать.

Кроме того, Bootstrap предоставляет готовое решение с сотнями сторонних компонентов, которые вы можете интегрировать вместе с ним, что позволяет быстро создавать прототип для реализации идеального веб-сайта, не тратя много времени. Что в итоге вы можете настроить для создания окончательного дизайна вашего веб-сайта или веб-приложения, так как большая часть конфигурации уже настроена для вас.

Bootstrap 4 в настоящее время имеет версию 4.4.1, которая теперь имеет много жизненно важных функций, таких как карты, flexbox, интеграция с Sass и мощные плагины, построенные на jQuery. После более чем 4-летнего прогресса с момента выхода альфа-версии Bootstrap 4 19 августа 2015 года; в фоновом режиме разрабатывается обновление для пятой версии.

В этой статье давайте рассмотрим основные обновления Bootstrap 5, включая дату выпуска, интеграцию и модификацию.

 

Bootstrap Version 5: чего нам ожидать?

Официальная доска отслеживания проектов Bootstrap 5 на Github содержит более 765 задач, с более чем 83 запросами и 311 проблемами. Если мы основываемся на дату выпуска с предыдущего периода разработки (Bootstrap 4 до Bootstrap 4.1), команде разработчиков потребовалось около 3 месяцев, чтобы завершить Bootstrap 4.1 до Bootstrap 4.2 - около 8 месяцев. Мы можем ожидать Bootstrap 5 в первой половине 2020 года. Bootstrap еще не подтвердил официальную дату релиза.

Оглядываясь назад, есть список изменений, которые мы ожидаем от версии 5, такие как удаление jQuery, что является основным подъемом для этой версии, и прекращение поддержки Internet Explorer 10 и 11.

Ниже приведены некоторые из ожидаемых изменений в Bootstrap 5:

• Удаление jQuery

• Переключение на Vanilla JavaScript

• Адаптивные размеры шрифтов

• Отключение поддержки Internet Explorer 10 и 11

• Изменение единицы измерения ширины "желоба"

• Удаленные "колоды карт"

• Оптимизация Navbar

• Библиотека пользовательских иконок SVG

• Переход от Jekyll к Hugo

• Обновления классов

 

Удаление jQuery

 

 

jQuery - это библиотека, которая предлагает уровень абстракции общего назначения для классических веб-сценариев, который эффективен практически при любых требованиях веб-разработки. Его расширяемая природа позволяет получать доступ к элементам в документе без написания большого количества JavaScript кода, изменять внешний вид вашего контента на веб-странице, который разработчики используют для кроссбраузерности, изменять содержимое документа, реагировать на взаимодействие с пользователем, получение информации с сервера без обновления страницы с помощью AJAX, добавление анимации на веб-страницу, упрощение общих задач JavaScript и этот список можно продолжать.

Хотя Bootstrap использует jQuery уже более 8 лет, jQuery стал довольно большой и раздутой средой, требующей от веб-сайтов, использующих ее, загрузки и добавления тривиального времени загрузки для библиотеки, которая не может использоваться никаким другим плагином, кроме самого Bootstrap.

Поскольку в настоящее время фреймворки JavaScript, такие как Angular, Vue и React, доминируют в сообществе веб-разработчиков, jQuery теряет свою популярность, поскольку большинство этих современных фреймворков работают через виртуальный DOM, а не непосредственно на DOM, что приводит к гораздо более высокой производительности. Любой, кто использует эти платформы, будет лучше контролировать и поддерживать свой код, чем те, кто использует jQuery.

В дальнейшем любые функции запросов jQuery должны выполняться с помощью чистого или "ванильного кода" JavaScript в Bootstrap 5, который поможет с размером файла или весом фреймворка.

 

Переключение на Vanilla JavaScript

 

 

JavaScript - это web язык программирования. Большинство современных веб-сайтов работают на JavaScript, и все современные веб-браузеры на настольных компьютерах, консолях, планшетах, играх и мобильных телефонах содержат интерпретаторы JavaScript, что делает JavaScript наиболее универсальным языком программирования в мире.

Удаление поддержки jQuery в Bootstrap 5 позволяет писать эффективный "ванильный код" JavaScript, не беспокоясь о размере или добавляя любые другие несущественные функции. Хотя jQuery существует уже долгое время, совершенно невозможно использовать один только jQuery, потому что в основном jQuery добавляет объект "$" в глобальную область с большим количеством функций. Еще более удобные библиотеки, такие как prototype, не являются альтернативой JavaScript, а существуют только как дополнительные инструменты для решения типичных проблем.

Если вы знаете, как работает JavaScript, это серьезное изменение не сильно повлияет на вас, но для некоторых разработчиков, которые знают только, как использовать jQuery, это может быть хорошим шансом выучить язык.

 

Адаптивные размеры шрифтов

 

 

Разработка веб-сайта, который выглядит хорошо для нескольких платформ или окон просмотра, была довольно сложной для некоторых разработчиков. Медиа-запросы являются отличным инструментом для решения типичных проблем типографики, которые позволяют разработчикам контролировать внешний вид типографики на веб-страницах, задавая конкретные размеры шрифтов для элементов типографики в определенном окне просмотра.

Bootstrap 5 по умолчанию включает адаптивные размеры шрифта, что автоматически изменяет размер элемента оформления в соответствии с размером окна просмотра пользователя с помощью движка RFS или Responsive Font Sizes.

Согласно репозиторию RFS, RFS - это механизм изменения размеров, который изначально был разработан для изменения размера шрифта. RFS предлагает возможность изменять практически любое значение для любого свойства CSS с помощью таких единиц, как margin, padding, border-radius или box-shadow.

Это механизм на основе препроцессора или постпроцессора, который автоматически вычисляет соответствующие значения размера шрифта на основе размера экрана пользователя или области просмотра. Он работает на известных препроцессорах или постпроцессорных инструментах, таких как Sass, Less, Stylus или PostCSS.

Например, предположим, что у вас есть класс title-hero, который является классом для вашего элемента тега h1, который вы хотите использовать для основного заголовка в разделе hero. Используя Sass, следующий миксин добьется цели:

 

.hero-title {

  @include font-size(4rem);

}

 

Это будет скомпилировано в это:

 

.hero-title {

  font-size: calc(1.525rem + 3.3vw);

}

@media (min-width: 1200px) {

  .hero-title {

            font-size: 4rem;

  }

}

 

Отказ от поддержки Internet Explorer 10 и 11

 

 

В 1995 году Microsoft выпустила Internet Explorer, который поразил всех, потому что впервые появился браузер, который поддерживал CSS и Java, что сделало его одним из наиболее широко используемых веб-браузеров в 2003 году с долей использования 95%.

Переносясь вперед к 2020 году, Internet Explorer больше не относится к Chrome, Firefox и Edge. Фактически, это стало одним из кошмаров веб-дизайнера, так как он не поддерживает современные стандарты JavaScript. Чтобы работать с Internet Explorer, будь то 10 или 11, коды JavaScript должны быть скомпилированы в ES5 вместо ES6, что увеличивает размер ваших проектов на 30%. Это, очевидно, ограничивает вашу способность использовать функции ES6 или более новые стандарты JavaScript. Еще хуже то, что он не поддерживает множество современных CSS-свойств, что ограничивает возможности вашего современного веб-дизайна.

В Bootstrap 5 команда Bootstrap решила отказаться от поддержки Internet Explorer 10 и 11, что является довольно хорошим ходом, поскольку позволит веб-дизайнерам и разработчикам больше сосредоточиться на разработке современных веб-страниц, не беспокоясь о том, что какой-либо фрагмент кода сломается на старых браузерах или увеличится размер каждого проекта.

 

Изменение единицы измерения ширины "желоба"

 

 

CSS предлагает способы задания размеров или длин элементов с использованием различных единиц измерения, таких как px, em, rem,% vw и vh. Хотя пиксели или px считаются широко известными и используются в абсолютных единицах, относительно DPI и разрешения устройства просмотра, они не меняются в зависимости от других элементов, которые не подходят для современного адаптивного веб-дизайна.

Bootstrap уже давно использует px для своей ширины отступа, чего больше не будет в Bootstrap 5. В соответствии с исправлениями, сделанными на официальной плате отслеживания проекта Bootstrap 5 на Github, ширина желоба теперь будет равна rem, а не px. ,

Rem обозначает «root em», что означает равное вычисленному значению font-size для корневого элемента. Например, 1 rem равен размеру шрифта HTML-элемента (большинство браузеров имеют значение по умолчанию 16 пикселей).

 

Удаленные "колоды карт"

 

 

В Bootstrap 4 для того, чтобы вы могли устанавливать одинаковые карты ширины и высоты, которые не прикреплены друг к другу, вам необходимо использовать "колоды карт", как показано ниже.

 

<div class=”card-deck”>

   <div class=”card”>

      <img class=”card-img-top” src=”…” alt=”Card image cap”>

      <div class=”card-body”>

         <h5 class=”card-title”>Card title</h5>

         <p class=”card-text”>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>

         <p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>

      </div>

   </div>

   <div class=”card”>

      <img class=”card-img-top” src=”…” alt=”Card image cap”>

      <div class=”card-body”>

         <h5 class=”card-title”>Card title</h5>

         <p class=”card-text”>This card has supporting text below as a natural lead-in to additional content.</p>

         <p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>

      </div>

   </div>

   <div class=”card”>

      <img class=”card-img-top” src=”…” alt=”Card image cap”>

      <div class=”card-body”>

         <h5 class=”card-title”>Card title</h5>

         <p class=”card-text”>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>

         <p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>

      </div>

   </div>

</div>

 

В Bootstrap 5 команда Bootstrap удалила колоды карт, так как новая система сетки предлагает более гибкий контроль. Следовательно, можно удалить ненужные классы.

 

Оптимизация Navbar

 

 

Компонент Bootstrap navbar является основной частью Bootstrap, которая используется постоянно. В предыдущих версиях Bootstrap вам нужно было иметь приличную разметку, чтобы она работала. Однако в Bootstrap 4 они упростили это за счет использования HTML-элемента nav или div и неупорядоченного списка. Класс navbar - это класс по умолчанию, который всегда должен присутствовать в компоненте.

По умолчанию Bootstrap 4 использует встроенный блок в своей опции отображения, но в Bootstrap 5 он был удален. Они также использовали сокращенную запись flex и убрали марку бренда, вызванную необходимостью использования контейнеров в навигационных панелях. Помимо этого, они также реализовали темный раскрывающийся список через класс dropdown-menu-dark, который превращает раскрывающийся список в черный фон, который мы обычно видим на выпадающих элементах панели навигации.

 

Библиотека пользовательских иконок SVG

 

 

В версии 3 Bootstrap имеется 250 многократно используемых компонентов значков в формате шрифта под названием «Glyphicons», созданных для предоставления значков группам ввода, оповещениям, раскрывающимся спискам и другим полезным компонентам Bootstrap.

Тем не менее, в Bootstrap 4 он был полностью удален, и веб-дизайнеры и разработчики должны полагаться на бесплатные шрифты значков, такие как Font Awesome, или использовать свои собственные значки SVG, чтобы повысить ценность своего веб-дизайна.

В Bootstrap 5 появилась новая библиотека иконок SVG, тщательно созданная Марком Отто, соучредителем Bootstrap. Перед официальным выпуском Bootstrap 5 эти значки теперь можно добавлять и использовать в вашем проекте в данный момент. Вы можете посетить эту страницу, чтобы узнать больше.

 

Переход от Jekyll к Hugo

 

 

Jekyll - это бесплатный статический генератор сайтов с открытым исходным кодом. Если вы знаете, как работает WordPress, Joomla или Drupal, то, вероятно, у вас есть представление о том, как это работает. Jekyll используется для создания веб-сайтов с простой в использовании навигацией, компонентами веб-сайтов и генерирует весь контент одновременно. Jekyll в основном предоставляет шаблоны страниц, такие как навигация и нижние колонтитулы, которые будут отражаться на всех ваших веб-страницах. Эти шаблоны объединяются с другими файлами с определенной информацией (например, файлом для каждого сообщения в блоге на вашем веб-сайте) для создания полных HTML-страниц для просмотра пользователями сайта.

Bootstrap 4 был отличным инструментом для интеграции с Jekyll через Sass (синтаксически удивительные таблицы стилей), но в Bootstrap 5 ожидается серьезное переключение с Jekyll на Hugo.

Hugo описывается как «Быстрый и гибкий генератор статических сайтов, созданный с любовью spf13 в GoLang». Подобно Jekyll, это генератор статических сайтов, но написанный на языке Go. Возможная причина переключения заключается в том, что Hugo молниеносен, прост в использовании и легко настраивается. По сравнению с Jekyll, он отлично интегрируется с популярным веб-хостингом и может организовать ваш контент с любой структурой URL.

 

Обновления класса

 

 

Конечно, Bootstrap 5 не будет интересен без нового CSS-класса Bootstrap. Bootstrap 4 имеет более 1500 CSS-классов. Будет несколько классов CSS, которые больше не будут доступны в новой версии, и некоторые классы CSS, которые будут добавлены.

Некоторые из классов CSS, которые уже удалены, согласно официальной платформе отслеживания проектов Bootstrap 5 на Github:

 

• form-row

• form-inline

• list-inline

• card-deck

 

Вот несколько новых CSS-классов Bootstrap 5:

Классы gx- * управляют горизонтальной шириной / шириной желоба колонны
gy- * классы контролируют ширину вертикального / рядного желоба
Классы g- * контролируют горизонтальную и вертикальную ширину желоба

 

 

Вывод
 

Один из разочаровывающих опытов разработчика - это переосмысление базового HTML, CSS и JavaScript для каждого проекта. Хотя некоторые предпочитают писать свой собственный код, все же имеет смысл просто использовать существующий фреймворк, такой как Bootstrap.

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

Если вы используете Bootstrap в своих проектах, то вам наверняка понравится приложение Startup - Bootstrap Builder. Это отличный инструмент разработки с большим количеством готовых разработанных и кодированных шаблонов и тем для более быстрого развертывания ваших проектов.

 

Ссылка на оригинал.