responsive-styling

Purpose Generate mobile-first, responsive CSS/SCSS that works across all devices and follows accessibility best practices.

Mobile-First Approach Always write base styles for mobile, then enhance for larger screens:

❌ Desktop-first (using max-width) ❌ Magic numbers (random breakpoints) ❌ Forgetting touch targets ❌ Fixed pixel widths that don't scale ❌ Tiny text on mobile (<16px) ❌ Horizontal scrolling ❌ Ignoring landscape mobile ❌ Breaking at intermediate sizes

Автоматически создавайте адаптивный CSS/SCSS, ориентированный на мобильные устройства, при создании стилей компонентов или упоминании об адаптивном дизайне. Реализует стандартные точки останова (768 пикселей, 1024 пикселей), обеспечивает цветовой контраст WCAG AA, создает сенсорные интерфейсы (минимальные целевые значения 44 пикселей), добавляет правильные индикаторы фокуса, поддерживает уменьшенное движение, оперативно масштабирует типографику и предоставляет подробные технические характеристики с точными значениями. Источник: kanopi/cms-cultivator.