CSS & Styling Architecture
FlightPlan uses a layered, composable approach to styling. This guide covers the style hierarchy, available classes, and best practices.
Philosophy
Our styling philosophy prioritizes simplicity and maintainability:
- Browser defaults first - don't override unless needed
- Minimal CSS footprint - every line is maintenance overhead
- Utility classes for common patterns - composable and reusable
- Compile-time safety - use Css constants, not raw strings
Style Hierarchy
Styles are applied in priority order (highest to lowest):
- 1. Inline style (element's Style property)
- 2. Page-specific styles
- 3. App-level styles (e.g., RAIDLogStyles)
- 4. Suite-level styles (OpsODomStyles)
- 5. Browser defaults
Higher priority styles override lower ones. Use the lowest level that makes sense.
CSS Variables
Global CSS variables are defined in :root and can be used anywhere:
Colors
| Variable | Value | Usage |
|---|---|---|
| --gsk-orange | #f36633 | Primary brand color |
| --gsk-orange-dark | #d85528 | Hover states |
| --white | #ffffff | Backgrounds |
| --gray-lightest | #f8f9fa | Subtle backgrounds |
| --gray-light | #f5f5f5 | Page background |
| --gray-medium | #e0e0e0 | Borders |
| --gray-dark | #666666 | Secondary text |
Spacing
| Variable | Value | Usage |
|---|---|---|
| --spacing-xs | 5px | Tight spacing |
| --spacing-sm | 10px | Default spacing |
| --spacing-md | 20px | Section spacing |
| --spacing-lg | 30px | Large gaps |
Typography
| Variable | Value |
|---|---|
| --font-sm | 0.875rem |
| --font-md | 1rem |
| --radius-sm | 4px |
Utility Classes
Single-purpose classes that can be combined with any element:
Text Utilities
| Class | Constant | Effect |
|---|---|---|
| nowrap | Css.Nowrap | white-space: nowrap |
| text-center | Css.TextCenter | text-align: center |
| text-right | Css.TextRight | text-align: right |
| text-left | Css.TextLeft | text-align: left |
| bold | Css.Bold | font-weight: bold |
Vertical Alignment
| Class | Constant | Effect |
|---|---|---|
| valign-top | Css.ValignTop | vertical-align: top |
| valign-middle | Css.ValignMiddle | vertical-align: middle |
Width
| Class | Constant | Effect |
|---|---|---|
| w-full | Css.FullWidth | width: 100% |
Combinatorial Pattern
Some components use a base class plus variant classes:
Buttons
// Base + variant Css.Combine(Css.Button, Css.ButtonPrimary) // "btn btn-primary" Css.Combine(Css.Button, Css.ButtonDanger) // "btn btn-danger"
| Variant | Constant | Appearance |
|---|---|---|
| (base) | Css.Button | White with gray border |
| primary | Css.ButtonPrimary | GSK Orange |
| secondary | Css.ButtonSecondary | Gray |
| danger | Css.ButtonDanger | Red |
Alerts
// Base + variant Css.Combine(Css.Alert, Css.AlertSuccess) // "alert alert-success"
| Variant | Constant | Color |
|---|---|---|
| info | Css.AlertInfo | Blue |
| success | Css.AlertSuccess | Green |
| warning | Css.AlertWarning | Yellow |
| error | Css.AlertError | Red |
Tables with Utilities
// Table + utility Css.Combine(Css.BorderTable, Css.Nowrap) // "border-table nowrap"
Best Practices
- Always use Css constants - never raw strings like "border-table"
- Use Css.Combine() for multiple classes
- Prefer utility classes over inline styles
- Check if a utility exists before creating inline style
- Add new utilities to OpsODomStyles.ConfigureUtilities()
- Use CSS variables for colors and spacing
Debugging Styles
View page source to see rendered CSS. Each section is marked with a comment:
/* OpsO - Header */
.site-header { background: var(--white); ... }
.header-container { display: flex; ... }
/* OpsO - Navigation */
.main-nav { flex: 1; ... }