TDS 017 — Реализуем компонент Flex в дизайн-системе
Переходим к реализации Flexbox-модели в нашей дизайн-системе и создаём компонент Flex. Пошагово формируем набор пропсов: направление, отступы между элементами, выравнивание по осям, реверс, перенос строк, размеры. Отдельно обсуждаем нейминг и сознательные отхождения от HTML-спецификации ради семантики и удобства использования в кросс-платформенной дизайн-системе. Разбираем, как внутренние термины дизайн-системы проецируются на CSS-спецификацию через вспомогательные функции, выступающие «мостом» между абстракцией и платформой. Обсуждаем типичные сложности Flexbox — работу с осями, выравниванием и direction — и почему часть дефолтов имеет смысл менять ради ускорения сборки интерфейсов. В результате получаем практичный Flex-компонент, покрывающий реальные сценарии и готовый к использованию. #frontend #frontendarchitecture #uiarchitecture #designsystem #flexbox #layout #uicomponents #componentarchitecture #componentlibrary #webdevelopment
Переходим к реализации Flexbox-модели в нашей дизайн-системе и создаём компонент Flex. Пошагово формируем набор пропсов: направление, отступы между элементами, выравнивание по осям, реверс, перенос строк, размеры. Отдельно обсуждаем нейминг и сознательные отхождения от HTML-спецификации ради семантики и удобства использования в кросс-платформенной дизайн-системе. Разбираем, как внутренние термины дизайн-системы проецируются на CSS-спецификацию через вспомогательные функции, выступающие «мостом» между абстракцией и платформой. Обсуждаем типичные сложности Flexbox — работу с осями, выравниванием и direction — и почему часть дефолтов имеет смысл менять ради ускорения сборки интерфейсов. В результате получаем практичный Flex-компонент, покрывающий реальные сценарии и готовый к использованию. #frontend #frontendarchitecture #uiarchitecture #designsystem #flexbox #layout #uicomponents #componentarchitecture #componentlibrary #webdevelopment
