Разработка веб-страницы с точки зрения верстальщика — непрерывный процесс доработки и создания новых блоков. Чем больше проект, тем чаще происходит итерация «идея — функционал — вёрстка». Стадии должны решаться быстро и качественно. И если качество вёрстки напрямую зависит от верстальщика, то скорость — это фактор, который зависит от команды.
Разработчики постоянно придумывают новые инструменты, чтобы ускорить процессы. Для верстальщиков таким инструментом стали CSS-фреймворки — набор готовых блоков, классов и внутренних функций, которые обеспечивают быструю и удобную разработку.
В 2010 году в недрах компании Twitter появился проект Twitter Blueprint. Его задачей было создание системы для разработки новых компонентов. Twitter Blueprint имел набор базовых блоков с готовым дизайном. Это решение обрело популярность внутри компании благодаря своей простоте, так как любой сотрудник, имея минимальный опыт разработки, мог сделать новый концепт блока и предложить его для дальнейшей разработки.
В этом же году проект стал популярен и за пределами компании. Уже в 2011 году он вышел в открытый доступ под названием Bootstrap. С тех пор Bootstrap удерживает лидерство среди инструментов по созданию сайтов. Фреймворк используют от 17 до 30% всех сайтов в интернете. Код Bootstrap можно найти на сайтах таких проектов, как:
- Хекслет
- GitHub
- PayPal
- Spotify
- Twitter
- Duolingo
Это далеко не весь список, который можно привести.
Bootstrap можно использовать как набор готовых элементов, это сильно облегчает и ускоряет верстку. Дальше мы разберемся, как это происходит, а также перечислим плюсы и минусы такого подхода.
***
Освойте профессию Верстальщика вместе с Хесклетом!
Научим создавать страницы с помощью HTML и CSS, пользоваться возможностями модулей Flex и Grid, следить за доступностью сайта, создавать компоненты и утилиты на Bootstrap, верстать адаптивные проекты и многое другое.
Узнайте больше о профессии — ➡️ на сайте Хекслета
***
Bootstrap как набор готовых элементов
Bootstrap можно использовать исключительно как набор уже готовых элементов. Для это не требуется серьёзных знаний HTML и CSS — достаточно уметь создавать самые простые страницы и прочитать документацию. Например, для создания кнопки используется два класса, один из которых отвечает за структуру кнопки, а другой за оформление. Такой подход называется OOCSS — Object Oriented CSS или объектно-ориентированный CSS.
Второй подход, который используется в Bootstrap, — Atomic CSS. На нём построены утилиты во фреймворке. Atomic CSS — подход, при котором один класс использует одно свойство. Использование утилит предполагает более углублённые знания в CSS, так как это будет похоже на использование правил. Только вместо записи в CSS-файле используются классы.
Компоненты и утилиты позволяют очень быстро создать проект различной сложности. Единственное, в чём вы будете ограничены, — выбор дизайна. Если не заниматься переписыванием компонентов, то страница будет выглядеть в точности, как в документации. Это не минус, так как Bootstrap современный фреймворк и его дизайн не пугает при первом взгляде. Многие небольшие компании используют такой подход.
Плюсы использования Bootstrap, как набора готовых элементов
1. Скорость. Процесс разработки сопровождается непрерывной работой по добавлению или удалению функционала на странице. Чем крупнее проект, тем чаще происходят эти процессы и скорость реализации во многом зависит от того, как скоро функционал «обрастёт» внешним видом. Используя готовые компоненты и утилиты Bootstrap, можно быстро ввести новый функционал на сайт и дать его пользователям. Это решает одну из проблем цикла «идея — функционал — вёрстка».
2. Кроссбраузерность. Существует множество браузеров: Chrome, Firefox, Edge, Opera, Safari и т.д. Но каждый из них может обрабатывать HTML и CSS немного по-своему, из-за чего верстальщикам необходимо приводить стандартные элементы к единому виду. Такая задача требует скрупулёзного подхода и знания частых проблем и особенностей разных браузеров. Компоненты Bootstrap учитывают различия браузеров и оптимизированы таким образом, чтобы минимизировать различия между ними.
3. Адаптивность. Bootstrap имеет готовую 12-колоночную сетку, по которой можно располагать компоненты. Сетка является самым популярным компонентом бутстрап и её используют даже те, кто скептически относится к фреймворку. Сетка использует подход, при котором можно сразу настроить адаптивность. Используя готовые компоненты можно быть уверенным в том, что они будут хорошо отображаться на разных устройствах.
4. Доступность. Разработчики должны учитывать использование страниц людьми с ограниченными возможностями. Документация описывает ситуации, как сделать компонент доступным. Но и без этого компоненты имеют базовую доступность. Один из самых полезных классов, связанный с доступностью — .sr-only. Он позволяет скрыть элемент для всех устройств, кроме скринридера. Это важно для правильной организации вёрстки форм на сайте.
5. Низкий порог вхождения. Создание страницы по компонентам не требует экспертного знания HTML и CSS. Это позволяет создавать новые блоки не только верстальщику, но и любому работнику компании, который знает базовые основы вёрстки. Таким образом разработчики могут оснастить новое решение готовой вёрсткой с использованием фреймворка. Bootstrap также может пригодиться небольшим компаниям, которые не готовы потратить большие деньги на разработку веб-сайта. В качестве промежуточного решения Bootstrap будет незаменим. В последствии возможно и остановиться на нём. Мы в Хекслете так и сделали.
Минусы использования Bootstrap, как набора готовых элементов
1. Вес проекта. Фреймворк Bootstrap даёт не только набор классов, но и интерактивные компоненты. Для их работы используется несколько JavaScript-библиотек, которые увеличивают вес подключаемых файлов на странице. Это может стать критичным при разработке мобильных приложений, например, для оказания экстренной помощи, вызова спасательных служб и так далее.
2. Дизайн. Стандартные компоненты накладывают ограничения на дизайн. Компоненты возможно расширять только вглубь, вставляя одни компоненты внутрь других. Модификация компонентов потребует знаний в вёрстке, так как даже незначительные изменения необходимо проверить в браузерах и на разных разрешениях. При этом дизайн стандартных компонентов Bootstrap лаконичен и является примером для дизайнера. При своей простоте они функциональны и помогают правильно подать информацию. Даже в таких ограничениях создаются красивые и удобные сайты за счёт грамотной работы с UI.
3. Функционал. Как и в случае с дизайном, функционал блоков определён заранее и их изменение приводит к существенным доработкам. Это касается и интерактивных элементов, которые используют JavaScript-код. Разработчики для таких элементов внесли классы, которые помогают немного изменить поведение, но этого не всегда бывает достаточно.
Выводы
Изучение Bootstrap может сильно развить вас как разработчика. Ведь кроме написания кода, можно изучать и чужой, который создан и поддерживается тысячами людей по всему миру. В коде можно найти интересные решения, грамотное структурирование и множество полезных функций. Благодаря этому Bootstrap можно использовать во множестве сценариев: от создания прототипов, до вёрстки сложных макетов, а возможность использование отдельных частей позволяет добавить частичку Bootstrap в проект без необходимости переделывания структуры.
***
Освойте профессию Верстальщика вместе с Хесклетом!
Научим создавать страницы с помощью HTML и CSS, пользоваться возможностями модулей Flex и Grid, следить за доступностью сайта, создавать компоненты и утилиты на Bootstrap, верстать адаптивные проекты и многое другое.
Узнайте больше о профессии — ➡️ на сайте Хекслета
