Сегодня почти каждый веб-проект использует иконки. Это отличный инструмент визуальной коммуникации, который помогает акцентировать внимание на элементах интерфейса. Существует хорошая статья о том, почему стоит использовать иконки — "Icons in Web Design". Но эта статья отвечает на другой вопрос — как их использовать?

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

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

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

Если всё сделано правильно, вы сможете разрабатывать и поддерживать весь проект, используя только 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.