От автора: благодаря передовым технологиям CSS, таким как CSS Grid Layout и Flexbox, кодирование макета веб-страницы стало значительно проще. Если добавить к этому, что поддержка браузерами как Grid, так и Flexbox тоже очень хороша, тогда возникает вопрос: зачем изучать и использовать CSS фреймворки? В этой статье я рассмотрю Bootstrap, так как это, возможно, одна из самых популярных CSS библиотек пользовательского интерфейса.
На мой взгляд, по-прежнему существует ряд причин, почему сегодня все еще имеет смысл изучать и использовать Bootstrap. Вот некоторые из них.
Что такое CSS Grid?
Рейчел Эндрю, известный докладчик и автор по всем вопросам, связанным с CSS Grid, определяет ее следующим образом: Grid — это система сеток. Она позволяет определять столбцы и строки в CSS, не указывая их в разметке. Вам не нужен инструмент, который поможет вам сделать так, чтобы она выглядела так, будто у вас есть сетка, у вас на самом деле есть сетка!
Внедрение этого стандарта CSS дает разработчикам необходимую возможность создавать макеты страниц с помощью собственного CSS-кода без зависимости от разметки HTML, за исключением наличия элемента оболочки, который работает как контейнер сетки. Представьте себе гибкость и потенциал для творчества в веб-дизайне!
Например, для создания этого простого макета вам не нужны специальные классы или дополнительные строки в разметке:
Вот HTML:
<div class="grid"> <header>Header content</header> <main>Main content</main> <aside>Sidebar</aside> <footer>Footer</footer> </div>
Что касается CSS, здесь вы создаете визуальный макет. Все, что требуется в этом простом случае, это несколько строк кода:
.grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 150px 50px;
} header, footer { grid-column: span 12;
} main { grid-column: span 8;
} aside { grid-column: span 4;
}
Вот и все! Неплохо.
Что такое Bootstrap?
На момент написания этой статьи 3.6% всего Интернета использовали Bootstrap:
На веб-сайте Bootstrap вы найдете это определение: Bootstrap — это инструментарий с открытым исходным кодом для разработки с помощью HTML, CSS и JS. Быстро прототипируйте свои идеи или создавайте приложенияс помощью наших переменных Sass и миксинов, гибкой системы сеток, большого количества готовых компонентов и мощных плагинов, построенных на jQuery.
Другими словами, Bootstrap предоставляет готовые компоненты, которые позволяют быстро собрать красивую веб-страницу. Просто напишите соответствующую разметку, и ваше приложение будет отлично выглядеть из коробки.
Bootstrap позволяет также очень просто настраивать его внешний вид на ваше усмотрение и выбирать нужные для вашего проекта фрагменты.
Для чего использовать Bootstrap, когда у нас есть Grid?
Основная жалоба разработчиков на Bootstrap — он раздутый. Причиной этого было то, что он включал множество дополнительных CSS-кодов, которые не использовались в ваших проектах. Вторая жалоба заключалась в том, что компоненты Bootstrap были разработаны до мелких деталей, и это могло вызвать некоторые проблемы, когда дело доходило до переопределения некоторых правил CSS.
Начиная с последней версии этой популярной библиотеки компонентов front-end, оба критических замечания были учтены: Bootstrap стал полностью модульным, поэтому вы просто включаете то, что вам нужно. Кроме того, файлы Sass структурированы таким образом, чтобы вам было удобно настраивать исходные стили в соответствии с вашими потребностями.
В настоящее время основным доводом против использования Bootstrap является тот факт, что с CSS Grid CSS получил собственную сеточную систему, которая не имеет внешних зависимостей и которая, после обучения, позволяет разработчикам с относительными легкость создавать все виды макетов.
Хотя я поклонница CSS Grid, думаю, что Bootstrap все еще имеет свое место во front-end разработке. И думаю это будет справедливо в течение еще какого-то времени. Вот как минимум три причины почему.
Bootstrap — это нечто большее, чем просто его система сеток
Это правда, причина № 1 для использования Bootstrap — это удобная сетка, которая позволяет быстро создавать веб-страницы. Однако в Bootstrap есть такие замечательные компоненты, как универсальный новый компонент карточек, который вы можете использовать для отображения всех типов контента, таких как текст, изображения и видео, а также адаптивная панель навигации, которая работает из коробки. Вы также можете выбрать готовые цветовые схемы по своему вкусу для большинства компонентов.
А как насчет функционала многих из этих компонентов? С помощью Bootstrap добавление всплывающих подсказок, каруселей или кнопок выпадающего меню — это просто вопрос написания соответствующей разметки. Если JavaScript не является вашей сильной стороной, вы все равно можете воспользоваться этими компонентами, не написав ни сточки JavaScript.
Кроме того, если вы не мастер CSS, вы все равно можете использовать возможности Bootstrap в своем веб-дизайне, пока изучаете приемы.
Bootstrap — отличный инструмент для прототипирования
Иногда вам просто нужен рабочий прототип для клиента. Bootstrap позволяет создать его в кратчайшие сроки, с помощью очень небольшого количества нестандартного кода. Это касается не только сетки, но и всех готовых компонентов, которые он может предложить.
Просто добавьте разметку, и ваш прототип будет содержать аккуратную адаптивную панель навигации или интересный блок оповещения.
Работает на старых сайтах, созданных с помощью Bootstrap
Одной из общих задач для разработчиков является работа с существующими веб-сайтами, закодированными другими разработчиками. Нельзя отрицать тот факт, что огромное количество веб-сайтов полагаются на Bootstrap. Знать, как работать с фреймворком, будет очень полезно, если вам придется решать вопросы рефакторинга и поддержки кодовой базы. Не случайно многие описания вакансий включают в списке требований навыки работы с Bootstrap.
Заключение
В заключение, Bootstrap никуда не денется в ближайшее время. Последняя версия поставляется с большим количеством улучшений по сравнению с предыдущими, от интеллектуального использования миксинов Sass и карточек для легкой настройки до внедрения новых компонентов, классов утилит и более модульной архитектуры.
Добавьте к этому отличную документацию и простоту в использовании, и вы поймете, что Bootstrap по-прежнему остается мощным соперником в интерфейсной экосистеме.
Как вы думаете? Ваш следующий проект будет построен с помощью Bootstrap или CSS Grid?
Автор: Maria Antonietta Perna
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.