Purpose
The Style Guide helps keep TranspoFairfax visually consistent and easier to maintain
as the site grows across project pages, community pages, corridor pages, resource pages,
archive pages, and future TAC tools.
Global Stylesheet Standard
TranspoFairfax should use a shared global stylesheet:
style.css
- Avoid page-specific inline styling when possible.
- Use shared classes for layout, cards, buttons, grids, headers, and footers.
- Keep visual changes centralized in the global stylesheet.
Core Layout Classes
| Class | Purpose |
|---|
| container | Centers content and controls page width. |
| hero | Introductory page banner with title and summary. |
| card | Primary content block for page sections. |
| info-grid | Grid layout for grouped navigation cards. |
| info-card | Smaller clickable card used in hubs and landing pages. |
| button | Primary action link style. |
| footer-grid | Multi-column footer layout. |
| footer-bottom | Bottom footer line with update/project information. |
Header Standard
Each page should include:
- TranspoFairfax site name
- Tagline: Transportation Projects • People • Funding
- Primary navigation
Top navigation should generally include:
- Home
- Projects
- Communities
- Corridors
- Categories
- Traffic Now
- Resources
- TAC
Footer Standard
Each page should use the shared TranspoFairfax footer language:
- Community Transportation Information & Collaboration
- Independent community transportation information resource
- Powered by Look.Net
- Project of MtVernon.net
- Last updated date
Page Structure Standard
Most pages should follow this structure:
- Header
- Hero section
- Main content section
- Cards for each major topic
- Related pages section
- Back / next buttons
- Footer
Project Page Format
- Quick Summary
- Project Type
- Location
- Lead Agencies
- Current Status
- Purpose & Need
- Project Description
- Community Impacts
- Benefits
- Concerns / Issues to Monitor
- Related Projects
- References & Links
- Last Updated
Community Page Format
- Quick Snapshot
- Featured Projects
- Transportation Issues Being Monitored
- Why This Community Matters
- Transit / Access Considerations
- Related Categories
- Related Communities & Corridors
- Connection to TAC
Corridor Page Format
- Quick Snapshot
- Featured Corridor Projects
- Transportation Issues Being Monitored
- Why This Corridor Matters
- Related Communities
- Related Categories
- Connection to TAC
Resource Page Format
- Purpose
- Plain-language explanation
- Tables or lists where helpful
- Related resources
- Back buttons
Tables
Use tables for structured reference information such as:
- Acronyms
- Data fields
- Status definitions
- Funding sources
- Contributor roles
- API endpoints
Buttons & Links
- Use buttons for major navigation actions.
- Use regular text links inside paragraphs and lists.
- Include a “Back to TranspoFairfax” button near the bottom of standalone pages.
- Include related page buttons where useful.
File Naming Standards
- Use lowercase filenames.
- Use hyphens instead of spaces.
- Use clear descriptive names.
- Place project pages in projects/.
- Place community and corridor pages in communities/ unless a separate corridors folder is created later.
- Place category pages in categories/.
← Back to TranspoFairfax
Editorial Guide
Contributor Guide