Common CSS Overview
Metro UI provides a comprehensive set of CSS utilities that help you build responsive, consistent interfaces without writing custom CSS for common patterns. The Common CSS module includes utilities for layout, typography, colors, spacing, and more.
What is Common CSS?
Section titled “What is Common CSS?”Common CSS is a collection of utility classes that are part of the Metro UI framework. These classes allow you to:
- Apply common styling patterns directly in your HTML
- Create responsive layouts with minimal custom CSS
- Maintain consistent spacing, typography, and colors across your application
- Quickly prototype and build interfaces
Common CSS Components
Section titled “Common CSS Components”The Common CSS module includes several categories of utility classes:
Layout Utilities
Section titled “Layout Utilities”Control how elements are displayed and positioned:
<!-- Display utilities --><div class="d-flex">Flex container</div><div class="d-none d-md-block">Hidden on small screens, visible on medium and up</div>
<!-- Position utilities --><div class="pos-absolute pos-top-left">Positioned at top left</div><div class="float-left">Float left</div>Learn more about Display → Learn more about Position → Learn more about Float →
Typography
Section titled “Typography”Control text appearance and formatting:
<p class="text-bold">Bold text</p><p class="text-uppercase">Uppercase text</p><p class="text-center">Centered text</p><p class="font-secondary">Secondary font</p>Learn more about Typography → Learn more about Font Defines →
Colors and Visual Styling
Section titled “Colors and Visual Styling”Apply colors, borders, and visual effects:
<div class="bg-light fg-dark">Light background, dark text</div><div class="border bd-default">Default border</div><div class="rounded">Rounded corners</div>Learn more about Colors → Learn more about Border →
Spacing and Sizing
Section titled “Spacing and Sizing”Control margins, padding, and element dimensions:
<div class="m-4">Margin level 4</div><div class="p-2">Padding level 2</div><div class="w-100 h-auto">Full width, auto height</div>Learn more about Spacing → Learn more about Sizing →
Flexbox
Section titled “Flexbox”Create flexible layouts with flexbox utilities:
<div class="d-flex flex-justify-between flex-align-center"> <div>Left aligned</div> <div>Right aligned</div></div>Animations and Transitions
Section titled “Animations and Transitions”Add movement and visual feedback:
<div class="ani-spin">Spinning element</div><div class="ani-pulse">Pulsing element</div>When to Use Common CSS
Section titled “When to Use Common CSS”- When you need to quickly prototype interfaces
- When you want to maintain consistent spacing, typography, and colors
- When you need responsive layouts without writing custom media queries
- When you want to avoid writing repetitive CSS for common patterns
- When you need to make small styling adjustments without creating custom CSS classes
Best Practices
Section titled “Best Practices”- Combine utility classes to create complex layouts and styling
- Use responsive utilities (
d-md-block, etc.) to create adaptive interfaces - Maintain a consistent spacing scale using the spacing utilities
- Use the color utilities to ensure consistent branding across your application
- Leverage flexbox utilities for alignment and distribution of elements
- Consider extracting common patterns into components for better maintainability
Browser Compatibility
Section titled “Browser Compatibility”The Common CSS utilities are designed to work in all modern browsers. Some utilities use modern CSS features with appropriate fallbacks for older browsers.
Related Components
Section titled “Related Components”Many Metro UI components use these CSS utilities internally. You can combine utility classes with components to customize their appearance and layout.