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:
- Property or function Prefix: Indicates the property being styled (e.g.,
bg-
for background,tx-
for text) - Value or variant: Specifies the value to apply (e.g.,
primary
,center
,bold
) - Optional directional modifier: Indicates direction (e.g.,
-top
,-start
) - Optional responsive prefix: Indicates screen size (e.g.,
-md
,-lg
)
Examples:
bg-primary
: Primary background colortx-center
: Center-aligned textborder-bottom-2
: 2px bottom borderhidden-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:
html
<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:
html
<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
- Combine thoughtfully: Choose utilities that work well together and avoid conflicts
- Consider mobile first: Start with base utilities and add responsive variants
- Use semantic HTML: Utilities handle styling, but HTML still conveys meaning
- Group related utilities: Keep related utilities together for readability
- Extract components: For frequently reused patterns, consider creating component classes
- RTL compatibility: Use logical properties (
start
/end
instead ofleft
/right
) for bi-directional support