Retro Sticky

Windows 98-style sticky notes that demonstrate Bootstrap component patterns

On this page

About

The Retro Sticky component brings back the charm of Windows 98's sticky notes while demonstrating Bootstrap best practices. This example component shows how to properly extend Bootstrap using semantic colors, SCSS variables, and modifier patterns.

Learning Example: This component demonstrates Bootstrap patterns including contextual colors, size modifiers, and SCSS variable usage. Study the source code to learn how to build Bootstrap-friendly components.

Examples

Basic sticky note

A classic yellow sticky note with Windows 98 styling, using Bootstrap's default card structure.

📝 Sticky Note

Remember to:
• Buy milk 🥛
• Call mom
• Water the plants 🌱
• Defrag hard drive (j/k!)

html

<div class="retro-sticky">
<div class="retro-sticky-titlebar">
  <span class="retro-sticky-title">📝 Sticky Note</span>
  <div class="retro-sticky-controls">
    <button class="minimize"></button>
    <button class="maximize"></button>
    <button class="close"></button>
  </div>
</div>
<div class="retro-sticky-body">
  Remember to:
  <br>• Buy milk 🥛
  <br>• Call mom
  <br>• Water the plants 🌱
  <br>• Defrag hard drive (j/k!)
</div>
</div>

Contextual colors

Following Bootstrap's semantic color system, use contextual variants instead of color names.

Primary

Using $primary color
.retro-sticky-primary

Success

Using $success color
.retro-sticky-success

Info

Using $info color
.retro-sticky-info

Warning

Using $warning color
.retro-sticky-warning

Danger

Using $danger color
.retro-sticky-danger

html

<div class="d-flex gap-3 flex-wrap">
<div class="retro-sticky retro-sticky-primary">
  <div class="retro-sticky-titlebar">
    <span class="retro-sticky-title">Primary</span>
    <div class="retro-sticky-controls">
      <button class="close"></button>
    </div>
  </div>
  <div class="retro-sticky-body">
    Using $primary color
    <br>.retro-sticky-primary
  </div>
</div>

<div class="retro-sticky retro-sticky-success">
  <div class="retro-sticky-titlebar">
    <span class="retro-sticky-title">Success</span>
    <div class="retro-sticky-controls">
      <button class="close"></button>
    </div>
  </div>
  <div class="retro-sticky-body">
    Using $success color
    <br>.retro-sticky-success
  </div>
</div>

<div class="retro-sticky retro-sticky-info">
  <div class="retro-sticky-titlebar">
    <span class="retro-sticky-title">Info</span>
    <div class="retro-sticky-controls">
      <button class="close"></button>
    </div>
  </div>
  <div class="retro-sticky-body">
    Using $info color
    <br>.retro-sticky-info
  </div>
</div>

<div class="retro-sticky retro-sticky-warning">
  <div class="retro-sticky-titlebar">
    <span class="retro-sticky-title">Warning</span>
    <div class="retro-sticky-controls">
      <button class="close"></button>
    </div>
  </div>
  <div class="retro-sticky-body">
    Using $warning color
    <br>.retro-sticky-warning
  </div>
</div>

<div class="retro-sticky retro-sticky-danger">
  <div class="retro-sticky-titlebar">
    <span class="retro-sticky-title">Danger</span>
    <div class="retro-sticky-controls">
      <button class="close"></button>
    </div>
  </div>
  <div class="retro-sticky-body">
    Using $danger color
    <br>.retro-sticky-danger
  </div>
</div>
</div>

Size modifiers

Following Bootstrap's sizing pattern (like .btn-sm, .btn-lg), the retro sticky supports size variants.

Small

Compact sticky
.retro-sticky-sm

Default

Regular size sticky
(no modifier needed)

Large

Extra large sticky for longer notes
.retro-sticky-lg

Plenty of room for your thoughts!

html

<div class="d-flex gap-3 flex-wrap align-items-start">
<div class="retro-sticky retro-sticky-sm">
  <div class="retro-sticky-titlebar">
    <span class="retro-sticky-title">Small</span>
    <div class="retro-sticky-controls">
      <button class="close"></button>
    </div>
  </div>
  <div class="retro-sticky-body">
    Compact sticky
    <br>.retro-sticky-sm
  </div>
</div>

<div class="retro-sticky">
  <div class="retro-sticky-titlebar">
    <span class="retro-sticky-title">Default</span>
    <div class="retro-sticky-controls">
      <button class="close"></button>
    </div>
  </div>
  <div class="retro-sticky-body">
    Regular size sticky
    <br>(no modifier needed)
  </div>
