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

В этой статье я расскажу, как организовать SCSS-файлы, подключать глобальные переменные и сделать их доступными во всех компонентах Angular. Такой подход не только экономит время, но и делает проект более понятным для команды. А для больших проектов на NX вы узнаете, как делиться стилями между разными приложениями и библиотеками.

При интеграции CSS-фреймворков или UI-библиотек часто подключают готовые сборки, но такой подход ограничивает возможности кастомизации и увеличивает размер проекта.

В этой статье я покажу, как использовать исходный код Bootstrap (SCSS), настроить модульную структуру и подключить только те компоненты, которые действительно нужны. Результат — чистая архитектура стилей, меньший размер сборки и удобный фундамент для будущей дизайн-системы.

Иконочные шрифты — лучшие!

Их очень легко сгенерировать, использовать и кастомизировать. Они имеют широкую поддержку в браузерах, а код выглядит максимально чистым. Но, к сожалению, есть и большой минус: иконочные шрифты не поддерживают более одного цвета. Узнайте о недостатках иконочных шрифтов и почему SVG-спрайты — лучшая из возможных альтернатив.

Иконки — это простой, но мощный инструмент, который помогает пользователю быстрее ориентироваться в интерфейсе.

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

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

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

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

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

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

В этой статье мы разбираем, как создать согласованную цветовую систему для всего проекта, используя всего 6–8 основных цветов и их оттенков. Я покажу, как правильно распределять цвета между компонентами и переменными, чтобы всё оставалось предсказуемым и удобным для команды.