Bootstrap 5: Как внести свой вклад в развитие популярного фреймворка

Bootstrap — это самый популярный HTML, CSS и JS фреймворк для разработки адаптивных и мобильных первых проектов в интернете. С момента своего появления Bootstrap претерпел множество изменений, и сейчас он находится на пятой версии, которая принесла множество улучшений и новых возможностей.

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

Вклад в Bootstrap может быть разнообразным и не обязательно требует глубоких знаний в кодировании.

Несколько способов, как вы можете помочь

Использование и тестирование

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

Документация

Улучшение и перевод документации помогает пользователям лучше понимать, как использовать различные компоненты и классы Bootstrap. Если вы владеете несколькими языками, вы можете помочь, переведя документацию на другие языки.

Разработка

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

Дизайн

Bootstrap — это не только код, но и дизайн. Если вы дизайнер, вы можете помочь в создании новых тем или улучшении пользовательского интерфейса.

Обучение и сообщество

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

Финансовая поддержка

Вы также можете внести свой вклад, поддерживая проект финансово через платформы вроде Open Collective или GitHub Sponsors.

Прочая полезная информация

Настройка инструментов

Bootstrap использует npm-скрипты для создания документации и компиляции исходных файлов. В пакете.json содержатся эти скрипты для компиляции кода, запуска тестов и многого другого. Они не предназначены для использования вне бутстрап репозитория и документации.

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

1. Загрузите и установите Node.js, который используется для управления зависимостями.
2. Либо загрузите исходные тексты Bootstrap, либо разветвите и клонируйте репозиторий Bootstrap.
3. Перейдите в корневой каталог /bootstrap и запустите npm install, чтобы установить локальные зависимости, перечисленные в package.json.

По завершении вы сможете запускать различные команды, предоставляемые из командной строки.

Использование npm- скриптов

Наш package.json включает в себя множество задач для разработки проекта. Запустите npm run, чтобы увидеть все сценарии npm в вашем терминале. Основные задачи включают:

Sass

Bootstrap использует Dart Sass для компиляции наших исходных файлов Sass в файлы CSS (включенные в наш процесс сборки), и мы рекомендуем вам сделать то же самое, если вы компилируете Sass с использованием собственного конвейера ресурсов. Ранее мы использовали Node Sass для Bootstrap v4, но LibSass и пакеты, созданные поверх него, включая Node Sass, теперь устарели.

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

Автофиксатор

Bootstrap использует Autoprefixer (включен в наш процесс сборки) для автоматического добавления префиксов поставщика к некоторым свойствам CSS во время сборки. Это экономит наше время и код, позволяя нам писать ключевые части нашего CSS за один раз, устраняя необходимость в миксах поставщиков, подобных тем, что есть в версии 3.

Мы сохраняем список браузеров, поддерживаемых с помощью Autoprefixer, в отдельном файле в нашем репозитории GitHub. Смотрите .browserslistrc для получения подробной информации.

RTLCSS

Bootstrap использует RTLCSS для обработки скомпилированных CSS и преобразования их в RTL – по сути, заменяя свойства, учитывающие горизонтальное направление (например, padding-left), на противоположные. Это позволяет нам писать наш CSS только один раз и вносить незначительные изменения, используя директивы RTLCSS control и value.

Локальная документация

Для локального запуска бутстрап документации требуется использование Hugo, который устанавливается через пакет npm hugo-bin. Hugo - невероятно быстрый и довольно расширяемый генератор статических сайтов, который предоставляет нам: базовые компоненты, файлы на основе Markdown, шаблоны и многое другое. Вот как с этим начать.:

1. Выполните описанную выше настройку инструментов, чтобы установить все зависимости.
2. Из корневого /bootstrap каталога запустите npm run docs-serve в командной строке.
3. Откройте http://localhost:9001/ в вашем браузере, и вуаля.

Узнайте больше об использовании Hugo, прочитав его документацию.

Устранение неполадок

Если у вас возникнут проблемы с установкой зависимостей, удалите все предыдущие версии зависимостей (глобальную и локальную). Затем выполните повторный запуск npm install.

Заключение

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

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