</div>

<div class="retro-sticky retro-sticky-lg">
  <div class="retro-sticky-titlebar">
    <span class="retro-sticky-title">Large</span>
    <div class="retro-sticky-controls">
      <button class="close"></button>
    </div>
  </div>
  <div class="retro-sticky-body">
    Extra large sticky for longer notes
    <br>.retro-sticky-lg
    <br>
    <br>Plenty of room for your thoughts!
  </div>
</div>
</div>

Practical examples

Task reminders with semantic colors

Use contextual colors to convey meaning, not just decoration.

⚠️ Deadline

Project presentation
Tomorrow at 2 PM!

Don't forget slides

✅ Done

Completed tasks:
✓ Email client
✓ Fix bug #42
✓ Coffee break ☕

ℹ️ FYI

WiFi password:
Coffee4Life!

(It's always coffee)

html

<div class="d-flex gap-3 flex-wrap">
<div class="retro-sticky retro-sticky-warning retro-sticky-tilted">
  <div class="retro-sticky-titlebar">
    <span class="retro-sticky-title">⚠️ Deadline</span>
    <div class="retro-sticky-controls">
      <button class="minimize"></button>
      <button class="maximize"></button>
      <button class="close"></button>
    </div>
  </div>
  <div class="retro-sticky-body">
    Project presentation
    <br>Tomorrow at 2 PM!
    <br>
    <br>Don't forget slides
  </div>
</div>

<div class="retro-sticky retro-sticky-success retro-sticky-tilted">
  <div class="retro-sticky-titlebar">
    <span class="retro-sticky-title">✅ Done</span>
    <div class="retro-sticky-controls">
      <button class="minimize"></button>
      <button class="maximize"></button>
      <button class="close"></button>
    </div>
  </div>
  <div class="retro-sticky-body">
    Completed tasks:
    <br>✓ Email client
    <br>✓ Fix bug #42
    <br>✓ Coffee break ☕
  </div>
</div>

<div class="retro-sticky retro-sticky-info retro-sticky-tilted">
  <div class="retro-sticky-titlebar">
    <span class="retro-sticky-title">ℹ️ FYI</span>
    <div class="retro-sticky-controls">
      <button class="minimize"></button>
      <button class="maximize"></button>
      <button class="close"></button>
    </div>
  </div>
  <div class="retro-sticky-body">
    WiFi password:
    <br>Coffee4Life!
    <br>
    <br>(It's always coffee)
  </div>
</div>
</div>

Bootstrap patterns demonstrated

1. Contextual colors

The component uses Bootstrap's semantic color system:

// Instead of: .retro-sticky-blue
.retro-sticky-primary {
  background: lighten($primary, 40%);
}

2. SCSS variables

All colors reference Bootstrap variables for consistency:

// Uses Bootstrap's color variables
background: $gray-400;
border-color: $white $gray-600 $gray-600 $white;
color: $black;

3. Size modifiers

Follows Bootstrap's sizing convention:

.retro-sticky-sm { /* Small variant */ }
.retro-sticky-lg { /* Large variant */ }
// Just like: .btn-sm, .btn-lg

4. Component extension

Extends Bootstrap's card component:

.retro-sticky {
  @extend .card;
  // Custom styles...
}

CSS Classes

Class	Description	Bootstrap Pattern
`.retro-sticky`	Base class	Extends `.card`
`.retro-sticky-sm`	Small size	Like `.btn-sm`
`.retro-sticky-lg`	Large size	Like `.btn-lg`
`.retro-sticky-primary`	Primary color	Uses `$primary`
`.retro-sticky-success`	Success color	Uses `$success`
`.retro-sticky-info`	Info color	Uses `$info`
`.retro-sticky-warning`	Warning color	Uses `$warning`
`.retro-sticky-danger`	Danger color	Uses `$danger`
`.retro-sticky-inactive`	Inactive state	Uses `$gray-600`
`.retro-sticky-tilted`	Rotated look	-

Key takeaways

This component demonstrates important Bootstrap principles:

Use semantic colors - primary, success, danger instead of blue, green, red
Follow naming patterns - Size modifiers like -sm and -lg
Leverage SCSS variables - Colors automatically update with theme changes
Extend existing components - Build on Bootstrap's foundation
Maintain consistency - Components that feel native to Bootstrap

When building your own components, follow these patterns to ensure they integrate seamlessly with Bootstrap and are maintainable as the framework evolves.

Accessibility

Semantic HTML structure maintained
Color contrast follows Bootstrap's standards
Respects prefers-reduced-motion for animations
Focus states inherited from Bootstrap's button styles