## Bug: Utility classes missing responsive breakpoint prefix variants

[Pcmhacker-piro]

Bug: Utility classes missing responsive breakpoint prefix variants

Description

EaseMotion-css provides 80+ utility classes in core/utilities.css (text alignment, spacing, flex, grid, display, etc.), but none of them have responsive breakpoint prefix variants. Users cannot apply .ease-text-center on mobile and .ease-text-left on desktop without writing custom media queries, which defeats the purpose of a utility-first approach.

Steps to Reproduce

1. Link EaseMotion CSS v1.0.0
2. Try to create a mobile-first responsive layout:

   <div class="ease-flex ease-flex-col ease-flex-md-row">
     <div>Item 1</div>
     <div>Item 2</div>
   </div>

3. Check that ease-flex-md-row produces no effect

Expected Behavior

Utility classes should have responsive variants using breakpoint prefixes (sm:, md:, lg:) so users can apply different utility values at different viewport widths without writing custom CSS.

Actual Behavior

The .ease-flex-md-row class does not exist. Only the base .ease-flex-row and .ease-flex-col classes exist without any responsive layer. Users must write custom media queries to create responsive layouts, adding unnecessary CSS overhead and breaking the utility-class workflow.

Implementation Hints

The core/utilities.css file needs responsive variants generated for the defined breakpoints. The current breakpoints (found in core/variables.css) should be used:

/* Current — no responsive variants */
.ease-flex {
  display: flex;
}

.ease-flex-col {
  flex-direction: column;
}

.ease-flex-row {
  flex-direction: row;
}

.ease-text-center {
  text-align: center;
}

.ease-mt-4 {
  margin-top: 16px;
}

The fix requires adding responsive variants for each utility:

/* Define breakpoints from variables.css */
:root {
  --ease-bp-sm: 640px;
  --ease-bp-md: 768px;
  --ease-bp-lg: 1024px;
  --ease-bp-xl: 1280px;
}

/* Responsive variants using layers */
@media (min-width: 640px) {
  .sm\:ease-flex { display: flex; }
  .sm\:ease-flex-row { flex-direction: row; }
  .sm\:ease-text-center { text-align: center; }
  .sm\:ease-mt-4 { margin-top: 16px; }
}

@media (min-width: 768px) {
  .md\:ease-flex { display: flex; }
  .md\:ease-flex-row { flex-direction: row; }
  .md\:ease-text-center { text-align: center; }
  .md\:ease-mt-4 { margin-top: 16px; }
}

@media (min-width: 1024px) {
  .lg\:ease-flex { display: flex; }
  .lg\:ease-flex-row { flex-direction: row; }
  .lg\:ease-text-center { text-align: center; }
  .lg\:ease-mt-4 { margin-top: 16px; }
}

For maintainability, the responsive variants should be scoped to the most commonly used utilities (display, flexbox, grid, spacing, text alignment) rather than all 80+ classes:

/* Priority utilities for responsive variants */
const RESPONSIVE_UTILITIES = {
  display: ['ease-block', 'ease-inline', 'ease-inline-block', 'ease-flex', 'ease-inline-flex', 'ease-grid', 'ease-hidden'],
  flexbox: ['ease-flex-row', 'ease-flex-col', 'ease-flex-wrap', 'ease-items-center', 'ease-justify-center', 'ease-gap-2', 'ease-gap-4'],
  text: ['ease-text-center', 'ease-text-left', 'ease-text-right'],
  sizing: ['ease-w-full', 'ease-h-full'],
  spacing: ['ease-mt-4', 'ease-mb-4', 'ease-p-4', 'ease-p-6'],
};

Using CSS custom properties with container queries as a future-facing alternative:

@container (min-width: 400px) {
  .ease-container\:flex-row { flex-direction: row; }
}

Affected Files

• core/utilities.css — all utility classes, missing responsive breakpoint media query variants
• core/variables.css — define breakpoint custom properties if not already present

Labels

type:bug, level:intermediate, GSSoC-26

[github-actions]

Hey @Pcmhacker-piro! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside submissions/examples/your-feature-name/
• Include demo.html · style.css · README.md in your folder
• Max 2 active issues per contributor — unassign others before taking new ones

🕑 Inactivity rule: Issues with no progress for 5 days will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡

[ShamrithaGS]

/assign

[SAPTARSHI-coder]

@ShamrithaGS go