Component Style Guide

Documentation for course components, typography, and interactive elements.

Typography

All course content follows a clean, readable hierarchy. Headers are bold and purposeful, body text is set in a comfortable serif face.

Heading Hierarchy

Section Header (h2.sh)

Main content sections start with a bold red accent bar on the left.

Subsection (h3.sub)

Smaller headers for subsections within a section.

Callout Boxes

Highlighted callouts draw attention to key concepts, warnings, or tips.

💡 Tip: Use callout boxes to highlight important information students should remember.

⚠️ Warning: Use danger callouts for common mistakes or critical warnings.

✓ Success: Use success callouts to reinforce correct concepts.

Code Blocks

Code blocks are syntax-highlighted and include a copy button for easy reference.

java

public static void main(String[] args) {
    System.out.println("Hello, World!");
}

Concept Grids

Concept grids break down ideas into digestible, visual chunks.

Key Term

Short Title

Explain the concept clearly and concisely. Use 1-2 sentences.

Another Term

Related Concept

Connect ideas to help students see relationships between topics.

Best Practice

Apply What You Learn

Always end with actionable takeaways students can use in code.

Buttons

Course uses semantic button styles for different actions.

Button Styles

Quiz Component

Knowledge checks throughout the course use standardized quiz displays with immediate feedback.

Quiz Structure

Quizzes feature:

Multiple choice questions with A/B/C/D options
Real-time scoring and progress tracking
Detailed explanations after each answer
Final score card with actionable feedback

Layout & Spacing

Sidebar

250px Fixed

Collapsible to 60px icon-only mode. Use Cmd+K to search.

Content Max Width

900px

Prevents lines from getting too long, improving readability.

Vertical Rhythm

1.5rem Grid

Consistent spacing between sections creates visual hierarchy.

Color Palette

Navy

#1B2A4A

Red (Accent)

#C41230

Green (Success)

#00875A

Navigation

Sidebar Navigation

Features:

Collapsible: Click the ‹ icon to collapse to icon-only view
Searchable: Press Cmd+K or click the search button to find topics
Progress Tracking: Completed weeks show a ✓ indicator
Active Highlight: Current page is highlighted in red
Grouped by Phase: Summer (Java) and Offseason (FRC) content separated

Mobile Responsiveness

Below 900px

Sidebar Slides Out

Sidebar becomes an overlay. Collapse toggle hidden. Click hamburger to open.

Below 600px

Mobile Optimization

Smaller fonts, single-column grids, larger touch targets.

Accessibility

Accessible Design:

All interactive elements are keyboard accessible
Color contrast meets WCAG AA standards
Semantic HTML prevents screen reader confusion
Code examples use proper syntax highlighting for clarity