# UI Styling Standards ## Overview Standards and conventions for CSS frameworks, responsive design, and styling best practices in frontend development. ## Quick Reference **Framework**: Tailwind CSS + Flowbite (default) **Approach**: Mobile-first responsive **Format**: Utility-first CSS **Specificity**: Use `!important` for overrides when needed --- ## CSS Framework Conventions ### Tailwind CSS **Loading Method** (Preferred): ```html ``` **Avoid**: ```html ``` **Why**: Script tag allows for JIT compilation and configuration ### Flowbite **Loading Method**: ```html ``` **Usage**: Flowbite is the default component library unless user specifies otherwise **Components Available**: - Buttons, forms, modals - Navigation, dropdowns, tabs - Cards, alerts, badges - Tables, pagination - Tooltips, popovers --- ## Responsive Design Requirements ### Mobile-First Approach **Rule**: ALL designs MUST be responsive **Breakpoints** (Tailwind defaults): ```css /* Mobile first - base styles apply to mobile */ .element { } /* Small devices (640px and up) */ @media (min-width: 640px) { } /* sm: */ /* Medium devices (768px and up) */ @media (min-width: 768px) { } /* md: */ /* Large devices (1024px and up) */ @media (min-width: 1024px) { } /* lg: */ /* Extra large devices (1280px and up) */ @media (min-width: 1280px) { } /* xl: */ /* 2XL devices (1536px and up) */ @media (min-width: 1536px) { } /* 2xl: */ ``` **Tailwind Syntax**: ```html
Left
Right
Content
``` ### Testing Requirements ✅ Test at minimum breakpoints: 375px, 768px, 1024px, 1440px ✅ Verify touch targets (min 44x44px) ✅ Check text readability at all sizes ✅ Ensure images scale properly ✅ Test navigation on mobile --- ## Color Palette Guidelines ### Avoid Bootstrap Blue **Rule**: NEVER use generic Bootstrap blue (#007bff) unless explicitly requested **Why**: Overused, lacks personality, feels dated **Alternatives**: ```css /* Instead of Bootstrap blue */ --bootstrap-blue: #007bff; /* ❌ Avoid */ /* Use contextual colors */ --primary: oklch(0.6489 0.2370 26.9728); /* Vibrant orange */ --accent: oklch(0.5635 0.2408 260.8178); /* Rich purple */ --info: oklch(0.6200 0.1900 260); /* Modern blue */ --success: oklch(0.7323 0.2492 142.4953); /* Fresh green */ ``` ### Color Usage Rules 1. **Semantic naming**: Use `--primary`, `--accent`, not `--blue`, `--red` 2. **Brand alignment**: Choose colors that match project personality 3. **Contrast testing**: Ensure WCAG AA compliance (4.5:1 minimum) 4. **Consistency**: Use theme variables throughout --- ## Background/Foreground Contrast ### Contrast Rule **When designing components or posters**: - **Light component** → Dark background - **Dark component** → Light background **Why**: Ensures visibility and creates visual hierarchy **Examples**: ```html
Light card content
Dark card content
``` ### Component-Specific Rules **Posters/Hero Sections**: - Use high contrast for readability - Consider overlay gradients for text on images - Test with actual content **Cards/Panels**: - Subtle elevation with shadows - Clear boundary between card and background - Consistent padding --- ## CSS Specificity & Overrides ### Using !important **Rule**: Use `!important` for properties that might be overwritten by Tailwind or Flowbite **Common Cases**: ```css /* Typography overrides */ h1 { font-size: 2.5rem !important; font-weight: 700 !important; line-height: 1.2 !important; } body { font-family: 'Inter', sans-serif !important; color: var(--foreground) !important; } /* Component overrides */ .custom-button { background-color: var(--primary) !important; border-radius: var(--radius) !important; } ``` **When NOT to use**: ```css /* ❌ Don't use for everything */ .element { margin: 1rem !important; padding: 1rem !important; display: flex !important; } /* ✅ Use Tailwind utilities instead */
``` ### Specificity Best Practices 1. **Prefer utility classes** over custom CSS 2. **Use !important sparingly** - only for framework overrides 3. **Scope custom styles** to avoid conflicts 4. **Use CSS custom properties** for theming --- ## Layout Patterns ### Flexbox (Preferred for 1D layouts) ```html
Item 1
Item 2
Item 1
Item 2
Centered content
``` ### Grid (Preferred for 2D layouts) ```html
Card 1
Card 2
Card 3
Content
``` ### Container Patterns ```html
Content
Content
``` --- ## Typography Standards ### Hierarchy ```html

Main Heading

Section Heading

Subsection

Minor Heading

Body text

Secondary text

Caption text

``` ### Font Loading **Always use Google Fonts**: ```html ``` **Apply in CSS**: ```css body { font-family: 'Inter', sans-serif !important; } ``` ### Readability - **Line length**: 60-80 characters optimal - **Line height**: 1.5-1.75 for body text - **Font size**: Minimum 16px for body text - **Contrast**: 4.5:1 minimum for normal text --- ## Component Styling Patterns ### Buttons ```html ``` ### Cards ```html

Card Title

Card content

Interactive Card

Hover for effect

``` ### Forms ```html
``` --- ## Accessibility Standards ### ARIA Labels ```html ``` ### Semantic HTML ```html
...
...
...
...
...
...
``` ### Focus States ```css /* Always provide visible focus states */ button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Tailwind utility */ ``` --- ## Performance Optimization ### CSS Loading ```html ``` ### Image Optimization ```html Description ``` ### Critical CSS ```html ``` --- ## Best Practices ### Do's ✅ - Use Tailwind utility classes for rapid development - Load Tailwind via script tag for JIT compilation - Use Flowbite as default component library - Ensure all designs are mobile-first responsive - Test at multiple breakpoints - Use semantic HTML elements - Provide ARIA labels for interactive elements - Use CSS custom properties for theming - Apply `!important` for framework overrides - Ensure proper color contrast (WCAG AA) ### Don'ts ❌ - Don't use Bootstrap blue without explicit request - Don't load Tailwind as a stylesheet - Don't skip responsive design - Don't use div soup (use semantic HTML) - Don't forget focus states - Don't hardcode colors (use theme variables) - Don't skip accessibility testing - Don't use tiny touch targets (<44px) - Don't mix color formats - Don't over-use `!important` --- ## Framework Alternatives If user requests a different framework: **Bootstrap**: ```html ``` **Bulma**: ```html ``` **Foundation**: ```html ``` --- ## References - [Tailwind CSS Documentation](https://tailwindcss.com/docs) - [Flowbite Components](https://flowbite.com/docs/getting-started/introduction/) - [WCAG Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) - [MDN Web Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)