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

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

Если всё сделано правильно, вы сможете разрабатывать и поддерживать весь проект, используя только 6–8 основных цветов и их оттенков.

Typically, I use the following structure for global styles in any project. This setup allows for a highly flexible, easy-to-read, and maintainable style system, which is crucial for large projects that may last several months or even years.

Let’s review each of these folders:

Common: contains typography styles, imported fonts, icons, and core styles used across the project, such as container.scss or helpers.scss.

There are several ways to integrate a CSS library into your project. By “CSS library,” I mean any modern CSS framework or UI library, such as Bootstrap, NG-Zorro, PrimeNG, etc. While all these methods work, many do not offer great flexibility or support deep customization of the chosen framework.

To build a robust foundation for your design system and ensure easy future customization, it’s best to use the source code styles (SASS or LESS files) instead of the minified version. This approach provides a more convenient workflow, reduces unnecessary code, and increases flexibility.