CSS Utilities

The Phenix Design System provides a comprehensive set of CSS utility classes that enable rapid development and consistent styling across your projects.

Overview

CSS utilities in the Phenix Design System are low-level, single-purpose classes that handle specific styling tasks. They follow a consistent naming convention and can be combined to create complex layouts and designs without writing custom CSS.

Key benefits:

• Consistency: Maintain a consistent visual language across your project
• Productivity: Build interfaces faster by applying utility classes directly in your HTML
• Flexibility: Combine utilities for custom styling without additional CSS files
• Responsive: Apply utilities conditionally based on screen size
• Lightweight: Include only the utilities you actually use

Available Utilities

Layout & Positioning

• Display & Visibility: Control how elements are displayed and hidden.
• Sizing: Control width, height, and aspect ratio of elements.
• Spacing: Apply margin and padding.
• Positioning: Control element position, coordinates, and z-index.
• Overflow & Float: Manage content overflow and legacy float layouts.

Visual Appearance

• Colors: Apply text colors.
• Backgrounds: Set background colors, gradients, and images.
• Borders: Control border width, style, color, and radius.
• Shadows: Add box and text shadow effects.
• Overlays: Add semi-transparent layers over elements.
• Typography: Manage font families, sizes, weights, line heights, and text formatting.

Media & Content

• Media Elements: Handle responsive images, videos, and iframes.

Interaction & Feedback

• Interactive Utilities: A collection of utilities for interactive feedback and effects.
  • Effects: Apply animations, transformations, and highlight effects.
  • Transitions: Smooth state changes.
  • Scroll Effects: Control scrolling behavior like snapping.
• Tooltips: Add simple informational popups on hover.
• Custom Scrollbar: Apply styled scrollbars to elements.

Naming Convention

Phenix Design System utilities follow these patterns:

1. Property or function Prefix: Indicates the property being styled (e.g., bg- for background, tx- for text)
2. Value or variant: Specifies the value to apply (e.g., primary, center, bold)
3. Optional directional modifier: Indicates direction (e.g., -top, -start)
4. Optional responsive prefix: Indicates screen size (e.g., -md, -lg)

Examples:

• bg-primary: Primary background color
• tx-center: Center-aligned text
• border-bottom-2: 2px bottom border
• hidden-md: Hidden on medium screens and up

Responsive prefixes

All utilities can be applied conditionally at different breakpoints using these prefixes:

• No prefix: Applied at all screen sizes
• -sm: Applied at small screens (≥ 500px) and up
• -md: Applied at medium screens (≥ 768px) and up
• -lg: Applied at large screens (≥ 1200px) and up
• -xl: Applied at extra large screens (≥ 1400px) and up

Example:

<div class="hidden-md block-md">
  <!-- Hidden on mobile, visible on medium screens and up -->
</div>

Using Utilities Together

Utilities are designed to be combined to create complex styles:

<div class="bg-light py-20 px-30 radius-lg border-1 border-gray tx-center mb-20">
  <h2 class="fs-24 weight-bold color-primary mb-10">Card Title</h2>
  <p class="fs-16 h1-lg mb-15">Card description goes here with larger line height.</p>
  <a href="#" class="btn primary transition-smooth">Learn More</a>
</div>

Best Practices

1. Combine thoughtfully: Choose utilities that work well together and avoid conflicts
2. Consider mobile first: Start with base utilities and add responsive variants
3. Use semantic HTML: Utilities handle styling, but HTML still conveys meaning
4. Group related utilities: Keep related utilities together for readability
5. Extract components: For frequently reused patterns, consider creating component classes
6. RTL compatibility: Use logical properties (start/end instead of left/right) for bi-directional support